Mirror - Clothing for Everyone

Mirror is a brick and mortar global clothing chain. They decided that it is finally time for them to adapt to the modern digital era. They need a responsive website to establish an online presence and sell clothing. Additionally, they need a new logo.

• This is a speculative project. Mirror is a fictitious company created for educational purposes.

Overview

Empathize

Research Plan

When I initially sat down to start this project I wanted to layout a plan for how I was going to approach the research. Additionally, I needed to set forth some goals to guide my research. These goals were 1) to determine pain points in consumers shopping experiences both online and in person, 2) to determine components that lead to the ideal shopping situation in the eyes of consumers, 3) to determine Mirror’s competitors, their strengths and areas we can improve on, and 4) to define the aspects of a shopping experience most effectively benefit the business to consumer experience. The methodologies I chose to find that information were:

Secondary Research

1. Market Research

2. Competitor Analysis

Primary Research

1. 1-on-1 Interviews

Market Research

In order to gain a better understanding of the clothing industry, I conducted market research. I was looking for information that could indicate pain points or trends in the industry. Here are my findings:

Market

• The fashion market is expected to grow to more than 1.2 billion consumers by 2020.

• Majority of new consumers are in the 16-35 age group.

• from 2018-2019 ecommerce in the fashion industry was up 64 billion dollars.

• China, USA, U.K. and Japan are the leading countries for Ecommerce consumers.

• Up to 43% of shoppers say they were influenced by personalized suggestions.

• For fashion brands, Instagram is the social media platform with the highest number of consumer interactions.

• Focus on private label clothing has led to an increase in apparel sales for companies like Walmart, Target and Amazon.

Trends

• Input from friends, social media and web searches are the top factors that lead a consumer to purchasing an item.

• For fashion brands, Instagram is the social media platform with the highest number of consumer interactions.

• Up to 43% of shoppers say they were influenced by personalized suggestions.

• An item’s fit and price/value are ranked the top 2 priorities in a clothing purchase.

Pain Points

• Expensive or tedious return process.

• Items that don’t fit.

• Long shipping times.

• Expensive clothing items.

Competitor Analysis

After conducting research on the industry, I decided to take a closer look at some direct and indirect competitors of Mirror. Urban Outfitters, ASOS and H&M being direct competitors while Adidas and Amazon were indirect competitors. While conducting this analysis I was looking for strengths that could benefit Mirror and weaknesses to avoid.

1-on-1 Interviews

Through my research I learned some patterns that indicated trends in shoppers and businesses. I gathered 4 participants and asked them about their experiences and preferences of shopping both online and offline. I gathered a few good patterns but if I were to do this again I would have interviewed more users and gathered more data. The interview transcripts can be viewed here.

Empathize

Empathy Map

With the interview notes in hand, I sat down and made digital sticky notes (physical sticky notes work way better) of everything noted during the interview. These were color coded based on participant. I originally organized base on how they applied to the customer but I then reorganized them to show patterns. Initial groupings can be found here.

Insights

1. Customers wanted to receive suggestions based on items they were shopping for 

2. Customers were overwhelmingly concerned about the quality of the products they got from shopping online

3. Most of the concerns relating to cost were directly linked with item quality

4. The shipping process was a major influencer in the quality of the shoppers experience

Persona

After organizing all of the information from the Empathy map, I took the needs and made a persona. I wanted to have a persona that represented the data found in a believable manner. Creating a nurse persona was really applicable to the patterns found and creates an embodiment of the core findings to reference later in designing.

Storyboard

After creating a persona, I went on to create a storyboard. I wanted to highlight a pain point of typical clothing store consumers. This storyboard helped me better understand some of the frustration of a possible Mirror User. Find the storyboard here.

Ideate

Project Goals

Since I had finally created a solid reference point for who a typical user would be, I decided to see how that intermingled with the goals of the business and technical considerations. I used a venn diagram to separate the different needs and considerations. Then I categorized elements that fit into those sections.

Feature Roadmap

Now I was able to sit down and start thinking of some functionality of the website. I categorized the elements based on the necessity of their functionality. This allowed me to prioritize certain elements as I moved forward with the project. The roadmap can be viewed here.

Card Sorting

At this point in the project it was time to start focusing on Information Architecture. To start off I wanted to get a good idea of what categories people are used to when searching for clothing items. To get a good idea of this I did an open card sorting exercise with 6 participants. This helped me narrow down the categorization into 2 main categories; Item Type (pants, shirts, etc…) or Event Type (Casual, Formal, etc…). The document in its entirety can be seen here.

