Strategy, UX/UI, Branding, Integrated

A responsive e-commerce site for people who take fashion personally

ABOUT THE PROJECT

Mirror needed a contemporary, responsive e-commerce site to compete in the marketplace. My role was to identify a key demographic to target, then design an experience that delivers on user needs and satisfies the company’s bottom line.

Scope of work

Research

  • Competitive Review
  • 1-1 Interviews
  • Contextual Inquiries

Strategy

  • User Persona
  • Empathy Map
  • Development Roadmap
  • User Flow
  • Card Sorting

UX Design

  • Responsive Wireframes
  • Prototype
  • Usability Testing
  • Affinity Map

UI Design

  • Logo + Iconography
  • Style Guide
  • Visual Design
  • Key Templates
  • UI Kit

SUMMARY

Mirror, a global clothing chain that specializes in affordable fashion, needed a responsive website that would make online purchasing easy for users, distinguish them from their competition, and sell remainder items at a discount.

User research showed that our target chooses their clothing piece by piece. They see themselves as wardrobe curators, where fashion is more of a lifestyle than a trend. Their ideal online experience would allow them to shop for clothing like they do in person. They live for the discovery process. They also want some basic functionality and offers like favoriting, loyalty rewards, and a simple process for returns and exchanges.

My solution included a modern navigation system that kept filtering to a minimum. This provided users with the discovery experience they were looking for. I also included an interactive sizing guide for finding the right fit by a user’s preferences, exclusive lifestyle content and online deals, and a simple puchase-to-checkout process.

PROCESS

Research

Research began with a competitive review to identify trends, online best practices and opportunities for Mirror. Then interviews were carried out with participants who shop for clothing both online and in person on at least a weekly basis.

Some universal criteria emerged. Quality and fit matter most. Shopping for clothes online can be frustrating, because it’s hard determine quality and fit from photos alone. So items arrive and need to be returned or exchanged, which can cause further frustration from a brand’s returns policy and grow expensive because of shipping costs.

Then there was a surprising insight and opportunity. Our target takes fashion and style personally. They’ve built a wardrobe carefully over many years. When they shop they’re hunting for treasure. Most have a regular, daily shopping routine.

“I want to look the best I can. That’s how I feel good. It’s not about looking different than anyone else. It’s about dressing and living with style.

 Strategy

From research a persona was developed to represent the main user group. Kate is a young professional who grew up being influenced by urban street fashion. She shops her favorite sites every day to find the right pieces for her wardrobe. She has a fixed budget, so she hunts for deals through loyalty programs and special offers and rarely pays full price. She wants a way to favorite items so she can track them. And she wishes there were a realistic way to test for quality and fit online. She uses filters minimally, preferring to discover items more organically.

Digging further into what motivates Kate, I built an empathy map and from that made a storyboard where she gets an exclusive online offer via email. Her process to purchase is complicated. She makes a work around when she can’t favorite a garment and then visits the store to confirm the quality. This exercise helped prioritize functionality for the site.

Then I turned the storyboard into a user flowchart, mapping out the easiest path for Kate to make a purchase on the website.

To understand how to organize the products into categories a card sorting workshop was conducted. Participants were asked to sort 20 items into categories. The test proved inconclusive, as every person sorted and named the categories differently. High level categories like Women, Men, and Kids were common to everyone, so I used those categories to make a sitemap.

 UX Design

The experience needed to deliver a shopping experience that made it fun to discover new clothes, cover the functional goals users wanted and drive customer loyalty to the site and brand. Ideation on paper was followed by a low-fidelity Marvel prototype with additional iterations based on user feedback. Initial wireframes were built in sketch and revised annotated with descriptions of site functionality.

UI Design

Based on research, the visual design of the site needed to reflect the fashion lifestlye of our target. The monochromatic logo is reminicent of a fashion magazine and can change color depending on the season. A branding style tile was created for text, photography and visual textures, and from that a UI kit was designed. The overall effect is modern, clean and vibrant.

The final Mirror site designs were implemented across mobile, tablet and desktop screens.

Finally a high-fidelity prototype was built with InVision and tested with users. Participants were asked to find an item on the site for purchase and add it to their shopping cart. Everyone was able to complete the task, but there was confusion among users over ‘Today’s Deals’, the labeling on the Category List Page and the promient Search. An affinity map was created to prioritize next steps before starting the UI process.

REFLECTION

I would like to do further research and iterate on how to enhance the discovery process. I also think focusing on such a specific persona limits the experience. I’d like to include other kinds of shoppers and see how the site evolves.

Next: Branding

Logos, identity packages, brand evolutions
for startups, businesses and nonprofits

READ IT