Mirror

→ Clothing e-commerce website
→ Nov 2017 - Jan 2018

→ UX Researcher: Kyle Soriano
→ UX Designer: Kyle Soriano
→ UI Designer: Kyle Soriano

Overview

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.

Task

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
.

Process

1

Research

→ Competitive Analysis
→ Interviews

2

Define

→ Persona
→ Experience Map
→ Site Map
→ User Flow

3

Design

→ Sketches
→ Lofi Wireframes
→ Hifi Mockups
→ Design System

4

Test

→ Prototype
→ Results

5

Project End

→ Learnings
→ Next Steps

1

Research

Competitive Analysis

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:

H&M

Good: Beautiful imagery, easy navigation
Good: Big images, simple product view
Bad: Confusing and duplicate homepages

Old Navy

Good: Large images, exciting homepage
Good: Clean, organized products
Good: Plenty of white space and easy-to-click buttons

Uniqlo

Bad: Text heavy, too much bold text
Bad: Doesn’t look consistent, looks off
Bad: Great, big images, not enough white space

Interviews

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.

Biggest Takeaway

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.

2

Define

Persona

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.

Experience Map

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.

Site Map

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.

User Flow

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.

3

Design

Sketches

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.

Lofi Wireframes

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.

Hifi Mockups

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.

Design System

4

Test

1st Prototype

I created an interactive prototype using Invision.

Interviews

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.

Positives

  • "Love the logo!”
  • "Meets adjectives 'Fresh, Clean, Clear, Modern'."
  • "Love the clean, modern design. Visually appealing."
  • "Simple, on brand, what I imagined the site to look like."

Opportunties

Hero Image

  • "Looks like there are only sales for women."
  • "Is the primary customer women?"
  • "CTA Button... Where are you going? Not just 50%. Change wording."
  • "Show that there’s more to scroll."

Exclusive Discounts

  • "Get more specific about the discount and when users would get it."
  • "Less likely to sign up if there isn’t a specific incentive."

Balance Women & Men

  • "New arrivals should have the button “Shop Women” and “Shop Men” on equal lines."
  • "New arrivals should have clothes clearly shown and not bunched together."
5

Project End

Final Iterations

After analyzing all of my test results, I redesigned my prototype, mainly focusing on these main concerns:

  • Hero Image: Show images and faces of both women and men
  • Exclusive Discounts: Reword section to entice users to sign up
  • Women & Men: Show a balance between both since the 1st prototype felt focused on women

Learnings

1

How to design a clothing e-commerce store

2

How to create a style guide (I really enjoyed doing this!)

3

Women & Men: How to test others and get concrete and valuable feedback

Next Steps

1

Create a women’s clothing section and user flow and test how women would utilize Mirror.

2

Design a checkout and sign up/log in user experience

3

Get more feedback on the entire shopping experience to then create a mobile version.