Site Map

I found in card sorting that users leaned pretty heavily into the organizational patterns already exhibited by existing clothing retailers. I utilized the information from the card sorting exercise I created the Site Map. Site map can be viewed here.

Task Flow

For the task diagram I wanted to path out how a common user of the site would go through the process of purchasing an item they wanted from Mirror’s site. I looked through a couple competitor sites to see how the typical path for completing this process goes.

User Flows

Next I decided to broaden the scope of a users interaction with the site and draw up a few user flows. I used the user flow diagrams to delve deeper into the task flow and look into the motivations behind a users actions as they navigate through each step of the process.

Design

Low Fidelity

In the initial phase of creating a design for the homepage for Mirror, I wasn’t sure exactly what direction I wanted to go with the site. To develop a starting point for the direction I wanted to take the site, I sketched three possible lay outs for the home page.

Medium Fidelity Wireframes

When I sat down to convert the low fidelity wireframe to mid fidelity. I wanted to combine the best elements of each version of the home page. I wanted a prominent hero image because research showed that was a common pattern in the industry.

Branding & Logo Design

After completing all of the skeletal level design for the website, it was time to move forward and work on more of the visual aspects. I started by defining my brands attributes which were: modern, neutral, fresh, long lasting and simple. I used these as a base and assembled a Pinterest mood board which helped create a visual direction I wanted to take my project in.

When it came to designing my logo, I wanted to design something that would be easily recognizable. I wanted to make sure I kept it modern, neutral and simple as well. I tried some more geometric options but I wasn’t coming to any designs I liked. I started by sketching a few mock ups and then, after I had a few I liked, I digitized them and iterated upon them.

Another important element I created was the style tile. I wanted a to have a guideline for the visual direction handy when I transitioned to High Fidelity. After I decided on all of the visual direction, I created a UI Kit. This set out examples of all the UI elements and brand decisions to create a guideline encouraging consistency.

High Fidelity Wireframes

While i was designing the home page, I noticed that the reviews weren’t standing out very well. Also upon looking at the home pages of some competitors I realized that there should be a place on the home page for a banner advertising things.

Prototype

High Fidelity Prototype

This prototype took the high fidelity wireframes I had just made and added test functionality to them. I wanted the user to be able to take it from home page to adding an item to cart. Since the company brief highlighted they wanted a good filter system I also incorporated a test to see if the users understood the functionality of the filter system.

Usability Test

Finally, it was time to put my design to the test with some actual users. I began by drafting a Usability Testing Plan. After I had that I sat down and moderated some in-person and some remote usability tests. These were formatted as a thinking out loud usability test so I could hear their thoughts as much as possible. As they used the product I also made observation of their reactions or actions on screen. While I gained some useful insight from this, some of my tasks were formatted in a way that led the user too much and as a result I feel I may have missed out on some useful feedback. The test was done with 5 users, 2 remote and 3 in person.

Affinity Mapping

After the usability testing, I compiled my findings on sticky notes (the real ones this time). I color coded these by user and placed them all on my wall. After I placed them all on my wall I reorganized them into sections. After reorganizing them I took patterns I found and came away with some insights for revisions that needed to be made.

Priority Revisions

These groups dictated some clear fixes I needed to make on my prototype in order to make it function better. On top of that I got some feedback from mentors on some small changes I needed to make. Thanks to the thinking out loud method, I got some feedback about elements I never thought would raise concern.

Insights

1. Some users had difficulty finding sweatpants due to a different categorization expectation.

2. Most users checked the bag icon after adding to cart for confirmation they made the correct selection.

3. User wanted more UI indicators to provide feedback to their actions.

4. Users preferred to use the logo icon to return to the home page.

Redlining

After completing all necessary revisions I needed to do, I compiled all of my deliverables into a redlining document. I wanted to ease the process of handing the design off to a development team. To view the redlining document click here.

Conclusion

The amount of things I learned over the course of this project are almost uncountable. I developed my skills in visual design, learned the ropes of UX and UI and got to gather some experience creating these deliverables and correcting the mistakes I made. I look forward to the next project I get to take on where I can further improve my skills and do better than I did on this.

Next Steps

• Continue to tweak the visual design

• More usability testing if time permits

• Hand off to the development team