Responsive Web Design

Mirror

Modernizing an established global clothing brand through responsive web design

Case study image
View prototype

My Role

UX Researcher, UX Designer, Interaction Designer, UI Designer

Team

Self-directed, with guidance from course mentor

tools

Sketch, Affinity Designer, InVision, Airtable, Draw.io, Whimsical.co

Duration

4 weeks

challenge

Mirror’s mission is to make any type of clothing accessible to everyone by providing inexpensive clothing that allows consumers to change styles as they need and please. With over 400 stores in 32 countries, it has built a reputation of reliability and affordability. Customers characterize Mirror’s stores as a shopping experience that’s not fancy, but clean and well-maintained.

Despite its offline success, the company recognizes the increased consumer demand for online services and the need for a digital transformation. As such, Mirror hopes to leverage the convenience of online shopping to better serve its current customers and establish a greater market presence.

Project objectives:

  • Update Mirror’s logo and brand to be modern, neutral, and attractive to a diverse range of customers
  • Design a responsive ecommerce website with sophisticated functionality

Mirror is a fictitious brand. The project and content presented here are speculative and for educational purposes only.

Outcome

A high-fidelity prototype of a responsive ecommerce website with intuitive navigation menus and search filters, as well as an updated logo and brand identity.

Process

Design Thinking process

Phase 1: Research

Process: Secondary Research • Primary Research • Synthesis (Empathy Map)

Research Goals
  • Identify Mirror's competitors, their strengths and their weaknesses
  • Understand people's current experiences with clothing shopping
  • Understand the role of clothing shopping in people's daily life

View the full research plan here.

Secondary Research

Market Research

To answer some of the research questions I had, I looked at industry reports and market-wide consumer surveys of the fashion and apparel industry. One key finding was that personalization plays an important role in customer satisfaction. Customers want to feel cared for on an individual level, rather than being treated like a homogenous market.

Personalization is an important aspect of apparel industry growth.
Competitive Analysis

To better understand how Mirror can uniquely position itself in the market, I analyzed the strengths and weaknesses of three direct competitors: Target, H&M, and Uniqlo. I identified these brands as direct competitors because they are all fast fashion companies that offer similar products and target similar audiences as Mirror.

Analysis of direct competitors: Target, H&M, Uniqlo

In contrast, I categorized ThredUp and Amazon as indirect competitors because their brand identities and target users overlap with Mirror’s, but not as much as the previous three brands. They’ve been very successful online, so I also examined their websites for strengths that Mirror could emulate.

Although ASOS is is another fast fashion brand that could be considered a direct competitor, I decided not to include it in my analysis because it doesn’t operate any physical stores. Since Mirror is an established brick-and-mortar brand, I chose to focus my analysis on brands that have been successful both online and offline.

Provisional Personas

Using findings from market research, I identified three target groups to focus on in interviews:

I identified three provisional personas to focus on in interviews: young professionals, millennials, and working mothers.

Primary Research

User Interviews

I went to local coffee shops to interview people within these personas about their shopping experiences. My objective was to learn more about their goals, needs, motivations, and frustrations.

  • Number of participants: 5
  • Gender: All female
  • Age: 20-45
  • Location of interviews: Oakland and San Francisco

I found that participants associated shopping online with convenience and that finding exactly what they were looking for (be it size, style, or price) was often a challenge. When I asked about fantastic shopping experiences, participants mentioned having positive impressions of personalization options (narrowing down product listings to show only their desired size, style, or price range) and of customer service representatives who helped them find what they were looking for. The results here match with what I found in market research and I was able to gain a deeper understanding of why users want to have personalized shopping experiences.

Synthesis: Empathy Map

I recorded users' thoughts, feelings, gains, and pains in an empathy map, and noted patterns across all five users' experiences. View the full empathy map on Whimsical to see the observations and patterns in detail.

Empathy mapping process
My empathy map process on Whimsical.co

I highlighted three of the patterns as my primary research insights, which I then translated into user needs that I would be designing for.

Phase 2: Define

Process: User Persona • Feature Roadmap & UI Requirements • Information Architecture (Sitemap, User Flow, Task Flow)

