UX/UI, User Research, branding

Mirror Clothing:                Website Design + Rebranding 

 
 

Overview

The Client

Mirror is a brick and mortar clothing retailer with over 400 stores in 32 countries. Mirror provides a wide array of fashionable clothing for men, women, and children of all ages. Mirror recognized the need for expansion into the digital space and wanted to tap into its online revenue potential.

The Challenge

Design a responsive e-commerce platform that will allow Mirror to increase revenue, attract new customers, and sell excess inventory. Give the company a face lift by designing a new logo that captures the essence of the brand. 

Outcome

A usable and aesthetically appealing online platform with strong brand identity.

Length of Project

4 weeks

Role:

Lead UX Designer 

 
 
 

Research

 

During the research phase, I sought to understand the current state of the e-commerce retail landscape. My intention for the research phase was to uncover the needs and frustrations of the target user to better understand how to appeal to them. 

 

Research Goals:

  1. Define people's common behaviors when shopping in brick and mortar stores.

  2. Define people's common behaviors when shopping online.

  3. Determine what people like and dislike about both shopping experiences.

 

Secondary Research

First, I conducted secondary research to understand user demographics, developments, opportunities, and challenges in the e-commerce retail industry. collected information from articles and case studies to identify industry standards and user expectations. 

 

Primary Research - Competitive Analysis

I analyzed some of Mirror's competitors in the e-commerce retail industry.  I uncovered the strengths and weaknesses of Mirror's direct competitors H&M, Urban Outfitters, and Topshop. In addition, I performed a competitive analysis on Asos and Amazon which are indirect competitors of Mirror.

 
 

Image: Competitive Analysis Findings

 
 

My competitive analysis produced the following insights:

  • Social Media Integration: More users want the ability to shop the looks they see worn by their favorite influencers. This not only helps the reputation of the brand, but it also engages the customer.

  • Product Assistance: Customers expect website features that will help them make the right purchase the first time. Successful websites are using sizing helpers that predict the best size for the customer.

  • Trend Pop Up Shops: Most of the competitors incorporate clothing themes and collections into their online experience to help customers quickly and easily acheive the look they want.

  • Painless Checkout: Providing 1-step checkout options has been a major asset in the e-commerce industry. Online retailers are starting to incorporate payment plan options such as Afterpay. This makes fashion accessible and affordable in a new way.

 

Primary Research - Interviews

In order to design a website with a great user experience, I had to first identify the needs of the target audience. To better understand the perspective of users, I had speak with them directly. I sat down with two women and one man between 25 and 62 years old to ask them about their shopping experiences and habits.

Research Assumptions:

  • Users prefer online shopping to in-store shopping

  • User prefer a large selection of clothing and accessory styles

  • Price and quality are the most important considerations for users.

 

After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic.

Image: Empathy Map constructed from interview responses

Image: Empathy Map constructed from interview responses

Image: Clustering responses from interviews

Clustering interview responses allowed me to discover trends and patterns from which insights could be constructed. Through this process I identified several user needs:

  • Customer Service: Users need friendly helpful staff in stores. Online, customer service options should be accessible to the user throughout the browsing and checkout process.

  • Size Consistency: Users have trouble finding clothes that fit their body types. Clothing stores need to cater to a larger audience.

  • Seamless Shipping and Returns: Due to the high risk of ordering the wrong size online, participants want to know that the return process will be straightforward.

  • Time-Efficiency: Users all expressed a desire for their shopping environment to be organized and stress-free. They want to easily find the item they want.

 

Persona and Storyboard Creation

Next, I used all of the qualitative data i gathered during the research process to create Lauren, my user persona. Lauren is an an ambitious 20-something year old professional in need of stylish well-made clothes at an affordable price.

Image: User Persona

 

I then created a storyboard depicting Lauren's struggle to look the part at work on a budget and the solution that Mirror's online site provides.

 
 

Image: Storyboard

 
 

Define & Ideate

 

 

Information Architecture

Now that I had empathized with target users and identified their needs, I needed to define the solution. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common goals, I could decide what product features were necessary for the prototype.

Stakeholder Goals Venn Diagram

 

I created a high-level list of site features to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.

