Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      
Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      

MIRROR

Designing and Branding a Responsive
E-Commerce Website

Project Overview

Mirror is a fast-fashion clothing company that would like to focus on expanding their online presence with a dynamic e-commerce site. The website should include easy to navigate layout, a clean and modern theme, and a new logo.

Problem

Today, online shopping is about choice, and for most users, there are more choices than ever before. Since Mirror is going online for the first time, they need to identify the factors that makes a successful e-commerce website intriguing for users in order to increase their online sales. Additionally, to alleviate the pain points that users experience.

Role

UX/UI Design, User Research, User Interviews, Branding, Prototyping, Usability Testing

Tools

Figma, Adobe Illustrator, Optimal Workshop, InVision

Timeline

4 weeks/40hrs per week

DESIGN IN DETAIL

Ready to jump into the prototype? Click to view in InVision.
view prototype

01 research

RESEARCH GOALS

USER RESEARCH RESULTS

"Poor site legibility and inaccurate product descriptions topped the list of pain points for these users."

100%

of total participants
  • Would utilize a "favorites" list.
  • Say shipping is a factor in their online shopping.
  • Look at reviews before purchasing an item.
  • Would utilize a size scale to show how an item fits.
  • Say finding the right size online is difficult
  • Say shipping & returns need to be quick and easy

USER SHOPPING HABITS WHEN PURCHASING CLOTHING...

PERSONA

My research revealed a main approach to online shopping. Without diving too deep into the psychology, I personified this approach to depict the user's goals and frustrations.

Goals

  • Easy, simple navigation
  • A favorites list to add item to when browsing
  • Alerts for when items are on sale or back in-stock
  • A loyalty program with initiatives

Frustrations

  • Can't filter items through large inventory
  • Inaccurate website information about inventory
  • Confusing or inaccurate product information (sizing, description, etc.)

02 BRANDING

For Mirror, assembling relevant imagery was a large part of the branding and content imperative. This process began early on and influenced many other brand and layout decisions.

LOGO

I first sketched out some ideas for Mirror's logo, did iterations and then finalized my design. I considered how the company could brand themselves in the future and ensured the logo was scalable without losing the visual elements.

UI KIT

Mirror's theme is neutral, modern, and fresh. I wanted to find a medium between trendy and classic visuals. I first created a style tile and then once I explored the UI elements in depth, I finished with a UI kit.

03 INFORMATION ARCHITECTURE

User testing via Optimal Workshop was utilized in categorizing items and for site index.

I also researched existing navigation and architecture patterns in conceiving the responsive site behavior.

FLOWS

Based upon data from research and in-person interviews, I organized my observations and categorized them using a customer journey map. This helped me expose pain points and areas for improvement in the app along the entire user journey.

Through my user flow, ​I uncovered any usability issues and established these tasks could be completed with the framework I had constructed. ​

Thinking back to my persona, I mapped out 3 tasks Caroline would need to perform on the site:​

Usability of my site was the most essential element to consider. After detailing each step I could focus my attention on branding and product design without worrying about usability issues.

card sorting

In this card sorting session, participants organized topics into categories that made sense to them and helped me label these groups for my navigation.

04 WIREFRAMES

After preliminary sketches, mid-fi wireframes were created to see how the imagery and interaction would work together.

EXPLORATION

Before diving into the UI design, I created responsive wireframes for the main pages of the website to get a sense of how the information should be structured. I explored a lot of different layouts within my preliminary sketches and ended up using different elements to create my wireframes.

Since I dedicated so much time to the wireframes, the structure of the final site ended up being almost identical.

05 FINAL UI

As most users are directed to a site via search or socials, the landing page becomes an important first impression and brand touchpoint.  It's equally important to follow up the promise of the landing page by providing a seamless browsing and checkout experience that retains a consistent feel between devices.

TESTING

Once the desktop version of the UI design was completed I created a functioning prototype website to test on users. Users were presented a scenario and a series of tasks and were observed and questioned during and after performing the tasks. Once a sample of 5 users was completed, I analyzed the results and made iterations to the site for phase 1 and began to design screens for phase 2.

features

next steps

Phase 02
In the next iteration of this project, I would like to work on implementing more features including:

final reflection

After reviewing the affinity map & the usability testing findings, I found that users all agreed that the prototype was intuitive, easy to navigate and visually pleasing – all things that I aimed to accomplish in the design.

I was able to verify that users could complete the given task of purchasing an item and the usability test gave me the opportunity to observe how users went about completing that task.

Overall, the design of Mirror had a usability test completion rate of 100% (7 out of 7 participants) when navigating the prototype, and all participants would return back to the site if it wasn’t a fictional project.

view prototype

other projects

Tea House Website
AR & Keyless Entry Feature