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.