Mirror eCommerce Desktop Design

Project Overview
My Contributions
I was tasked with creating a modern & competitive responsive e-commerce website for Mirror that would have all the desired features for its users.

My Role: UX/UI Designer
Tools: Figma, Whimsical, OptimalSort, Miro, Maze
Duration: 6 weeks
Mirror is a successful brick-and-mortar retail chain that’s been in business since 1994, with 400 stores in over 32 countries. It carries budget-friendly clothing for men, women and children & targets customers who are looking for a bargain.

Mirror lacked online presence and had been running an outdated site with no ability to make e-commerce sales. Users were only shopping at Mirror's brick-and-mortar stores even though they preferred to shop online. As a result, they oftentimes shopped competitor e-commerce sites for sake of ease and convenience. Given the recent user preferences & industry shifts towards e-commerce, Mirror decided it was time for them to follow the lead.
Design Thinking Process
I followed the design thinking process, which took me through the various phases - from understanding & defining the problem at hand, to then ideating, prototyping, and testing. Here is what that looked like:
EMPATHIZE
Research Methodologies
- Competitive Analysis - assessed features and offerings presented on 3-5 similar e-commerce sites & mobile app stores.
- User Interviews - conducted 4 interviews inquiring about people’s shopping habits, preferences, as well as pains/frustrations.
Research Goals
- Understand customer expectations around the ultimate online shopping experience - must-have features & pain points around e-commerce.
- Understand user behavior when it comes to online apparel shopping in order to create a positive shopping experience that will entice repeat visits & purchases.
- Glean insights into the competitive landscape, as well as user preferences for a sound online shopping experience.
Competitive Analysis
I chose 3 direct & indirect competitors of Mirror to run a competitive analysis. Below is a summary of direct competitor findings.
User Interviews

I interviewed 4 people ages 35-70.

Key Insights
  • Easy navigation & organization
  • Quick and responsive customer service (24/7 support)
  • A search box & effective filters
  • Secure transactions
  • Recommendations or complementary product suggestions
  • Ample product reviews
  • Graphics are appealing and there are no pop-up ads
  • Ability to check out as a guest without the need to store your info or creating a login
  • Quick & efficient checkout process
  • Easy returns
  • Availability of deals or periodic sales
DEFINE
Defining Key Features - Roadmap
I created a feature roadmap based on my research findings (both primary and secondary) with the goal of prioritizing features that would matter most to the user.
Information Architecture - Sitemap
I conducted a Card Sort using the Open Sort technique. I used 6 participants 20-36 years of age. The card sort helped set up proper architecture and create a sitemap that made sense to the user.
Information Architecture - Task & User Flows
I wanted to really understand the steps a user goes through in order to make a purchase. I designed a task flow that broke down these steps for me. This, along with the user flow gave me a solid sense of the screens needed to be created in the wireframing process.

To further my understanding of the various paths a user can take as they go through the purchase process I have developed a userflow. This user flow broke down all the processes that take place as part of completing a purchase. My goal was to ensure that the user gets to a successful outcome by factoring his/her actions & decisions at various stages of the process.
IDEATE
Responsive Mid-Fi Wireframes
INTERACTION DESIGN
Mood Board

When thinking of Mirror as a brand I wanted it to invoke the feelings of safety and excitement. Bright, yet natural colors with soft, linen and denim-like textures bring on a sense of peace and everyday comfort.

Logo

What does Mirror look like? The idea was to design something simple, relatable, and memorable. Symmetry plays a crucial role here, with a reflection line (representing an actual mirror) breaking up the two halves of the brand name. A feminine touch was added with a flower in the upper-left hand corner.

PROTOTYPE
A Hi-Fi Prototype is born!
TEST
Usability Testing
Test Objectives
Test Findings
Helpful Insights
  • Overall navigation experience was regarded as smooth by all users, with 80% task completion rate and subsequent positive feedback.
  • Checkout process had a completion rate of 60%, which requires better understanding and more research.
  • Overall satisfaction levels with the shopping experience were high at 4.8/5 (1 = very difficult; 5 = very easy).
CONCLUSIONS

Based on usability test findings I made the decision to prioritize the following product page revisions:

  • Change 'Quick Checkout' to 'Buy Now' which will be more clear of an action item to the user.
  • Improved bag summary pop-up/interaction upon adding an item. Added a summary of all items added to cart allowing the user to either go to cart or continue shopping.
  • Item color is preset once you select an item on product page.

There was a lot to tackle in this project and every single part of it was a learning experience. Research & testing focused on a myriad of user issues & spanned across various processes & areas of concern. To me they represented some of the more interesting parts of the process that really put me in touch with the user and provided a host of valuable and insightful information that directly influenced the end product.

Wireframing, prototyping and all the UI “in-betweens” were exciting in their own right because they really allowed me to express my ideas and learnings from user interactions and translate them over to actual designs.

Powered by Webflow