→ Clothing e-commerce website
→ Nov 2017 - Jan 2018
→ UX Researcher: Kyle Soriano
→ UX Designer: Kyle Soriano
→ UI Designer: Kyle Soriano
Founded in 1994, Mirror is a global chain clothing store aimed to provide customers with quality, yet affordable clothing in various styles for all different types of people and body types. In attempt to keep up with the times and expand their business, Mirror is looking to create their first e-commerce website.
Online shopping has become extremely popular over the past decade, but Mirror hasn’t established an e-commerce website.
Customers are also demanding a premium online shopping experience that feels trendy and modern.
To create Mirror’s first website,and to update their logo, while still listening to their customers needs and wants, and abiding to their goals as a business and aestethic of being Fresh, Clean, Clear, Neutral, and Modern .
Research
→ Competitive Analysis
→ Interviews
Define
→ Persona
→ Experience Map
→ Site Map
→ User Flow
Design
→ Sketches
→ Lofi Wireframes
→ Hifi Mockups
→ Design System
Test
→ Prototype
→ Results
Project End
→ Learnings
→ Next Steps
To understand how other clothing companies build out their website user experience, I researched three popular brands: H&M, Old Navy, and Uniqlo. All three websites have very different homepages, category pages, and product pages, and below are some key differences:
→ Good: Beautiful imagery, easy navigation
→ Good: Big images, simple product view
→ Bad: Confusing and duplicate homepages
→ Good: Large images, exciting homepage
→ Good: Clean, organized products
→ Good: Plenty of white space and easy-to-click buttons
→ Bad: Text heavy, too much bold text
→ Bad: Doesn’t look consistent, looks off
→ Bad: Great, big images, not enough white space
I conducted interviews under Mirror's target audience, including both women and men with ages ranging from 21-58. Above images include: their preferences, common brands mentioned in interviews, and their positives and negatives of shopping online.
Interviewees mentioned that they love the convenience of free and fast delivery when it comes to online shopping, but in terms of clothes, they prefer to try them on in stores.
Based on my research findings, I created a persona, Darell, who prefers to shop in stores because he loves trying on clothes to make sure they fit. However, he loves the convenience of free and fast delivery and hopes his clothes can be delivered that way.
After creating Darell, I created an experience map to understand what Darell would be doing, thinking, feeling, seeing if he were to shop at Uniqlo. I chose Uniqlo since I felt like it had the worst user experience compared to H&M and Old Navy. Creating this experience map helped me put myself in Jomar’s shoes and understand the biggest pain points he would have going through Uniqlo’s website.
The weakest point in Uniqlo’s user experience was their homepage. He wouldn’t be sure what to look at first because it’s super cluttered. There’s lots of red, so he wouldn’t know what to look at because so many things are calling his attention. When he would scroll down, there’s even more disorganization and no clear hierarchy. It feels like everything is just merged together without much thought of how the user would understand it.
I decided to make the homepage the main focus of this project by creating hierarchy, adding lots of whitespace for elements to breathe, and adding in different type to make content easily digestible.
Based on my experience map and secondary research, I created a site map to organize site's information architecture, and included the clothing categories that were also based on the similar groupings in the card sorting activity.
Based on the site map, I built the user flow that Mirror’s customers would take when first entering the Mirror homepage all the way to finding the page with the right product that they’re looking for.
After creating user flow, I sketched out my initial ideas for Mirror using inspiration from my competitive analysis. Because my attention would be primarily focused on the homepage (refer to experience map), I included my homepage sketches above.
Next, I used my drawings to create low-fidelity wireframes on Sketch. I showed these wireframes to a few friends to make sure the flows made sense visually before going into high-fidelity wireframes.
Combining my UI Kit and my low-fidelity wireframes, I created high-fidelity wireframes for the user flow of searching and adding an item to cart.
I created an interactive prototype using Invision.
I interviewed 4 people at a San Francisco bar to see what their thoughts were on my initial designs for Mirror, and tracked their responses using Trello by categorizing their opinions by page and by positive or opportunity.
Hero Image
Exclusive Discounts
Balance Women & Men
After analyzing all of my test results, I redesigned my prototype, mainly focusing on these main concerns:
How to design a clothing e-commerce store
How to create a style guide (I really enjoyed doing this!)
Women & Men: How to test others and get concrete and valuable feedback
Create a women’s clothing section and user flow and test how women would utilize Mirror.
Design a checkout and sign up/log in user experience
Get more feedback on the entire shopping experience to then create a mobile version.