User Persona

Using those research insights and user needs, I developed a persona as a representation of the website’s target audience – Jenny, a young professional. The goals, needs, frustrations and motivations were all derived from research insights.

This persona serves as a guideline for the rest of the design process – be it mapping out new features, creating a brand identity, or deciding on icon style for the website's user interface.

Feature Roadmap

To determine which features to prioritize in the website design, I mapped out various features according to how mission-critical they are.

Mirror’s mission is to sell clothing, so the Minimum Viable Product (MVP) for an ecommerce website must be able to showcase and sell products. Thus, the checkout flow and product catalog (and navigation menu, so users can find these pages) were set as first priority. I also included the FAQ/Help pages as Priority 1 because Mirror’s reputation is based on its phenomenal customer service.

User Interface Requirements

To ensure that the website's features are aligned to users' implicit needs, I outlined UI requirements using a user story format:

"As a [new/existing customer], I want to [user task] in order to [user goal/need]."

For example: "As a new user, I want to only see items in my size, so that I can shop efficiently and avoid feeling disappointed."

Then, I identified the user inputs and UI components needed for each user story. In this example, design would include search filters and (eventually, in a later release) a personalized dashboard page when an existing customer logs in to their account.

View the full UI requirements document on Airtable.

Information Architecture

Open card sort

Using an online open card sort activity, I identified categories to use for grouping clothing items in the website's navigation menu: tops, bottoms, sweaters, outerwear (jackets, coats), shoes, and accessories. See the card sort results in detail here.

Sitemap

Next, I created a sitemap and define the content categories.

Mirror website sitemap
The sitemap serves as an overarching blueprint for the website.

It’s important to clearly define the website’s navigational structure before creating any wireframes or designs. Otherwise, the project risks becoming inherently disorganized, running into scope creep, or having illogical navigation – all of which would result in an unpleasant user experience.

User Flow

This user flow walks through the process of landing on Mirror’s website from a Google search, finding a particular item, and purchasing that item. The choices available at the end of the checkout process allow the user to continue to interact with the website, so that engagement with the brand doesn’t stop at purchase.

Task Flow

I took one of the branches from the user flow and outlined a task flow as a way to map out the individual pages that I need to design.

Task flow with all the pages needed for a user to complete a purchase.

Phase 3: ideate

Process: Sketches • Design Patterns • Low-Fidelity Wireframes

Sketches

I sketched some versions of Mirror’s homepage to explore how to layout various types of content, such as featured products and product collections.

Some quick sketches to explore ideas for the homepage.

While sketching each feature/component, I thought about how the content and its placement would help Jenny (our persona) achieve her goals, meet her needs, and avoid her frustrations.

Design Patterns

I looked at several clothing websites for UI patterns. Using those patterns, I was able to determine what to maintain on Mirror’s homepage and areas for innovation. It’s important that designs are based on mental models that users are already accustomed to, so as to minimize their cognitive overload while using a particular website, app, or product.

View my design pattern analysis in detail.

Phase 4: Design

Process: Mid-fidelity Wireframes • Branding & Logo Design • UI Kit • High-Fidelity Wireframes

Mid-Fidelity Wireframes

With these patterns and ideas in mind, I moved onto wireframing in Sketch.

Mid-fidelity wireframes of the homepage, a category page, and a product details page.

I also created a set of mid-fidelity mockups of the homepage and product page in desktop, tablet, and mobile viewport sizes, since the goal of this project is to design a responsive website that can be accessed on a variety of devices.

Responsive wireframes for the homepage and a product details page (mid-fidelity).

Before adding detailed content and color, I put together a brand style tile with an updated logo in order to set guidelines for color and imagery.

Branding & Logo Design

I started by listing out adjectives that describe Mirror’s image and searched for colors, imagery, typography, and logo designs that conveyed those ideas.

After sketching out some logo designs, I digitized a few. I chose the final logo based on scalability, uniqueness, versatility (e.g. if Mirror expands into a lifestyle brand), and adherence to Mirror’s brand concept.

The final logo design
The final logo design
Logo Meaning

