Responsive E-Commerce Website Design

Mirror started back in 1994 as a clothing store targeting a budget-minded audience who looked for low-cost clothing for any occasion. The quality is pretty good and the prices are rather low. Their main goal is to make any type of clothing accessible to everyone.

My Contributions

User Research

Strategy

Interaction Design

UI Design

Prototyping

Usability Testing

Timeline

Tools

3 Weeks

Sketch

Figma

Miro

Whimsical

Maze

Challenge

Currently, Mirror doesn’t have a digital platform, and now Mirror aims to develop an online presence, providing convenience to existing customers while attracting new ones. Also, Mirror seeks to modernize its brand.

Goals

• Design a new logo for the company that is modern and neutral enough to attract all types of people and styles.

• Design a responsive e-commerce website that is easy to use and allows customers to browse through all products and filter by size, color, style, etc.

Process

01 Empathize

Market Research
Competitor Analysis
Survey & User Interview

I began the design process by conducting two research methodologies, Market Research and Competitive Analysis.
My research goal was to understand current market trends and analyze the major competitors to determine their strengths and weaknesses.
It helped me find out how we can improve the user experience of our product.

Market Research

In the US alone, the e-commerce fashion industry accounted for 29.5% of fashion retail sales in 2020. The value of the US market is projected to take a sizable chunk out of global predictions, reaching $100 billion by 2021.

Online shopping is skyrocketing, with six out of 10 shoppers saying the possibility to shop via mobile is an important factor in deciding which brands to purchase from. Fashion brands need to meet customers wherever they are, on their mobile devices—and not expect them to find their site by chance.

Competitive Analysis

Top online sotres in the Fashion segment in the U.S. in 2019, by e-commerce net sales

Survey & User Interview

I performed a survey and user interviews to support my research and analysis.
It helped me further confirm my understanding of how the customers think and discover their pain points and needs.

A survey was done to have a better understanding of customers’ needs, motivations, frustrations, and preferences. 10 participants were selected

I interviewed 4 participants between 20-40 years of age with different demographics and shopping preferences.

Screen Shot 2021-06-03 at 10.40 1 (1).png

Key Insights

02
Define

Persona
Feature Roadmap
Information Architecture
User Task Flow

Persona

Based on my research findings, I created a persona that represents the needs, motivations, goals, and behaviors of Mirror’s target audience.

Feature Roadmap

I created a product-goals chart to identify where the users’ needs and the company’s needs overlap. It helped me keep all perspectives in mind. And based on the findings, I created a feature roadmap to create a product that is beneficial for both business and users.

Information Architecture

I conducted an open card sorting exercise via Optimal Workshop to see how users categorize apparel-related items. By analyzing how the shoppers grouped different clothing types, I could create easier navigation and better categorization.

User Task Flow

I created the task flow and predicted what possible actions and decisions users could make and find out different ways they would end up on the site.

It guided me on what kind of main pages and features should be prioritized.

03
Design

Wireframes
Branding
Responsive Design

Wireframes

Before creating the low-mid fidelity wireframes, I started by sketching a few versions of the landing page on paper. It allowed me to think about the basic structure of the website and find out which version would work best.

Then, I designed these responsive wireframes for desktop, tablet, and phone by using Figma to optimize the browsing experience for users.

Branding

I designed a new logo that conveys the brand attributes :
Modern, Trendy, Cheerful, and Inviting

Also, I created a style guide that is neutral enough to attract all types of people and styles.

Screen Shot 2021-08-09 at 12.16.38 AM.png

Responsive Design

To test the usability of the design, I incorporated the branding and UI into the high-fidelity interactive wireframes.

04 Prototype

Prototype
Usability Test

Prototype

I created this prototype to observe how users interact with it and how easily they can complete the supplied task.

Usability Test

I conducted a usability test via Maze platform to test the overall navigation and flow of the design and observe any pain points the user may have during the process. There were 12 participants, and they answered how quickly and efficiently they could finish the checkout process. I also asked them how the overall flow of the website or the feeling of the website and what kind of confusion they had during the process.

All participants were able to navigate the site smoothly.
All participants completed the task successfully.
All participants said it was easy to navigate.