Responsive E-commerce Clothing Platform
Client: Design Lab
Industry: e-commerce retail
Services: Responsive Design & Branding
Release Date: Sep 2018​​​​​​​
The Brief: 
Mirror is an international major fictional clothing brand with over 400 stores in 32 countries. Their goal is to provide affordable quality clothing for everyone. They are now moving to the digital world and looking to launch their online store.
My Role: 
Lead UX/UI designer responsible for user research, information architecture, prototyping, usability testing, visual design, and branding, within a lean UX framework
The Process
1. Discovery
​​​​​​​I kicked-off the project by conducting research and utilizing different research methods: 
- Secondary research & completive analysis: in order to establish market trends and identify pros and cons of online shopping. 
- User interviews: which were conducted for potential users across different demographics and locations in order to empathize with them. ​​​​​​​​​​​​​​

Competitive Analysis
Various online shopping competitors were analyzed from strengths and weaknesses perspectives in order to analyze e-commerce platforms best practices. Provisional personas were also established to help envision different types of the target audience  
User Interviews
5 participants who are frequent shoppers were interviewed and the following findings were concluded:
- Most participants always check reviews before buying.
- Most participants compare prices across sites.
- Most participants shop online on a desktop.
- It was agreed that online shopping lacks instant gratification.
- Users expressed interest in a simplified return-and-exchange process. 
- Users use search filters often​​​​​​​.
All participants indicated that their biggest concern during online shopping is that the size won't fit them properly.
2. Define
It quickly became apparent that "the size" issue is one of obstacles that would prevent someone from making an online purchase, without having to go through the hassle of return/exchange. But to really put myself in my users' shoes, I created these artifacts...
User Persona
I created this user persona, in order to humanize the data and help develop a better understanding of user behavior, needs and pains...

User Persona for Mirror Online Store

The next step was to create the persona's empathy map to advance our understanding of users and really put myself in their shows as the design process progresses...

User Persona Empathy Map

3. Ideation
Once I synthesized all the data from the research by creating user persona, empathy maps. I had a clear idea of the user's needs, pains and goals, which us when I moved to the ideation phase, and started brainstorming...
Site Map
I started doing the site map as my main steps towards ideation. I did this through aggregating insights from the competitive analysis in combination with a card sorting exercise in order to ensure that the proposed information architecture aligns with what users would expect in terms of the taxonomy of an online clothing store

Mirror Site Map

User Flows
Next up as the stepping stone for the wireframing stage,I started thinking about the user flows within the new Mirror store. I analyzed how a new customer, a returning customer and a guest shopper would interact with the site differently, and designed their user flows accordingly...

Purchasing User Flows for Different Kind of Users

4. Prototype
I stepped into the wireframing stage and started brainstorming and sketching out ideas for the layout that would address all the findings from research, particularly how to take care of what I was referring to at this stage "the size dilemma"...
I quickly fleshed-out the wireframes digitally to kick-off the branding, UI and usability testing work...

Low-Fidelity Responsive Wireframes for Mirror

While I was still working out the wireframes, I started to flesh out the UI and the branding, as I prepared to conduct usability testing
Logo, Branding and the Style Tile
Along with the logo, the branding started taking shape as part of the website style tile. I was looking to induce warmth, youth and cheerfulness with the imagery and the color palette, which also took into consideration the aesthetics of the Mirror brand... 

Mirror Style Tile

While I was working on fleshing everything out in a mid-fidelity prototype, I put together the UI kit...

UI Kit for Mirror

Once I wrapped up the UI kit, I was able to quickly flesh out the design in the mid-fidelity prototype...
The prototype was designed to address the biggest pain the users had when it comes to online shopping....
The question was: how can we put the customer’s mind at ease when it comes to his/her size decision while shopping for clothing online?
What if we can simulate the actual shopping process by just trying out clothes with no strings attached? I proposed to design a solution which enables the user to order multiple sizes to be delivered to them in order to try out. The prototype was designed in order to test "The Size" feature...
At this stage, the mid-fidelity prototype and the new feature were ready for testing...
5. Validate
Usability Testing
The prototype was tested by 5 participants, which had a positive reaction towards the new size feature overall. The main takeaways from the findings were as follows:
- It was difficult for some users to locate the size feature within the product page. 
- Some users indicated that they needed further info in terms of how it would work, especially that it didn't entail extra charge. Others also thought that it should be featured on the homepage.
- Users tried to enlarge the product's image. 
- The sales section is not prominent enough. 
Next Steps
Based on the feedback from the user testing, given the time, I would continue to iterate on the design and make the following revisions (from highest to lowest priority):
1- Rename the link to the "Size Feature" so that that function is better understood by users. 
2- Make the "size feature" function standout more and include how does it work on the homepage. 
3- Add a "like" function for products so that users are able to create "favorites" list. 
4- Enlarge the "Free Shipping" note at the homepage. 
5- Make the sales section on the homepage more prominent. 
Back to Top