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 Outcome
Modern logo
Modern brand identity
Simple and clean responsive website
Simple and clean responsive website that is easy to navigate
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
