Project overview
Mirror is looking to enter back into the market as a revitalized clothing brand to regain it's market exposure in the clothing space. The goal of this project is to redesign Mirror's website into something that is modern, cool, and effective to help expand it's reach across the globe as the go to clothing brand. Now, this is where I came in. Tasked with turning around Mirror's online presence and brand, I began with design research and navigated the design process all the way to hi-fidelity prototypes. I managed the entire project through the HCD process (and of course under the watchful eye of my mentor, Jonathan). This case study was where I really dived deep and learned a great deal about the UX process and it's execution.
I acted as the User Researcher, Ux Designer and UI Designer for Mirror's website redesign.
My Design Process
I followed human centered design and lean UX design thinking process to make sure that my design decisions were supported through user research and feedback.

Research

In order to create an online shopping experience for Mirror that's simple, enjoyable and lives up to the expectations of users and their needs, I needed to better understand the potential users of the site. My first step was to develop a research plan and understand what my research goals were. These are the questions my research sought to answer. 

Research Questions:
What features do customers enjoy or appreciate when it comes to shopping for clothes online?
What makes shopping online easy? What makes it hard?
What experiences or processes do people like about shopping in-person?
What are the benefits of buying clothes online as compared to buying clothes in person?
What are the types of users that are most likely to shop online for their clothing needs? 



Research Plan
Secondary Research
- 96% of Americans shop online
- 58% of people believe shipping costs are the biggest hassle to them buying things online
- 46% of people cite not being able to feel the product they're looking for as a major hindrance
- 67% of Millennials and 56% of Gen X-ers prefer to shop online vs. in-store.
Competitive Analysis
I executed a competitive analysis, comparing Mirror's top 5 competitors against one another. Each competitor’s product feature was analyzed and from their I assessed strengths/weaknesses associated with each brand. In this exercise I began to architect provisional personas.
Interview Guide
Research Findings
Pain Points
- 5 out of 7 users reported that paying for shipping is a hassle
- 4 out of 7 participants reported clothes didn’t have enough pictures and videos about them
- 3 out of 7 participants reported having negative experiences with returns
- A participant stated that clothing models weren’t helpful in determining the fit of clothes. As some customers have different body shapes

Important things to customers
- 6 out of 7 participants stated that customer reviews and media (such as photos and videos) played an important role in their purchases.
- 5 out of 7 users said price was more important than brand name
- 5 out of 7 reported that paying for shipping is a major concern
- 4 out of 7 participants stated that they liked clothing websites that were straightforward, customer-centric, fast, or efficient

Recommendations
- Focus on a desktop experience. 7 out of 7 participants used a laptop to purchase clothes. The website should focus on a desktop first approach and mobile should augment that.
- More pictures. 6 out 7 participants reported not knowing how clothes would look on them. Adding images from multiple angles, and providing images of models with different body types will better equip people to make a choice.
- Explore a way to better categorize clothing. Current filter options are inadequate. Adding additional filter options and building an intuitive process is key.

Persona, Empathy Map, and Storyboard
Based on the data collected in the research phase, an empathy map, user persona, and storyboard were created. These exercises helped me define in detail the type of person who might use my product and what their thoughts, pains, gains, and needs were. 
Mirror UI Requirements
User Task- Samantha arrives at the homepage and decides to buy a sweater.

Pages to Design
- Homepage
- Category page
- Search results
- Product detail page
- Login page
- Shopping cart
- Checkout
- Order confirmation page

High Level Requirements- A responsive website that allows users to browse, search, and buy clothing.

Detailed Requirements
Homepage
- Clear and simple navigation that users can go through to reach an item
- Autocomplete search feature that can helps users find exactly what they are looking for
- A line reminding users about shipping and returns
- Shopping cart icon
- Sign in feature
- Visually appealing images and content
- Footer menu with additional information like: contact us, about us, FAQs, social media links, helpline, sign in, sign up.

Category page
- Category names is clearly displayed
- Product cards organized in a grid format
- Product info (name, price, color, available size) is clearly listed
- Filter options like color, size, style, and fit that help users narrow down the types of shirts they might want.
- A sort by option which can order the available clothing items by relevance, price, and
popularity.
- Option on card to add product to wish list
- Number of product items available listed above the cards
- The page is endless and continues loading new cards as the user scrolls down.

Search results
- Clear use of search term in the breadcrumbs so users know what page they are on Display number of search results
- A sort by option which can order the available clothing items by relevance, price, and
popularity.
- Filter options like gender, clothing type, color, size, style, and fit that help users narrow down the types of shirts they might want.

Product detail page
- Clear name of product in the breadcrumbs
- Name of the product is clearly displayed
- Multiple images of the product with and without a model
- Product name, available colors, available sizes, price, and add to cart option are included
- Sizing chart is clearly visible on the web page
- Related products listed in a carousel
- Detailed information about reviews, shipping/return policy

Cart
- Link to login page
- Checkout as guest link
- Items clearly listed with total cost
- Option to add or delete items
- Save to wish list option
- Login Page
- Login with email addresses and password
- Create account with email, name, and password
- Button to checkout

Checkout
- Clear progress bar for each step of the checkout process
- Order summary showing all the details about the purchase
- Area to enter shipping and billing information
- Place to enter payment options (credit card)
- Text showing estimated date of delivery
- Button to place order and go to order confirmation page
Information Architecture & Interaction Design
After executing the different elements of my research plan I started to get a better understanding of the pains, needs, and goals of Mirror's user base. Through these exercises I was able to empathize with Mirror's customers, understand Mirror's own needs, and use that knowledge to move along the design process.

The next step in this process involved defining the websites information architecture. I started this process by performing a card sort with potential users, putting together a list of UI requirements, building a site map, creating a task flow, and establishing a user flow. The task flow was especially important because it gave me a basis for how a user would perform a task on the website and achieve their goal (the designs you see later on are based in part on this task flow).

Sitemap
Mirror User Flow and Task Flow
Wireframes
Based on the user research findings and UI requirements, a selection of wireframes were built out. These wireframes were built in a responsive framework, including a version for desktop, tablet and mobile. Annotated Wireframes were additionally created to ensure proper communication of various UI features.
Once a framework was set, a selection of additional mobile wireframes were mocked up. The mobile wireframe set was used for user testing.
UI Design
Initially through sketching I established the broad outlines of how the website would look then I transition those into low fidelity wireframes. After developing a clickable prototype and receiving feedback I set about transforming what I had into high fidelity mockups. Through a process of visual and UI iterations I transformed my designs into high fidelity mock-ups of the website and it's capabilities. 
Style Tile
Low to high fidelity prototypes
Final High-fidelity Wireframes (prior to usability testing)
Iteration and Implementation
Created a clickable prototype using the prototyping tool Invision, built additional screens to make the prototype functional. I performed usability tests to ensure my prototype 'made sense' and actually benefited the user in achieving their goals. Took the subsequent feedback and implemented design changes.
Prototype Screens
Affinity Map
The results from the usability tests were compiled into an affinity map which lays a roadmap for what went well and what changes need to be implemented in the design. The Affinity map states a series of design recommendations/"improvements" which are listed below.
Final designs
Handoff
After completing final designs, I put them through Zeplin so UI developers could take my designs and this information to start creating it. 
Next Steps
Design is fluid and constant. The next steps for this project involve rolling out additional screens for all elements of Mirror instead of the wireframes and prototypes for the buying process. With each set of designs will be an additional effort to continue testing and iterating on those designs. 

You may also like

Back to Top