Mirror
Responsive eCommerce website for a fictional enterprise
Scope
Responsive website & branding
My role
UX Designer (Research, Visual Design, Interaction Design, User Testing)Tools
Figma, Adobe Illustrator, InVision, OptimalSort, Pencil & PaperTimeline
4 weeks (80 hours)
Overview
Fictional company, Mirror is a successful global retail chain with over 400 stores worldwide and 25 years in the industry. Mirror prides itself on keeping costs low and providing solutions for customers.
After much success offline, seeing commercial viability and customer request, Mirror is ready to expand its presence in the digital market. They want to start with a new logo and e-commerce responsive website where they can sell their products online as well.
How might we help Mirror stay competitive in the eCommerce space?
The Challenge
The Solution
Design a modern logo and responsive e-commerce website.
Develop an online brand identity and design a responsive e-commerce website that is easy to use and allows customers to browse through all products and utilize filters effortlessly.
Design Process
Research
Market research
Competitive analysis
User interviews
Empathy map
User persona
Strategy
Project goals
How Might We questions
Feature roadmap
Card Sorting
Design
Site map
UI Requirements
Task flow
User flow
Low-fidelity wireframes
Mid-fidelity wireframes
Prototype & testing
Branding
UI kit
High-fidelity wireframes
High-fidelity prototype
Usability testing
Affinity map
Priority revisions
Understanding the landscape with research
Structuring my approach
Research allows us to first understand what I know, what I don’t know, and what I need to find out. It also enables me to dive deep into our understanding of our users, not just their immediate frustrations, but their views, behaviors, fears, limitations, reasoning, and goals as well.
To ensure research stays on track, I assembled a research plan before conducting research to serve as a guide and develop a good structure research execution. In my plan, I have outlined research goals, research questions, assumptions, methodologies, participants, and timeline.
Defining my research objectives
Understand the e-commerce market landscape
Identify target users
Identify user’s goals, motivations, behavior, experience, and frustrations when shopping online
Uncover who our competitors are and understand their solutions for the target audience
Understand how users navigate websites when shopping online
My research methods
Market research
Competitive analysis
User interviews
Our online shoppers
To better understand the dynamics of the retail industry, I must first familiarize myself with the latest global retail market landscape. I researched online retail shopping trends, shopping habits, online shopper demographics, frustrations, and gather the latest insights from analytical reports, statistics, and case studies. This information helped frame the questions for my user interviews.
Overall, below are key findings from my market research.
Scoping out the competition
Once I better understand the market and my competitors, I analyzed the strengths, weaknesses, successes, and failures to solve problems regarding their products and services. These findings will be beneficial in uncovering gaps in the market to figure out where and how to position Mirror as a brand. I analyzed 3 direct competitors with the same goal of trying to solve similar problems as Mirror and 2 indirect competitors that only solve one aspect of the problem.
Connecting with shoppers
Market research revealed a general, big-picture view of the e-commerce market. With primary research, the focus is more granular, inspects users’ behaviors, and builds real connections with our users. Conducting one-on-one user interviews with the goal of learning more about their motivations, needs & wants pain points, and behavior directly by encouraging participants to share their experiences and stories.
I was able to recruit four participants to share their past experience shopping online and in-stores.
Identifying patterns
After conducting my user interviews, I synthesized the qualitative data by creating an empathy map to help me identify key patterns between all my participants. These patterns are then translated into insights and used to define the needs for Mirror’s persona.
Insight
Participants don’t feel confident shopping online due to sizing inaccuracy
Participants are motivated to shop when there is a sale/promotion
Participants reference reviews for product insight and feedback
Need
Clothing sizes to be accurate
Variety (size, color, and style)
Shopping to not be a task when searching for products
Meet Christina
The findings from the empathy map were collected and summarized in my user persona. I created Christina as my persona to create reliable and realistic representations of the key user’s goals and characteristics. It will also help focus on the major problems and address the critical needs of the user group.
Strategy
Aligning goals
User goals are of the utmost importance, however, the desirability of the product must be balanced with business goals and technical considerations. Project goals enable us to have a clear overview of the product, pave the way for determining product features and make the proper decisions.
I summarized user goals based on my persona and empathy map, assembled business goals referencing the project brief, took technical goals into consideration, and visualized project goals.
How might we help Christina?
Taking the insights gathered from my research, I now want to think about strategizing solutions for Christina. Christina’s needs are framed into an actionable problem statement. Each statement is derived from the user's needs that will help me redirect the user's point of view into How Might We (HMW) statements so that I can start brainstorming ideas that will fulfill the user's needs.
Using the formula [user] + [need] because [insight] to translate into an actionable HMW statement
Prioritizing features
Product roadmap allows me to prioritize the features generated from my brainstorming sessions by categorizing each one from P1 (Must have) to P4 (Can come later). Considering that this is an MVP, the difficulty, and confidence level of how the feature will allow users to achieve their goals, I decided to focus on the features in the P1 section to meet the user’s needs.
Priority 1 product features
Card Sorting
To create a successful information architecture for Mirror, an open card sort was conducted in order to gain insight regarding how users understand & categorize information. This similarity matrix identified strong pairings, potential groupings, and common patterns in the organization.
Design
Assembling an intuitive framework
Utilizing my findings from the card sorting exercise, feature roadmap, and project goals, I was able to assemble a sitemap that demonstrates the hierarchical structure that includes our proposed pages and features for Mirror’s website.
Establishing features + screens
Three tasks were established based on key features that I will need to implement and is reflective of my user’s frustrations, needs, goals, and motivation. A UI requirement document was created to further determine how Christina will interact with Mirror. The document highlights specific features, elements, and screens needed for Christina to complete her tasks.
Christina’s journey
Before constructing the website, I must first understand the needs of my users and the series of actions the user will need to take in order to achieve their goals. Below I have defined three key tasks that Christina would like to complete and demonstrated steps she will need to take to accomplish the three tasks.
As a new user, Christina is looking for a black dress so that she can wear to her job interview.
Christina wants to check the sizing chart so she can select the right size.
Christina wants to add item to her shopping bag so she can make a purchase.
Christina’s footsteps
Taking the task flow one step further, I created a user flow to better understand how users could interact with the website. It outlines all possible scenarios, options, errors, dependencies, and outcomes. The below user flow maps out Christina’s three tasks and how she can be moving through the website to accomplish her goals.
Sketching the concept
Using the user flow, UI requirement, and referencing established e-Commerce website, I sketched out wireframes to outline the features and pages needed for each task. This will enable us to examine and convey our ideas, demonstrate functionality, visualize flow, and illustrate interaction. Sketching will discover potential issues and solutions early. Afterward, I selected my best concept.
From paper to digitalizing
Once I decided on the visual direction of the layout I want to go for, I started to digitalize a mid-fidelity version of the wireframe. This is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. Most importantly, it allows me to check and test functionality early on to validate my designs.
Consistent experience across devices
In addition to designing desktop wireframes, to ensure users have a consistent experience across all devices, mid-fidelity wireframes were designed for tablet and mobile as well.
Branding + High-Fidelity
Building the brand
Before adding further detail to the wireframes, the focus was shifted to branding starting with a brainstorm of brand attributes that resonated with Mirror’s key message.
I assembled a mood board to gather inspiration from Pinterest to communicate and define my overall visual design direction.
Attributes: modern, fresh, natural, and minimalistic
Brand identity
To further establish the brand identity, I brainstormed logo ideas that reflect my brand attributes. After researching and some sketches, I selected the best concept to digitalize.
Designing a system
Building off of the logo design, I created a visual document further defining the brand image by specifying fonts, colors, logo usage, and imagery based on brand attributes and inspiration gathered from mood boards. This guide will assist in designing the user interface for the product and ensure consistency even for future iterations.
Piecing it all together
With the brand identity established, I can apply the style and brand elements to the mid-fidelity wireframes to create high-fidelity wireframes.
Prototype & Testing
Making connections
After I designed the primary screens that are essential for users to complete their tasks, I added interactions to create a functional mid-fidelity prototype for usability testing. This will help detect issues in my design for further improvement.
Putting it to the test
Before conducting the usability test, it is important to define my test objectives, methodology, tasks, and rubrics for measuring the result of the testing. The usability testing plan will also serve as a guide and ensure each test is consistent between participants.
Usability testing objectives
· Observe how successful the current design allows users to complete their tasks.
· Uncover pain points users encounter when completing their task.
· Understand users’ journey navigation when completing their task scenarios.
· Discover if users were able to complete the task scenarios.
· Uncover opportunities to improve usability.
Usability testing methodology
Think-Aloud Method
Remote moderated test over (Zoom) with participants screen share when interacting with the prototype
Observe interaction, tone, and facial expression
Record session and note-taking
Gathering insights + recommendations
To summarize the usability test findings, I created an affinity map to uncover patterns and frustrations participants had when interacting with the prototype helping me identify areas for improvement. I assigned each participant a different color sticky note and categorize each insight. Recommendations were then provided for each insight to improve the prototype for later reiteration before making it into high-fidelity wireframes and finalizing my prototype.
Testing insight
4/7 participants did not select a color for the product before adding an item to the bag assuming the product being modeled in the image were pre-selected
Recommendations
Have floral color option pre-selected and clearly indicate the color of item being shown/modeled when users land on the product page.
Prioritizing improvements
The time and resources I have are limited, I made revisions based on the priority matrix with the highest priority and highest user value first.
My primary revision is having the color of the product pre-selected that is modeled. I updated the prototype so the color will be automatically selected as soon as users land on the product page. Users have overlooked and were confused as to why the color was not pre-selected prior which led them to click the inactive art button when attempting to add the item to their shopping cart.
The result
Utilizing the priority matrix, I implemented the recommended changes. Here are some highlights of the changes I have made.
Updated color selection to pre-select when user land on page
Design Outcome
Modern logo
Modern brand identity
Simple and clean responsive website
Simple and clean responsive website that is easy to navigate
Final Prototype
Final prototype - test it out for yourself
Here is the final prototype after implementing revisions and applying branding elements. Feel free to explore the app on your own. Reminder participants were asked to complete three tasks which include the below:
Task 1: Find the white floral Leah Dress
Task 2: Find your size for the Leah Dress using the “Find My Size” option in the size chart
Task 3: Add the Leah Dress to the shopping cart
Next Steps + Reflection
Next Steps
Since the design has been tested and priority revisions have been implemented, it is ready to enter the development phase. We will use collaboration tools to hand off the work to developers and assist with any follow-up questions.
Maintenance
Although testing is the final phase of the design thinking process, the iterative process does not end here. Updates and revisions will continue to exist in the future and will be addressed based on the priority levels.
