Mirror

User Interviews

Empathy Map

After gathering market data, I was ready to examine more qualitative data through 1:1 user interviews. These interviews were conducted to gain insight into consumers’ experiences and further empathize with their needs and frustrations. The questions asked were formulated to allow the interviewee to share their experiences with shopping in-store and online. Through these findings, I was able to cover the key goals, needs, motivations, and frustrations of users in the target demographic. 

• 5 participants

• 4 female, 1 male

• Ages 30 to 45 yrs

• Frequent online shoppers

• 4 smartphone shoppers, 1 desktop shopper

After transcribing interview notes and grouping them into similar key observations, I created an empathy map to sum up my learning from interactions during the user interviews and further synthesize the findings. User insights and needs were gathered from the most common themes.  

Insights

1. Customers are less likely to be dissatisfied with a detailed product description.

2. Unknown fit causes hesitation to purchase online.

3. Customers seek out value pricing above all else.

Needs

1. Customers need to have a solid knowledge base of product

2. Customers need to feel reassured of their garments’ sizing

3. Customers need to feel like they have gotten the best value

User Persona

Through my research synthesis, I created a user persona that represents the demographic I am designing for, to define and empathize with my target audience and to more accurately assess my design development.

Storyboard

From the perspective of my user persona and her frustrations, I created a storyboard to highlight an online shopping pain point scenario. I created a storyline that I thought encompassed a problem moment and went through how Mirror solved that for her.

Project Goals

I created a Venn diagram of the project goals to get a clear overview of the business, user, and shared goals. Then I inferred the shared goals by looking at both goal sets to determine how they could benefit one another. This guided my decision-making when designing the product features. 

Feature Roadmap

With the project goals in mind, I created a feature roadmap to guide me in identifying and prioritizing key elements that should be included in the product’s design.  After considering the business and user goals, I referenced the market research and observations stated by participants of the user interviews. The features were prioritized according to what would benefit the goals first.  

Sitemap

Once features were defined, I created a sitemap to help me visualize the organization and labeling of content. As well as examining their structure and navigation, this will give me an overview of the website and how the content will fit together for optimal usability. 

Task & User Flows

I created a task flow to identify the main flow that a user will follow to complete the task of purchasing an item while considering my personas needs and how she would navigate the site. This flow helped me uncover obstacles in the way of users completing their goals. I then created a user flow to identify the different paths a user can take through the product. Creating several scenarios for different user types helped me further understand the users’ needs and the experience I want them to have when interacting with the site. 

Wireframe Sketches

Different variations of the desktop homepage were sketched to start the wireframing and interaction design process. While referencing existing design patterns and the product requirements, sketching these helped me brainstorm and ideate on the organization and layout possibilities that would best meet the user’s goals and needs.

Mid-Fidelity Wireframes

I designed mid-fidelity wireframes to plan the layout, content, and elements of the pages of the site. Creating the layout and structure of low-mid fidelity wireframes allowed me to focus on user experience and functionality only. I constructed responsive wireframe pages to test the adaptability and responsiveness of my designs.

Branding

I went through the process of creating a logo to establish a clear and recognizable brand identity in the market. I created a style guide to hone in on the brand’s identity through the main UI elements. It provides guidelines for the way Mirror’s brand should be presented from both a visual and language perspective.

High-Fidelity Designs

I incorporated the UI elements (based on the style guide) into the existing mid-fidelity wireframes and uploaded them into InVision to create a high-fidelity prototype that would provide a realistic representation of the website for user testing.

Usability Testing

I conducted in-person usability testing to understand how real users interact with our website. I observed the participants interacting with the desktop prototype while they completed simple usability tasks. Testing helped me know whether the site was easy to navigate and that tasks could be completed with ease.

Test Objectives

• Observe users’ ease of use when navigating through the website

• Test the effectiveness of the pages’ layout and design in order for the user to complete the desired task

• Record and document users’ comments about their experience using the site

Affinity Map

To help sort and prioritize user testing feedback, I created an affinity map by grouping similarly themed observations and quotes. From these groupings, I established insights, which fostered recommended solutions for the occurring pain points.

Insights

1. Users can’t tell if an item has been added to the shopping bag

2. Users don’t notice that there is a separate button to pay with Paypal

3. Users don’t know to select the shipment and payment option checkboxes

4. The labeling of the main navigation category is confusing for some users

5. Users don’t notice the reviews link at the top of the page

Priority Revisions

Based on the testing insights, I concluded that three of the recommendations were necessary to implement into the prototype for further iteration. Revisions were made to the shopping bag icon, the layout of the checkout page, and the positioning of the PayPal instruction notification.

UI Kit

During the high-fidelity design process, I gathered all UI elements to implement into a UI kit that will create a cohesive and uniform guide for designers and multiple contributors.

Reflection

Next Steps

By going through the design process of building Mirror’s e-commerce site, I learned to never underestimate the importance of asking the right questions (during the research phase and throughout) and digging deep when interviewing. That is something I could have done better during user interviews and testing, to help aid in clearly validating or disproving my assumptions. The power of ‘Why?’ is real. I also had to remind myself that reinventing the wheel is not necessary and design patterns exist for a reason. Usability and simplicity are more important than creativity and inventiveness.

Given more time, I would prototype the remaining pages of the site (including responsive screens) such as account, navigation categories, and footer links, as well as the filter and sort by features. Then test the further iterated prototype to validate the recommendation solutions and further assumptions about the main navigation. Continue to update UI kit as prototype expands then design handoff to developers.