The symbol is derived from an abstracted section of the wordmark's “m” – the rising curve of its second shoulder.

Though most clothing brands only utilize a wordmark in their branding (and using this particular logo would risk “breaking” users’ mental model of typical clothing brands), I chose to include the symbol because it helps set Mirror’s logo apart in a sea of clothing brand logos. And, who knows? With Mirror’s current global reach, it could easily become more than just a clothing brand. This logo provides that versatility.

With the logo design finalized, I created a brand style tile with images, typography, and a color palette. The colors reflect Mirror’s brand image: modern, fresh, neutral.

Mirror's brand style tile


UI Kit

I created a UI kit using the brand style tile to maintain consistency between the brand and the website while designing the rest of the UI.

UI kit with guidelines for colors, fonts, UI components, etc.

High-Fidelity Responsive Wireframes

With the branding and style set, I moved on to designing the high-fidelity responsive wireframes for the homepage and product page.

High-fidelity Responsive Wireframes
These wireframes show how content layout changes between different device sizes.

Phase 5: Prototype

Process: High-Fidelity InVision Prototype • Usability Test • Synthesis (Affinity Map)

High-Fidelity InVision Prototype

In preparation for usability testing, I created high-fidelity wireframes for the rest of the task flow – purchasing a shirt on the website. I focused on main screens and included some simple interactive elements (e.g. button hover states, an “added to cart” popup).

Hi-fi prototype screens

Interact with the prototype here.

Usability Test

With my prototype ready for testing, I drafted up a test plan and  recruited participants at local coffee shops. Each person was given two scenarios and asked to complete a series of tasks related to purchasing an item from the website. These tasks were meant to test whether the navigation, flow (order of screens), and content layout was clear. While participants interacted with the prototype, I observed their behavior and thoughts (they were asked to think aloud) to identify strengths and weaknesses of the design.

Summary:

  • Number of participants: 6
  • Age: 20-30
  • Gender: 4 female, 1 male, 1 genderqueer
  • Completion rate: 100%

Affinity Map

I synthesized the test findings using an affinity map, noting patterns and insights – which were translated into specific design improvements. In general, participants praised the website as being easy to use and matching their idea of a “typical” clothing store website.

There were just two points of friction:

  1. 50% of testers couldn’t say definitively if an item was on sale while looking at the product page.
  2. There was a minor design error on checkout page that made the shipping method look as if it were already selected by default.
I translated findings from the usability test into design improvements.

View the full affinity map here.

Revised InVision Prototype

With the recommendations from the affinity map, I revised the product page and shopping bag page to show that the product is on sale. I also fixed the design error on the checkout shipping method page.

Prototype revisions

Demo of the final design

Phase 6: Iterate

Next Steps

Since the prototype is housed in InVision – with assets and designs synced directly from Sketch – handoff to developers is straightforward. The developer/engineering team can simply open InVision’s Inspect tool to view design specs, download assets, etc. The comment feature in InVision also makes it easy for all stakeholders to quickly note if something needs to be adjusted, etc.

With the core screens designed and prototyped, we can repeat the design and testing process with additional pages and features. It’s also important to revisit our UI requirements and feature roadmap, to ensure that we’re designing at the intersection of business and user goals, while being aware of technical and human resource constraints for each project.

Reflection

Since this was my first UX design project, I dedicated the majority of my time to learning each tool and understanding the process. I gathered key takeaways from each step of the process, so that future projects can be more streamlined:

  • I’m an academic at heart and I thoroughly enjoy research, but this particular process felt arduous and confusing. Despite the phase being only a week long, I spent around 50 hours on it because I had difficulty gauging how deep to go with my interview questions. In retrospect, my perfectionism kept me from presenting rough drafts of my research plan to my peers, which was probably what I needed to gain clarity.
  • Moving forward, I’m working on letting go of that perfectionism and presenting more of my drafts, sketches, and rough ideas – not just the pixel-perfect finished work. :)
Let's build something together

Interested in working together? Drop me a line – I'd love to hear from you.
I'm currently available for consulting on UX design and Webflow projects.

SAY HELLO