top of page
Copy of test_proto.gif
Green Succulent Plant Social Media Post
Group 15 (1).png
A responsive e-commerce website for a clothing company focused on creating a brand that celebrates every body type.
CLIENT​
​
Client brief provided by Designlab​ UX Academy
MY ROLE​
​
User Research
Branding
UX/UI  Design​
Prototype Testing
Opening in 1994, Mirror is a fashion company hoping to make stylish clothing that is affordable and accessible to people of all shapes, colors, and sizes.​
 
With much success growing the company to 400 stores in 32 countries, Mirror is ready to take things to the next level with the launch of their first online website and redesign of their logo.
DURATION​
​
4 weeks
Group 16 (1).png
THE CHALLENGE​
​
While Mirror is well-established with its physical store locations, their customer reach online is far behind that of their competitors. For this reason, Mirror wants to create an engaging site that is accessible on all platforms, offers helpful features, and creates an easy and enjoyable experience for online shoppers. 
PROCESS​
​
Copy%20of%20Copy%20of%20Case%20Study%20(

01 RESEARCH

GOALS​
​
  • Learn what features are utilized by users to accomplish their shopping goals​
  • Discover what features users think would enhance their shopping experience
  • Identify pain points of users' online shopping experiences
  • Determine what websites/apps users currently shop from
METHODS​
​
  • Competitive Analysis​
  • Project Goals
  • Empathy Research
  • Customer Personas
COMPETITIVE ANALYSIS​
​
I began my research by identifying Mirror's closest competitors and familiarizing myself with their websites and apps. Observing these sites from a user perspective, I paid close attention to the different features offered, design patterns, overall usability, and brand messages. 
Copy%20of%20Copy%20of%20Case%20Study%20(
PROVISIONAL PERSONAS​
​
I began my research by identifying Mirror's closest competitors and familiarizing myself with their websites and apps. Observing these sites from a user perspective, I paid close attention to the different features offered, design patterns, overall usability, and brand messages. 
Copy of Copy of Case Study (4).png
USER INTERVIEWS​
​
In order to get a better understanding what customers value when shopping for clothing online, I conducted 4 user interviews via Zoom. The participants were made up of 2 males and 2 females aged between 22 and 38 years old.​
See a summary of the findings below:
​
  • All participants desired convenience and simplicity when it came to online shopping, expressing frustrations with websites that were "cluttered" or "too busy" as they were difficult to navigate
  • All participants prioritized the ability to compare items and prices 
  • Half of the participants mentioned enjoying websites that recommended items to them
  • Half of the participants explained how ordering clothing in their correct size is a common struggle
  • 3/4 participants valued shopping from companies who were socially or environmentally good
  • 3/4 participants mentioned wishing online returns were easier to deal with
NEEDS​
​
  • Easy navigation of site and minimal design
  • Effective search and filters
  • Resources for finding their size
  • Customer reviews
PAIN POINTS​
​
  • Variance in sizes between companies 
  • Lack of variety in photos of items
  • Sites that are poorly organized or filled with ads
DESIRES​
​
  • Return policies with free shipping and 'try-at-home' options
  • Models of various sizes pictured
  • Free & fast shipping 
  • Style inspiration
  • Affordable clothing that makes an impact socially or sustainably

02 DEFINE

USER PERSONA​
​
Based on the insights gathered during my empathy research, I created a user persona that captured the needs, desires, and pain points shared during my interviews.
Copy of Copy of Case Study (10) 1.png
CARD SORTING​
​
I conducted a card sorting study in order to observe how users cognitively group specific products together. For this study, I used the OptimalSort tool. See the cards used and a summary of the findings below:​​
Participant Centric Analysis
​​
  • Suggested categories based on PCA
    • Accessories​
    • Bottoms
    • Dresses
    • Tops
    • Outerwear
Insights​
​
  • Suggested Participants tended to group items by their type rather than by gender, occasion, or season
  • Answers may have been different if there was a higher volume and variety of card items
  • Pictures may have made a difference in answers as some participants were unfamiliar with a few item titles
Copy of Copy of Case Study (11).png
SITEMAP​
​
Based on the research completed up to this point, I created a sitemap to organize the site's content.
Group 1 (15).png
TASK FLOW​
​
Based on my user persona i created a task flow reflecting the flow Sienna would perform to purchase a dress.
Mirror Task Flow@2x.png
USER FLOW​
​
 I created a user flow the various flows Sienna may take when deciding on a dress to purchase.
untitled@2x (2).png
PROJECT GOALS​
​
I took time to compare and contrast the different business and user goals as well as the technical constraints that may occur during this project. These notes allowed me to determine effective goals for this project and would serve as a helpful reminder when designing the product.
Copy of Copy of Case Study (5).png

03 DESIGN

SKETCHING IDEATIONS​
​
Before working on my wireframes in Figma, I sketched out different layout ideas for the homepage and item page.
21 (1).png
22.png
LOW FIDELITY WIREFRAMES​
​
I created low fidelity wireframes that displayed the responsive screens of the homepage, search results page, item page, and check out page. 
​
For the homepage, I wanted to ensure Mirror was viewed as professional, so I was sure to include the following:
  • A top navigation bar listing the various categories, a search bar, and shopping bag
  • A hero image featuring a clear call-to-action
  • Suggested clothing items (Trending Now and Style Quiz)
  • Benefits of shopping with Mirror
  • Organized categories
  • Brand credibility (Mirror on You)
​
Group 18 (1).png
Group 33 (3).png
BRANDING
​
When branding Mirror, I wanted to make sure every element pointed back to the company's mission to promote authenticity, confidence, and diversity. I carefully designed the logo to feature a Mirror symbol and a playful, yet professional typeface to capture Mirror's credibility as an established brand as well as paying homage to their encouragement to users to "Celebrate their Reflection." 
​
While most of the site was designed more minimally for an easier user experience, I intentionally added fun pops of color and abstract elements throughout the site to distinguish Mirror from other cookie-cutter brand websites. 
​
The images used throughout the site feature models of diverse body shapes, ages, ethnicities, and more. This was intentionally done in order to communicate to users Mirror's commitment to celebrating REAL people. 
​
Group 34 (5).png
HIGH FIDELITY MOCKUPS
​
I brought my wireframes and branding to life by creating high fidelity mockups of the Mirror homepage and various other pages. During this process, I ended up reorganizing the hierarchy of my original low fidelity wireframe designs based on feedback from my mentor and other peers. 
​
Group 40.png
Group 41.png
Frame 14.png

04 TEST

HIGH FIDELITY PROTOTYPE
​
I created a high fidelity prototype in Figma to test the usability of the current product. The usability test consisted of 5 participants aged between 21 and 40 years old and took place via Zoom.
​
Objectives
  • Test the ease of the site's usability from searching for items to making a purchase
  • Test the necessity and effectiveness of sizing features for items
  • Gather first impressions of the site (features that are enjoyable and initial pain points)
​
SUMMARY OF FINDINGS
​

  • Users found the process of finding an item and adding it to their cart simple and straightforward

    • Compared it to the ease of most e-commerce sites

  • Picking a Size

    • All Users referred to model photos

    • 4/5 Users read size details

    • 3/5 Users referred to the size chart

    • 3/5 Users referred to customer photos

  • All Users automatically checked the footer for returns

​
Group 16 (2).png
AFFINITY MAP
​

Participants comments were divided by those related to the navigation of the prototype and general pieces of feedback. After analyzing the comments, wins from the study were listed as well as further areas to research.

​
Copy of Copy of Case Study (13) 1.png

05 TAKEAWAYS

This project allowed me to learn the power of a simple yet effective design. Hearing from and empathizing with research participants as they shared their frustrations with other brand websites allowed me to intentionally design a product that was minimal in design but had all the bells and whistles of embedded in subtle design elements, helpful features, and branding choices.​
​
I found that user research was my most valuable asset as it brought up unexpected areas to explore as I was planning my product design. Every user study helped me humanize my Mirror product even more. 
NEXT STEPS
​​

  • Implement priority iterations: 

    • Add size guide under the size dropdown for easier access​

    • Update button on item page to say "Add to Bag" instead of "Cart"

    • Consider areas to add additional style elements in places other than the homepage

  • Areas to consider for the future:

    • Design and test different options for more simplified footer designs​

    • Plan usability tests for search bar/filter and True Fit feature testing

Copy of Copy of Case Study (6).png
bottom of page