Project Overview

Background

Mirror is a Global Clothing Chain started back in 1994, now with over 400 stores in 32 different countries. The particular focus of the brand is providing affordable clothing for any occasion.

Challenge

Despite being very successful offline, Mirror does not have any presence online, therefore Mirror has contracted us to expand their reach through the medium of a online e-Commerce site and updated branding.

Solution

  • Design a Logo for the company to bring their branding up to date and better reflect their brand.
  • Design a responsive e-Commerce website that is easy to use and allows for smooth navigation throughout the site.

Project scope

Responsive Website Design, Logo Design, Branding

Tools used

Affinity Designer, Affinity Publisher, Figma, Zeplin

Project role

UX Designer (Research, Visual Design, Interaction Design, User Testing)

View Prototype

Empathize

Secondary Research

Research Plan

In order to remain consistent in the later phases, the Research Plan is crucial in laying the foundations of how I plan to proceed as well as defining the assumptions

Research Goals:

  • Discover key frustrations when shopping online.
  • Define main demographic.
  • Determine main competitors.
  • Determine key strengths and weaknesses of competitors.
  • Discover ways to distinguish Mirror from direct competitors.

Research Assumptions:

  • Largest market/demographic are female millennials.
  • Direct competitors are H&M, Old Navy (Gap), Forever 21, Zara, Abercrombie & Fitch, etc.
  • Ratio of Female to Male consumers is pretty high.
  • Customers shop online for convenience as the main reason.

Research Methodologies

  • Secondary Research (Market Research, Competitive Analysis)
  • Primary Research (User Interviews)

Competitive Analysis

In our competitive analysis, we identified key competitors, taking note of their main strengths and weaknesses particularly in reference to their User Experience and Interface.

Provisional Personas

Based off of our market research, we determined three provisional personas that will help us in empathizing with the general users, as well as determining the demographic of key participants in our User Interviews.

Primary Research

User Interviews

One of our key methods of research is user interviews. By interviewing potential users on their experiences regarding shopping both online and offline, we’re able to further discover critical pieces of information that we might not have considered.

After completing the interview plan, we looked for willing participants that fit our provisional  personas  to interview. Overall, we found 6 participants with a range of 21-49 years of age.

Empathy Map

After conducting the user interviews, we created an empathy map in order to best identify patterns and tendencies of the participants. Through this exercise, we discovered a total of 6 main patterns:

  • Participants usually only shop when necessary.
  • Participants want to be able to try out clothes.
  • Sales are attractive for saving money.
  • Participants want to know how clothes will fit.
  • Availability is a constant annoyance for participants.
  • Information drives decision.

Insights

  • Sales are commonly the initiating factor for shopping.
  • Necessity also drives decision to purchase items.
  • Shoppers want to be confident in the fit of items they purchase.
  • Online shoppers would like to be able to easily compare quality of items they purchase.
  • Online shoppers get frustrated when items are often out of stock.
  • Being able to try on clothes helps with making purchasing decisions.

Needs

  • To find clothes that fit well.
  • To have detailed descriptions of products.
  • To have an accurate representation of products.
  • To have confidence in their purchasing decisions.
  • To find good sales.
  • To be confident that stores will carry what they’re looking for.

Persona

Using the results and  information retrieved from our empathy map, we’re able to create a persona that roughly represents the overall goals, needs, frustrations and motivations. This provides a reference for our future design choices.

Define

Project Goals

Referencing the brief provided to us by Mirror, along with the goals and needs of our persona, we created a venn diagram  of our project goals. Through listing both the User and Business Goals, we are able to find points that align to both goals, thereby establishing priority.

Card Sorting

In order to better define categories and the patterns that users were used to, we ran an open-card sorting using OptimalSort in order to discover those patterns. What we found in our analysis is that for the most part, things were grouped as to be expected with a few variations depending on how people defined certain cards.

Ideate

Feature Roadmap

The Feature Roadmap is great in laying out a path forward. Using the research data as well as the Project Goals, we are able to better flesh out our priorities when it comes to features presented.

Site Map

After the open-card sort, we were able to determine the categories generally required for our site. Using that information, we created a site map in order to create a high-level overview of the e-Commerce website.

Task Flow

To determine exactly what we’re designing, we created a task flow that follows three tasks that succeed each other based off of our Persona’s goals and needs. These task flows will determine the pages I need to design in order to complete the tasks written out. Down below, I’ve provided one of the tasks of my persona, Hana, which is to find a dress for a night out that won’t break the bank.

User Flow

Following the Task Flows, we expanded the flow by adding in potential points of deviation based on choice such as whether the user will filter or continue shopping, etc.

Sketches

Taking the information from my UI Requirements and other deliverables, we first created rough sketches of our Home Page in order to start the process of laying out the design as well as create the pathing for our low-fidelity wireframes.

Prototyping

Desktop Prototype

In the prototyping phase, we created a high-fidelity prototype through the use of Figma and their built-in prototyping functions. Our goal was to place the prototype in front of potential users for in order to further refine our prototype based off of analyzing their actions and feedback during the testing. In order to do so, we created a usability testing plan that laid out the details of the test. The tasks that we had the participants proceed with are as follow:

  • Task #1: Shop for a small black dress
  • Task #2: Find out more about the small black dress
  • Task #3: Add a small black dress to the cart
  • Task #4: Checkout

View Prototype

Testing

Affinity Map

Taking the notes from our usability test, we created an Affinity Map to make sense of, and organize the data into patterns observed.

From our findings, we discovered that there were three crucial pain points:

  • People want to select size first rather than color (size is more important).
  • People tend to add to the bag without making selections.
  • People don’t know if filters have been applied, due to the assumption that the filters are applied automatically.

These pain points led themselves to potential solutions that led to the final revisions for our prototype.

These are the potential solutions that we ended up suggesting, in accordance with the feedback received from the usability test participants. Here, we arranged them in order of priority, based off of impact and cost:

  • Potential Solution #1: Allow for users to select size first.
  • Potential Solution #2: Have the product list automatically update when users check a filter.
  • Potential Solution #3: Make CTA unclickable until all selections have been made.

Priority Revisions

Based off of the potential solutions in response to the discovered pain points, as well as other further feedback, we made our final revisions in order to provide a better user experience as well as modernize many outdated aspects of the design.

Branding

Mood Board

Style Tile

UI Kit

High-Fidelity Wireframes

Desktop

Tablet

Mobile

Reflections & Next Steps

Reflections

This project was definitely a thorough learning process. Prior to working on this, my understanding of what design was and what it entailed was extremely shallow and more so focused on the aspect of Graphic Design. Throughout this project, I learned of the importance of research and user-centered design as well as coming to the understanding of making decisions based off of research. Overall, it was definitely an enjoyable process and I definitely learned more than I bargained for when it comes to UX Design.

Next Steps

  • Moving forward, we’ll continue to make necessary changes as more feedback comes in.
  • Additionally, we are ready to hand off the project to the developer. In our case, we have decided to use Zeplin as our main tool to facilitate the procedure.

Reflections & Next Steps

Reflections

This project was definitely a thorough learning process. Prior to working on this, my understanding of what design was and what it entailed was extremely shallow and more so focused on the aspect of Graphic Design. Throughout this project, I learned of the importance of research and user-centered design as well as coming to the understanding of making decisions based off of research. Overall, it was definitely an enjoyable process and I definitely learned more than I bargained for when it comes to UX Design.

Next Steps

  • Moving forward, we’ll continue to make necessary changes as more feedback comes in.
  • Additionally, we are ready to hand off the project to the developer. In our case, we have decided to use Zeplin as our main tool to facilitate the procedure.