Case study: Designing a winter clothes microsite
UX Case study.
This case study is about creating a winter collection microsite for STYLI since winter is about to come and we noticed that STYLI doesn’t include winter collection as a separate category.
This is the second project in UX/UI immersive course by Misk Academy and was done remotely with my amazing team in two weeks.
We needed to recruit participants to help us understand the main pain points as part of our research. We created a survey with key questions to recruit the targeted users and eliminate the others.
After recruiting the participant we were ready to start the interviews, we asked 14 open-end questions to gather information as much as we can, and to get deeper understanding of the problem to empathize with them.
With all the information we found, we did the affinity mapping and came out with the following key insights:
- Users struggle with complex websites with hard navigation.
- Users doubt product’s quality.
- Users get frustrated with long checkout process.
- Users need inspirations to assemble their outfits.
Our direct competitors are She In, Namshi, Asos, Zara, and VogaCloset. This analysis helps to identify the strengths and weaknesses of our competitors thus designing a better and usable microsite. We did compared them in terms of the market positioning, features, LEMEr’s heuristics, and layout.
Market positioning comparison
LEMEr’s heuristics comparison
We created our persona based on the common characteristics of our interviewees.
We wrote the problem statement based on all the information we gathered from our interviews and business analysis phase.
The problem statement:
People who shop online for winter items usually face problems related to product characteristics, checkout process, website complexity & assembling outfits while they’re shopping online, they need a solution where they have better shopping experience finding what matches what they’re looking for with smooth & fast process that meet their expectations.
We used OPTIMAL WORKSHOP to do the cards sorting, we added 20 categories and then send it to users to help us find the BEST categorization. We got responses and we ended up with the following categorization:
After we had our categorization ready, we created the sitemap to illustrate how the user can navigate.
User Flow & Task Flow
The user flow shows the process steps from the user to accomplish the main goal which is purchasing an item.
The task flow represents a user’s journey to complete a single task.
Task Flow of Adding Review
Task Flow of Boards
We started of with creating the layout of the microsite and then started creating med-fi wireframes. After that we did usability testing on the med-fi wireframes and we got really good feedbacks, and we took them into consideration when we created the hi-fi wireframes.
So, What’s Next?
- Performing usability testing on the hi-fi wireframes.
- Adding shipment tracking indicator.
- Adding share board feature.
In conclusion, this is my second project and during the past two weeks I have learned a lot, and I feel more confident with my work. I’m very thankful to my incredible team and to my lovely instructors.
Thank you for sticking so far, I hope you enjoyed the journey as much as I did.
Software Engineer, UI/UX Designer