Mirror Website Design

A website design for a brick-and-mortar clothing department store moving into e-commerce.

Overview

The objective of this project was to conduct a comprehensive research-driven approach to create an online shopping experience Mirror customers will love.

The Result

A responsive website with ecommerce store that is fun and easy to navigate.

Research Phase

In this research phase, I learned about what users did and did not like about online shopping, and the importance of simple ecommerce layouts to emphasize products.

Competitive Analysis Findings

I analyzed three of the largest online retailers: Nordstrom, H&M and Uniqlo.
  1. These major retailers have clean layouts with few colors that put the emphasis on the clothing.
  2. Landing pages for these retailers feature engaging fashion photography and bright colors.
  3. The main shortcoming with larger retailers are overly complicated information architectures with many categories making it harder to find product sections.

User Research Findings

Four user research interviews were conducted to understand what Mirror’s audience did and did not like about online shopping experiences.
  1. People’s favorite online clothing stores were easy and felt standard and streamlined.
  2. So shoppers can sort through large selections of garments, good filtering and sorting appear to be a critical feature.
  3. The clothing itself was the focal point of the online shopping experience.

Persona Development

Meet Mary Mae also known as the Bargain Hunter, the persona for this project.

Modeled after user research, Mary loves looking throught large selections of clothes and hates returns.

What was most notable from research was the lasting preference of seeing clothing in person.

Design Phase

In my design for Mirror, I broke user's experience into three main phases based on how users described their thought process when shopping: first finding a garment they want visually, then assessing a garment and its quality and finally deciding to buy the garment. In the end, I got to design an end-to-end shopping experience from scratch.

Storyboard

This storyboard chronicles Mary's behavior finding a dress for an upcoming barbeque and how she chooses a garment.

The main takeaway from this storyboard was that when online shopping, users may have a vague idea of what garment they are looking for so that product lists should be designed to show lots of different garments.

Information Architecture

Retail clothing ecommerce information architectures can become quite large. These retailers offer many different type of products. In this information architecture, I used a card sort to come up with good sections but ultimately tried to keep the site as simple as possible.

Wireframes

While wireframing, I was able to create page layouts that met the needs of clothing shoppers I learned about from user research. I also experimented with new kinds of designs for filtering sorting, and editorial content.

Usability Test Findings

Key findings:
  1. It was not clear enough how to navigating through different clothing categories.
  2. Reviews were overly prominent on the product pages.
  3. Shipping and returns information was confusing to users.

Final Design

In the end, I landed on a fun and streamlined UI design for Mirror that prioritized sales, and made category navigation straightforward. Most notable was the fun use of color for editorial content and in scroll gifs or animated Jpegs to showcase relevant editorial content.
More OF MY Work