Mirror Responsive Website

Background

Mirror is a successful brick and mortar brand with over 400 stores around the world, in 32 countries. Mirror started back in 1994 as a clothing store targeting an audience looking to make good quality, yet affordable clothing accessible for all. 


Overview

  • The Project

    Design a responsive webpage that is visually appealing, modern, and minimal, including branding and logo design. As well as taking this company as an established brick and mortar and introducing them as an ecommerce site with a strong presence that appeals to all consumers.

  • Research Objectives

    Identify and clarify existing pain points users face when online shopping. As well as identifying what users enjoy, to add ease of use and an overall streamlined experience. Discover what makes for a reliable and pleasant experience to build loyalty as well as trust to establish repeat customers, in turn also establishing trust with stakeholders and clients.

  • My Role

    User interviews, journey maps, insights and artifacts, wireframes, visual design, interactive prototypes, usability tests, from beginning to end and finishing with the final product.

Research

Secondary Research using competitive analysis.

Individual Interviews with 4-6 participants

Online surveys to cast a wider net.

Research Findings

  • Access

    Many users will delete an infrequently used app off of their phone to make space. They will also immediately remove an app if they find that the sign up time and function is too slow or faulty.

  • Competition

    Most users found the mobile app of other competitors to be frustrating, and mainly use the website, but have built brand loyalty in consistency in other areas.

  • Markets

    More users are shopping online now more than ever. Digital commerce is projected to maintain it’s upward trend with ecommerce becoming the new normal.

  • Social Media Selling

    Social selling via mobile has become the primary retail purchase method with 67% of retail sales coming from mobile and social sites in 2021.

  • In Store Purchases

    In store shopping however has also increased. With things like curbside delivery, in store shopping has advantages that are impossible for ecommerce, for example being able to physically interact with a product as well as the feeling of instant gratification.

  • Growth

    Users are looking for consistency, reliability, and ease. As well as the flexibility of being able to shop online, in store, or a hybrid.

    Looking at consumer spending, its continued rapid trends and transformations from mobile commerce to social selling as well as political motivations can give us a good idea of what priorities and directions we can look to in the future.

 

Insights Gathering

Collected survey responses after the individual interviews as part of the individual interviews to learn more about why and what they enjoy about online shopping.

 

Mapping User Needs to Features

From the individual interviews, I identified unmet user needs, user pain points, and key features users look for as part of their online shopping experience to determine which features drive growth through consistency and recognition.

I had been a decades long, loyal card carrying customer until one single interaction where they shamed me for returning items.
— User response from individual interviews

UX Principles

  • Usability

    Goal is to create a memorable shopping experience simply by being consistent in order to minimize confusion.

  • Inclusivity

    Be accessible to anyone who wants to go through the process and ease of use of being able to access every interaction and function of the website.

  • Simplicity

    Aim to start with a limited amount of banners, windows, and options to understand how new features impact retention.

Wireframes

  • Responsive Wireframes

    Responsive wireframes built for Desktop, Tablet, and Mobile.

  • Wireframes

    Wireframes based on previous iterations focusing on desktop design. Landing Page, Category Page, Product Page.

  • Product Page

  • Landing Page

    Category Page

    Product Page

After several wireframe iterations focusing on the user feedback from one on one interviews, surveys, and competitive analysis, I then developed my prototypes for testing interviews at an early stage.

Mirror Visual Identity

Minimal. Clean. Modern.

Style Tile & UI Kit

  • Style Tile

  • UI Kit

  • Additional Components & Icons

Outcome

  • Research

    Over the course of three weeks and a total of 10 participants I was able to conduct multiple research methodologies, create Personas and Empathy Maps.

  • Information Architecture

    With the pain points and highlighted details as to what makes for an efficient online shopping experience for the users I was then able to use card sorting, page sketches, and sitemaps to get a better idea of the user journey within the website I was about to create.

  • Interaction Design

    Using task flows, user flows, wireframes, responsive wireframes, and finally a prototype I started to form the final project. Testing the wireframes and prototypes early and often.

  • Design, Iteration & Implementation

    The final stages included creating a high fidelity prototype, usability testing and affinity map. Taking all of this information into the final iteration of the website.

Conclusion

This project from start to finish was fascinating and engaging. The user interviews gave me so much insight into the user experience of something that may seem like a simple task but is so much more. From there I was easily able to create a persona and take that persona with me through the entire process of the project in order to keep consistent with the goals of the client but also to keep consistent with empathy for the user.

The data and research was fascinating as to every detail that goes into creating an “experience” for the customer and I am so thrilled to be a part of a project like this.