Mirror: a responsive web design for an e-commerce website.

Mirror+Computer.jpg

ROLE

Strategy, Research, UX Design, UI Design, Branding, UX Copywriting

MENTOR

Andrew Graunke

PROJECT SCOPE

8 weeks

TOOLS

Pencil and paper, Sketch, Adobe Illustrator, InVision

 

Project Goals

  • Create a responsive e-commerce website design for the Mirror clothing retailer

  • Refresh the brand identity and create a logo

 

Design Process

Design process diagram.png

Research

1 on 1 Interviews

Surveys

Competitive Analysis

Define

User Personas

Sitemap

Product Roadmap

Design

Hi-Fidelity Wireframes

Branding

Responsive Design

UI Design

Test

Hi-Fidelity Prototype

Usability Testing

 

Background

Mirror is a clothing retailer that started back in 1994, targeting an audience looking for cheap clothing for any occasion, along the same wave that brought us Old Navy and H&M. Their main ideal is to make any type of clothing accessible to everyone. They believe clothing doesn’t have to be expensive and last forever, that we should be able to change styles as we need and please.

As the sole designer on this project, I was tasked with creating a brand identity and e-commerce website to bring Mirror’s retail business to the web. Over the course of 3 months, I performed research, defined the product, created branding, and designed the website for Mirror.

 

Research

I conducted interviews and performed a competitive analysis to research for this project. A competitive analysis uncovered that direct competitors are working under the fast fashion model, using streamlined relationships between design, manufacturing, and getting products to the consumer. This model makes current fashion trends available to a large portion of the public at low prices.

User interviews were conducted with four in person interviews, where users were asked to answer a series of questions to better understand their shopping habits and define pain points while shopping online. The group interviewed consisted of two male and two female participants between the ages of twenty six and thirty four. Interviews uncovered that Users are shopping in stores on and offline, often determining what styles fit them in the store and seeking additional styles, colors, and sizes online. Information provided is key. It’s important that people can get a full understanding of what they are purchasing online to avoid the disappointment of receiving a different product than they wanted to purchase.

Customers are buying during one session on e-commerce sites, adding all items to their cart and making edits in the final stages of their shopping experience, often budgeting to remain in their spending limit. Users are conscious of their budget and want to avoid the guilt of feeling they are spending too much, and want the gratification of getting a good deal. Users also want to avoid distractions and get through checkout as quickly as possible. They want the same customer service and reliability they seek in stores.

 

Define

Claire Jones, the millennial archetype

With information gathered in research, I created the Claire Jone’s persona to inform my design decisions. The free spirited Millennial.


 

The empathy map articulates Claire Jone’s motivations and pain points in shopping online.

Millennials are a large and growing portion of the e-commerce market.

Millennials are largely influenced by what they see through social media and online marketing and seeking to incorporate what they are seeing and hearing in their social circles online and in their lives to define their own personal style and tailoring their shopping habits finding clothing on their computers anywhere from their local coffee shop to their office.

 

The Sitemap

With information from my interviews, Claire in mind, and considering the needs of the business. I created a sitemap to articulate the architecture of the site that gives us an understanding of needed screens and how we categorize content.

 

Design

Starting with low fidelity sketches, I was able to view a number of options quickly to figure out a layout and framework that worked best for the Mirror website.

Creating mid fidelity prototypes, I was able to test the architecture, layout and key work flows of the system, and test them with users one on one using Invision.

 

Branding

Bringing together fonts with the color palate, and logo, we come to a brand and key design features for the site in this style tile, all portraying a brand image of contemporary fashion, with easy to read text and emphasizing the products.

 

UI Kit


This UI kit shows examples of key design elements of the website that can later to be used if changes or additions are made to the site.

 

Applied UI Design

With the layout of the wireframes, and design elements in the UI Kit, the screen designs come to life.

Applied UI made responsive for mobile screens

Testing

Using Invision, I conducted one on one user testing to find any friction points with the Mirror website to fine tune adjustments.

In my testing I found that users were executing task flows without error, but was encouraged to add additional pages and functionality to the checkout process in order to improve the experience with the site, decreasing the necessity to scroll, and provide additional confirmation in purchasing.

Key Take Aways

Through research, definition and ideation, we now have a brand identity, logo, and website design with an approachable and sophisticated feel that can continue to be improved and refined through more prototyping and testing.

 

Check out more of my work!