Case study: Designing a winter clothes microsite
UX Case study.
Haneen Alghamdi
Introduction
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.
Recruiting Participants
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.
Survey questions:

Interview
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.

Affinity Mapping
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.

Business Analysis
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

Features comparison

LEMEr’s heuristics comparison

Layout comparison

Persona
We created our persona based on the common characteristics of our interviewees.

Problem Statement
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.
Information Architecture
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:

Sitemap
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.
User Flow

Task Flow of Adding Review

Task Flow of Boards

Prototype
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.
Conclusion
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.
Upvote
Haneen Alghamdi
Software Engineer, UI/UX Designer

Related Articles