To view my Product Feature Matrix click here.

Next, I conducted an open card sort to get a sense of how users categorize clothing, shoes, and accessories. I asked them to arrange 30 clothing items into categories of their choosing to get a sense for how users talk and think about clothing.

UX Academy Mirror Card Sort.png

Findings:

I made the assumption that the standard e-commerce navigation system needed to be changed, however participants feedback revealed they were in fact happy with it. While there was confusion about where to place miscellaneous items, the categories used in the industry seem to be efficient and understandable for the user.

Based on response trends, I created a site map which laid out the structure and organization of the content on the site.

UX Academy Mirror Sitemap.png
 
 

Design

 

 

Test

 
 
 

Next Steps

 
 

Interaction Design

I completed a task flow and user flow to imagine the ways a user might navigate through the site to achieve their goals. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user. 

Image: Task flow for Checkout process

 

 Visual Design - Branding

At this point in the process, i began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the Mirror brand: Fresh, modern, quality, affordable.

With these adjectives in mind, I created mood boards on Pinterest where I collected pins of typography, logos, and color schemes that aligned with my vision for Mirror.

Image: Mood Board

 

I began sketching out ideas for a logo, aided by the inspiration I found on Pinterest. I wanted to play on the idea of symmetry and reflections.I settled on a classic monogram logo with a modern flair. As I explored different variations of the letter M, I hoped to come up with a logo that was memorable and unique but would not alienate users. 

The result was two very different versions of an M- one that was modern, geometric, and abstract and another which was a modern take on a traditional serif letter. After revisiting the brand adjectives and reflecting on aesthetics , I decided to move forward with the former.

Image: Final logo for Mirror

The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow. 

Image: Style Guide

 

Low-Fidelity Wireframes

I began the process of wireframing with sketches of variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasbile way. The sketch I chose served as a guide for my digital wireframes.

Mid-Fidelity Wireframes

I created a low-fidelity prototype of the desktop site in Sketch. I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design.  

At this point in the design process, I needed to think about how I wanted the site to look on different screen sizes. It was essential that the website would present as well on tablet and mobile devices as it did in desktop size. I created responsive wireframes for Mirror's key pages and began to flesh them out.

 

High Fidelity Prototypes

After several iterations of my low-fidelity prototype, I fleshed out the details of each page with images, typography, navigation menus, etc.

Image: High fidelity wireframes

 

I asked 5 participants to test out the prototype's usability. The participant pool was comprised of women between the ages of 18 and 65 who shop at least once per month. Three participants met me in person to complete the usability test, while two others did so remotely via skype. The participants were given three different scenarios, each with a task to complete. 

Tasks:

  1. Find a pair of shoes and save them. Then, go view your saved items list.

  2. Find a pair of jeans and navigate to the customer reviews section of the product page.

  3. Find a blue dress under $50, and add it to your cart.

 

To view the full Usability Testing Plan, click here.

 

Affinity Mapping

I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way of determine what needed to be changed immediately and what could be saved for later.

UX Academy Affinity Map Mirror.png

Findings:

Overall, users navigated through the website with ease. Confusion most often stemmed from the fact that the prototype is not fully functional. Participants prefer to use a combination of the filters and sorting options when looking for a specific item, and they value having categories for occasions. Participants do not always use the filters in the way intended; perceptions about price, quality, and value influence how they search for an item.

Recommendations:

  1. Disable the call to action button until the user has selected both a size and color on the item product page.

  2. Make header more visible on “Saved Items” page. Add breadcrumb navigation and other elements that make it distinct from the search page.

  3. Increase the contrast of text and background in the secondary navigation dropdown menu (ex: for accessories keep minimum price at “less than $25”, for clothing “less than $50,” etc.)

  4. Change the price filters to reflect the product type.

 

Click here to view the prototype on InVision.

screencapture-projects-invisionapp-d-main-2018-07-26-20_30_32.png
 

While the feedback was mostly positive from participants, the prototype is far from perfect. I plan on fleshing out the rest of the pages of the prototype, especially the shopping cart and filter features. I plan to continue the iterative cycle of testing and updating the prototype. I will use Zeplin to hand off the design to  the developer team when I have made all improvements to the prototype.