MIRROR an end to end responsive e-commerce website.

Taking into account business growth goals while building user focused product.

User research, Brand identity, UX/UI Design, Prototyping, Usability Testing

Background.

Mirror started back in 1994 as a clothing store targeting a budget-minded audience.

Problem.

Currently, Mirror is falling behind because most of customers prefer online shopping, but Mirror does not offer such an experience.

Mirror wants a new logo and an e-commerce responsive website. Some of the main challenges are to make sure they attract a new younger audience while they keep their loyal more mature clients. Mirror also wants to explore effective ways how to move the inventory and benefit their users at the same time.

Solution.

An end-to-end responsive website featuring key screens for desktop and mobile.

My Role.

This was an end-to-end conceptual project that I worked on as a solo designer. My areas of responsibility were: User research, UX/UI Design, Brand Identity, Prototyping, and Usability Testing.

Tools.

Figma, Whimsical, Miro, Google Slides, Google Docs, Optimal Workshop

Design thinking methodology helped me stay focused on proper deliverables for this project:

01. Empathize

Research user’s needs and study the issue in and out:

  • Secondary research

  • Competitor analysis

  • Provisional personas

  • User interviews

  • Card sorting

02. Define

Define user’s needs and problems through:

  • Project goals

  • Problem statement

  • User personas

  • Task flow

  • User flow

  • Feature roadmap

03. Ideate

Questions, assumptions and ideas:

  • Brainstorm

  • Empathy map

  • Site map

  • Story board

  • Sketch lo fi

  • Brand identity

04. Design

Creating effective solutions through prototypes:

  • Digital mid fi wireframes

  • UI

  • Prototyping

05. Test

Testing solutions and iterating based on feedback:

  • Usability testing

  • Empathy map

  • Priority revision matrix

  • Iterations

How might we create a responsive e-commerce website that helps the business move inventory?

01. Empathize

Research user’s needs and study the issue in and out.

E-commerce services develop further, so are the expectations of users. My goal was to understand what goes into UX for e-commerce and why.

I conducted User survey with 5 users: all of the participants agree that online shopping sure makes their life easier, however they still have struggles pertaining to size, color, shipment, lack of control.

As a part of my research, I conducted Competitor Analysis to see what makes a successful online e-commerce website. I learned that clean uncluttered ui, simple menu, extensive info about the product are essential for a fun shopping experience.

Hybrid Card Sorting via Optimal Workshop software, allowed me gain understanding of what users expect to see in various categories.

100%

prefer to shop online because it helps save time and money

100%

apply filters when shopping online

60%

shop Sales section case-by-case

40%

shop for the whole family or friend

40%

look into size guides proposed by the brand

40%

use a measuring tape to get the best fit possible

02. Define

Define user’s needs and problems.

I defined MIRROR’s potential user base as those who are already shopping in-store and those who shop the competitor’s websites (In this case, it would be Amazon, Uniqlo, H&M).

My persona Kate loves shopping for the whole family and is always on the lookout for the best deals online. I went further to develop User Flow that explores 3 main scenarios for her: buy items from the sale section; get help from the representative; browse for an item, and share results.

03. Ideate

Questions, assumptions and ideas.

I used Miro software to create Sitemap based on research results.

I then used Whimsical to create the Task Flow.

Empathy Map and Story Board for my Persona Kate are informed by my findings from the user one-on-one interviews I conducted during the research phase.

Sketching ideas

I sketched out the different versions. I was getting inspired by direct competitors such as Nordstrom, H&M, and Amazon.

Brand identity

When working on brand identity for Mirror, I challenged myself to create meaningful and recognizable brand attributes and went through some iterations. Design crits were an excellent source for me to put my initial concepts in front of the group and discuss what works. For instance, the initial primary color scheme was more of peachy-blush tones; however, I came to the realization that it made way more sense to opt-in for a unisex deep green as a primary color, and its monochrome “neighbor” muted green as my secondary color while letting the off beige tones be my neutrals to support the overall feel of clean and modern. I also kept in mind that the overall perception of green is “freshness, growth, wealth, balance, health, & youthfulness” which I felt was exactly what Mirror needed for their brand to make that first step in building brand recognition and trust. 

04. Design

Creating effective solutions through prototypes.

I then focused on designing key screens for the Mirror while constantly iterating on feedback I received:

  • Home

  • Search

  • Product page

  • Filters

  • Shopping cart

  • Guest checkout

  • Member checkout

  • Order complete

05. Test

Testing solutions and iterating based on feedback.

I have recruited 6 participants, three of whom align with my persona. My user base consisted of 4 females and 2 males.

Due to covid-19 restrictions and different time zones, I opted in for unmoderated remote testing with most of my participants and conducted an in-person moderated test with one participant.

Overall users liked the look and feel of the prototype as well as the whole experience around the search, filtering, looking for a product.

My key iterations were based on usability testing feedback and focused around findability and value, two of 7 main factors that influence user experience according to Interaction Design Foundation.

Takeaways

What have I learned?

I learned about the importance of applying Design Thinking and checking in with Usability Heuristics when working on the interface: it is crucial to take into account the acquired behavior of users and do in-depth competitor analysis as a must.

The 7 main factors that influence UX are: Findability, Desirability, Accessibility, Value, Credibility, and Usability.