MIRROR
Responsive eCommerce website for a clothing brand
BRIEF
Mirror, started back in 1994, believes in making good quality but affordable clothing accessible to everyone. They’re a brick-and-mortar business with a global chain of 400 stores around the world that provide different styles of clothing for everyone.
To keep up with the age of digital transformation, they decided to invest in an online store.
Why?
Huge opportunity for online sales
Customers demand an online shopping option
Getting rid of the remaining inventory in their warehouses
GOALS AND OBJECTIVES
Design a logo for the company that is modern and neutral enough to attract all types of people and styles.
Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style, and others.
ROLE UX Research, Product Design, UX/UI Design
CLIENT Mirror
TOOLS Sketch | InVision | Zeplin
TIMELINE 4 Weeks
How might we create an online presence with a fresh brand identity and an online store for Mirror while meeting both, the business and the user's goals?
EMPATHIZE
Research Goals
Research Methodology
Research Finding
Insights for Innovation
Research Analysis
DEFINE
User and Business Goals
Product Dev - Feature Roadmap
Card Sorting
Sitemap
User and Task Flows
IDEATE
Low and Mid - Fidelity Wireframes
Branding
Responsive Designs
Design Systems
.png)
PROTOTYPE
High - Fidelity Wireframes
Prototyping in InVision
TEST
Usability Testing
Affinity Mapping
Handoff to Developers
THE DESIGN PROCESS
ITERATE
Repeat the process - Ideate, Prototype, and Test
EMPATHIZE
USER RESEARCH
RESEARCH GOALS
Identify the target users and learn about their experience while shopping online.
01
Understand preferred shopping modality of users, i.e., what do they prefer to shop on - their phones, desktop, or tablets? Why?
03
Learn about the competitors and what they do well or can do better in providing a great shopping experience
02
Understand the technology (Augmented and Virtual Reality) trends and user demands to make the product future proof.
04
RESEARCH METHODOLOGIES
PRIMARY RESEARCH
Customer Interviews and Contextual Inquiry:
User research was conducted through 1-on-1 interviews with 5 users to learn about their experiences and patterns they follow while shopping for clothing items online. I tried to cover participants from five provisional personas defined previously. I gathered as much as I could from the end-users to gain knowledge about their goals, frustrations, motivations, and analyze the scope improvement by empathizing with them.
THE YOUNG PROFESSIONAL
I need to know the model's size specifications. What I also prefer is a liberal return and shipping policy.
THE TRENDY MILLENNIAL
I hate going to the stores to shop. I get more options online. I want the convenience to shop from anywhere and anytime.
THE GRANDPARENT
I always check for reviews. They usually have someone sharing their experience about the size and its fit.
SECONDARY RESEARCH
Competitive Analysis and study of trends online:
Identifying and analyzing some of the major competitors their products, sales, and marketing strategies helped gain some insight into the industry shopping trends.
INSIGHTS FOR INNOVATION
After conducting user interviews, contextual inquiry and analyzing the gathered data, three common insights emerged.
CONVENIENCE
The luxury of being able to view a variety of options at anytime-anyplace, and place an order seamlessly is what attracts the user to the brand
CONFIDENCE
Through interface design and/or service delivery, the user desires to be extremely confident about the size and quality of the product before buying the product online
EFFICIENCY
The choice of having faster and/or cheaper means of product delivery and product return affects the user’s decision of buying from the specific brand
RESEARCH ANALYSIS
Based on the secondary and primary research findings, the results were used to create several deliverables to better understand and empathize with our users.
The aim was to help us understand the experiences of users within a broader context — physical, social and emotional. The goal was to be able to better ‘define’ what their needs are in order to build the desired product.
To better understand the target audience, to create empathy, and to give the user base a more ‘human’ feel, I created a persona. Jessica was more of a conscious shopper.
By synthesizing data from the research debriefs and 1-1 interviews, we created a fictional but realistic representation of the target user group.
USER PERSONA
EMPATHY MAP
To enter into a more human-centered mindset and to organize the research into a coherent vision, an empathy map for Jessica was created.
STORYBOARDING
Based on Jessica's persona, I also created a storyboard, showing how she would enjoy the benefits of shopping from Mirror.
DEFINE
DEFINING THE PRODUCT
IDENTIFYING PROJECT GOALS
Based on the analysis achieved through research and empathizing with our users, the next step was to define the information architecture of the website.
For that, at this point, it was important to re-visit the original design brief to chart out the business goals and user goals gathered from the research. Identify where they overlapped, and where they differed.
Based on all the data gathered and understanding the goals it was now time to hone detailed requirements and prioritize by creating a feature roadmap. Given the time constraints, the product roadmap helped me to prioritize the features that were needed for the MVP.
MUST HAVE FEATURES
NICE TO HAVE FEATURES
SURPRISING FEATURES
FEATURES THAT CAN COME LATER
List of features mapped against the interaction/page
HOMEPAGE
PRODUCT DESCRIPTION
CUSTOMER EXPERIENCE
CHECKOUT
SEARCH AND NAVIGATION
ACCOUNT CREATION
Being an e-commerce website, Mirror would be extremely heavy on information. It was crucial to lay down the overall structure of the website.
Based on the results of the card sorting exercise, a sitemap was created to show the relationship between the content on the website. I broke down the product categories into subcategories, to assist in understanding the filtering criteria.
USER AND TASK FLOWS
Created User Flows and Task Flows helped visualize how Jessica, and eventually the target user audience, might interact with the website to complete various tasks based on different scenarios.
IDEATE
At this point in the design process, I began creating low-fidelity to mid-fidelity wireframes and then responsive wireframes. I tried to emphasize priorities that arose from the user research and the client brief keeping in mind the product development roadmap: a clean and intuitive website with options to see product reviews, blogs, multiple filters, and many other features.
RESPONSIVE WIREFRAMES
Desktop HD: 1440 px X 1024 px
Tablet: 768 px X 1024 px
iPhone 8: 375 px X 667 px
BRANDING AND UI KIT
Once the wireframes were created it was then time to work on visuals on the Mirror brand. The re-branding of Mirror was done to be more modern, luxurious, and inviting. The logo, typography, color palette, and imagery was worked out.
Thereafter, based on the principles of Atomic Design by Brad Frost the idea was to define/design the small, independent - atomic - parts, to help build the large molecular structures.
Defined the UI elements such as icons, spacing, navigation patterns, grids, and other similar elements for the Mirror Brand.
Source: Atomic Design Icons
by Marivi Carlton - Dribbble
PROTOTYPE
HIGH-FIDELITY WIREFRAMES AND PROTOTYPES
After creating high - fidelity wireframes, I create a prototype in InVision for the user to accomplish a defined task.
Scenario: You want to buy a dress for your friend that she can wear to work or any formal event.
Task 1: Add a navy Blush Pink women’s formal dress of XS size to your favorites list. Task marked completed on the Favorites Page.
Task 2: Proceed further to purchase the same product. Task marked completed on the Shipping Info Page.
TEST
USABILITY TESTING
Once the interactive prototype was designed, we conducted usability testing to study how people respond and interact with the design.
TEST GOALS:
To see how users react to the design of Mirror Prototype.
01
To spot the elements on the website that create frustration or confusion to the user while they perform the required task.
02
To examine how much time does the user take complete the task.
03
To observe where the user is able to predict the upcoming step while purchasing a specific product.
04
Individual data points gathered were categorized as seen in the image. Based on the insights gathered from the affinity map, the highest priority revisions and prototypes were created on the website.
TEST RESULTS AND DEVELOPER HANDOFF
TEST RESULTS
SEARCH FUNCTIONALITY PREFERRED TO BE THE FIRST OPTION WHEN LOOKING FOR A PRODUCT
Next steps: To build the search bar auto-complete functionality in the prototype to assess the user's navigation pattern and user's confidence in finding the desired product.
EMPHASIS ON USE OF FILTERS
Next steps: To enable all of the filter options and create multiple search paths using different scenarios.
CONFUSION ABOUT NAVIGATION/ACTION DUE TO INACTIVE BUTTONS ON THE PROTOTYPE
Next steps: To enable all of the buttons in the prototype and hand off the design to developers.
DEVELOPER HANDOFF
Using Zeplin a developer handoff document was created. Click to view the document here.
NEXT STEPS
Given the time constraints, the second round of usability testing could not be conducted. The next steps would include creating multiple user and task flows, create multiple paths in the prototype, and conduct a second round of usability test using the updated prototype!