MIRROR
RESPONSIVE RETAIL E-COMMERCE UX/UI DESIGN
CHALLENGE:
To design a responsive e-commerce website with updated branding that allows users to purchase affordable clothing in the most accessible way possible.
SOLUTION:
To design an updated logo for Mirror, as well as designing a responsive e-commerce website, allowing customers to browse all products and filter by size, color, style, and others.
PROJECT DETAILS:
My Role: User Researcher, UX Designer and UI Designer
Tools: Sketch & Invision
Project Timeline: 4 weeks/ 20 hours per week
People Involved: DesignLab Mentor
PHASE 1: EMPATHY
This stage included gaining a clear understanding of the current retail e-commerce market and its customer base. During this time we identified challenges and trends in the current market place and spent time gaining feed back from customers one-on-one.
GOAL:
To understand the current market and its users.
DELIVERABLES:
Market Research, Competitive Analysis, & User Interviews.
MARKET RESEARCH
We conducted market research to gain a better understanding of retail e-commerce sites, what users expect while using similar competitor products, and any pain-points.
CONSUMER BEHAVIORS/ DEMOGRAPHICS:
Consumers are more likely to purchase an item if it has free shipping.
Consumers are more likely to purchase when offered a free return or exchange.
More than half of online shoppers use phones/ tablets to make purchases.
A majority of online shoppers refer to customer reviews before making a purchase.
A majority of online shoppers are millennials.
Price and shipping speed are two of the most important factors taken into consideration while shopping online.
CONSUMER PAIN POINTS:
Slow delivery times.
Affordability— some items are too expensive.
Poor return policies.
Sites that do not have customer reviews.
COMPETITIVE ANALYSIS
We identified who our biggest competitors were, their strengths, weaknesses, and overall approach to solving problems with online e-commerce.
USER INTERVIEWS
We conducted one-on-one interviews with participants to gain personal insights into users, their needs, wants, and expectations while shopping in person, and online.
Overall we were able to complete a total of 4 interviews— 3 females, ages 22-43 and one male age 32. While reviewing our notes from each interview we were able to identify common patterns when it came to choosing where to shop and actually purchasing an item.
USER NEEDS:
To find items for an affordable price
To know that they are safe— their items are coming from a reliable source
That items will be shipped within a reasonable amount of time
Efficiency— spending as little time possible shopping for items
USER WANTS:
Discounts
Reviews
Faster shipping
Easy return process
Accurate advertising— i.e sizing, and photos
Being able to keep up with the latest trends
Quality clothing
OTHER INSIGHTS:
Participants prefer to shop online a majority of the time, if not every time.
Using Mobile devices (especially with the younger interviewees) seemed to be the preference when shopping online due to its convenience.
Every participant mentioned checking reviews before purchasing items online.
PHASE 2: DEFINE
This stage allowed us to gain a deeper understanding of who we are designing for and why. Most importantly, we were able to develop insights that addressed our users specific needs.
GOAL:
To identify target users and define user problems.
DELIVERABLES:
Empathy map, & User Persona
EMPATHY MAP
After completing user interviews we organized our findings into an empathy map to outline our users needs, motivations, frustrations, and motivations.
INSIGHTS:
Reviews influence a customers decision to purchase an item
Return/ Refund policies influence a customers decision to purchase an item
Customers prioritize ‘price’ over the quality of an item
Shipping time influences the customers decision to purchase an item
NEEDS:
To validate the quality of an item before purchasing
To be able to easily return unwanted items
To be able to shop affordably
To be able to receive orders quickly
USER PERSONA
Based on all of our research findings we were then able to create a ‘User Persona’-- a representation of our target audience/ who we are designing for.
PHASE 3: IDEATE
After developing a clear understanding of who, why we were designing we were able to generate ideas that would provide solutions for our specific users.
GOAL:
To brainstorm solutions, features, information architecture and flows.
DELIVERABLES:
Product Roadmap, Site Map, & User Flow
Product ROADMAP
Using previous research findings, we created a feature product roadmap to brainstorm future product needs and their priority levels.
SITEMAP
After reviewing research findings and competitor sites we then began laying out the structure of the site.
USER FLOW:
Using our persona, we dived a bit deeper by creating user flows. We did this to demonstrate different scenarios our users might run into while navigating the site and completing a variety of tasks.
PHASE 4: DESIGN
With solutions generated during the ideation phase we began developing the visual layout of Mirror’s site along with branding.
GOAL:
To develop the visual layout of the site and updated branding.
DELIVERABLES:
Mid-Fidelity Wireframes, Style Tile, High-Fidelity Wireframes, UI Tool Kit
MID-FIDELITY WIREFRAMES
After identifying key pages we needed to design, we began sketching a low-fidelity mock-up of the website that we later translated into mid-fidelity wireframes. These steps provided a blueprint for Mirror’s site later down the road.
STYLE TILE
We spent some time collecting ideas for visual elements that best represented Mirror’s brand attributes (Modern, Neutral, Stylish, Fresh, and Chic), and designing Mirror’s new logo.
HIGH-FIDELITY WIREFRAMES
Using our previous mid-fidelity wireframes and branding techniques we were then able to add the UI elements to our responsive pages to illustrate our high-fidelity designs.
UI TOOL KIT
We created a UI Kit to provide a frame work of Mirrors elements, colors, design patterns, etc. As we made adjustments to the site we continued to update our tool kit.
PHASE 4: PROTOTYPE
Using Invision, we converted our wireframes into a prototype that we could use to test Mirrors functionality.
GOAL:
Creating a prototype of the site to conduct usability testing.
DELIVERABLES:
Mid-Fidelity Prototype, Usability Testing
USABILITY TESTING
During this stage we created a testing plan to outline testing methodologies, objectives, and opening script. We then gathered participants to conduct testing on— participants were chosen at random for the purpose of gaining honest feedback.
TESTING GOALS:
To see how users interact with searching for, viewing, and adding an item to the cart
To see how users interact with the completion of signing up as a customer and completing check out.
To determine any frustrations or pain points during the interaction.
TESTING SUBJECTS:
Testing was completed on 5 individuals that most closely matched our persona. Each participant was given the same 3 tasks to perform, and it was during testing that we were able to identify pain points with Mirror’s site.
TESTING FINDINGS SUMMARY:
All of the participants were able to complete the provided tasks. A majority of them, however, did struggle with the 3rd task of completing the purchase. This was largely due to the fact that the “New Customer” section was placed beneath the “Returning Customer” section of the page. Several participants also struggled to find the “Complete Purchase” CTA because it was at the bottom of the page-- only one participant noted that he liked this but said that it should be collapsible so that the users weren’t required to scroll so far down. These main frustrations, as well as the individual mentions of the small text, main headers, and selection of graphics, were later adjusted in the final design of Mirror.
PHASE 6: ITERATE
Using the data gained from usability testing we synthesized the information to identify updates that we could make to Mirror. After completing updates our designs we were then able to pass off our final designs to the development team.
GOAL:
To identify and complete priority updates for the high-fidelity version of the site, and design hand-off.
DELIVERABLES:
Affinity Map, Revisions
AFFINITY MAP
After reviewing all of the feedback from usability testing, we developed an Affinity Map to organize key findings and observations that we could use as a guide for priority revisions.
REVISIONS
Using recommendations from our affinity map, updates were made to the final design of Mirror. To interact with full set of wireframes view below:
REFLECTION
During our work with Mirror we were able to design a full retail e-commerce site from the ground up. Spending time with users one-on-one gave us the insight we needed to come up with designs that best fit their needs. Mirror now has a responsive platform to assist its users in all of their online shopping needs.
NEXT STEPS:
Conduct further usability testing
Make updates to wireframes from usability testing
Hand-off designs to developers