Design Process

Empathize

Research

While I had an understanding of who Mirror was based on the brief, there was still a gap between my understanding of the larger online shopping market and Mirror’s customers. Before I could start brainstorming ideas, I needed to gain a better understanding of both through thorough research.

Before diving into my research, I created a research plan to define my research goals and to outline the different methodologies I would use. By doing this, I was able to conduct my research with a clear direction and purpose.

Market Research

I started with conducting market research to get more familiar with the general online shopping market. Through my market research, I was able gather information that helped me understand more deeply what the market trends are and who the market is made up of. Here are some key findings from my research:

• In 2018, 1.8 billion people purchased goods online. In 2019, 1.92 billion. The trend for digital purchases is continuing to grow.

• The most popular online shopping category worldwide is clothing. People are looking online to shop for clothing, which means there is a market for Mirror to enter and an opportunity for growth as a clothing retail company.

• Top 5 reasons consumers shop online:

  • Ability to shop 24/7

  • Ability to compare prices

  • Online sales and better prices

  • To save time

  • Convenience of not going to shops

• The largest percentage of online shoppers is between 18-55 years in 2018

• 95% of online shoppers are between the ages of 18-74. Millennials (those between the ages of 18-34) are slightly underrepresented, accounting for only 30% of the online shopping population. Meanwhile, members of GenX (ages 35-54) account for 34% of the online shopping population, trailed by Boomers (ages 55-74), who are 31% of the online shopping population.

• Men spend 68% more online than women

• Survey conducted in Australia stated that 67% digital window shop for fun, and of those customers, 77% make impulse purchases

• In 2019, e-commerce sales accounted for 14.1% of all retail sales worldwide

• 2015 survey shows that Asian (34%), followed by White and Hispanics (33%) shopped most frequently online. Africans Americans were at 28%

• Gen Z spends more often and similar dollars to other generations

• 81% of Gen Z prefers to shop in stores, and 73% like to discover new products in stores, largely for mental health reasons, according to a new survey by A.T. Kearney.

  • More than half said they are looking for products that are environmentally sustainable, but only 38% said they were willing to pay a premium for them

• A poor online experience has prevented 22% of Gen Z shoppers from making a purchase three to five times in the past year, compared with 38% of millennials

Competitive Analysis

After conducting my market research, I proceeded to analyzing Mirror’s competitors to see what their strengths and weaknesses were. With this analysis, I was able to better understand the different approaches that the brands took in order to address a similar problem, and apply this information to help make the best decisions for Mirror’s product.

User Interviews

While I had a better understanding of the market, Mirror’s competitors, and the general audience, I wanted to dive more deeply into who these people shopping at Mirror are - who exactly are the users and what have their experiences shopping been like? Now it was time to conduct user interviews to start learning more about Mirror’s users.

Four people that fit into the demographics I identified in my market research were interviewed. In these interviews, I focused on asking open-ended questions, keeping the research goals that I set in my research plan in mind:

• Identify what motivates customers to shop online vs. in store

• Discover pain points customers encounter when shopping online/offline

• Determine what factors into a great online shopping experience

• Identify Mirror’s competitors and evaluate strengths and weaknesses

After gathering all the information gained from the interviews, it was now time to do a deeper analysis by using an empathy map.

Empathy Map

I placed all of the notes I took during the interviews and placed them on sticky notes and started to organize them into categories which helped me get a better overview of all information gathered from the different users.

When taking a look at all the notes, patterns started to emerge across the different categories, allowing me to draw key insights from them. The most prominent patterns that I discovered were the following:

And now, what do these patterns mean?

Here are the key insights I drew from these patterns and the users’ needs that I was now able to understand from those insights:

Insights

1. People are motivated to shop when they know they can get a good deal

2. People like to shop online due to its convenience

3. People want to receive their purchases in a timely manner

Storyboard

I now had a solid understanding of the users’ needs, but I wanted to dive more deeply into the users’ overall shopping journey. What motivations and frustrations do these users have during their shopping experience?

Creating this storyboard allowed me to visualize the user’s environment and the motivations and frustrations throughout that experience:

Persona

With a well-rounded understanding of the user’s goals, needs, motivations, and frustrations, we can now meet Sophia, the user persona that was created based off all the insights gained from my research. With this persona, I continued to make sure that I was designing for Sophia throughout the whole process.

Meet Sophia! 😊

Define

Defining the Problems

Based on the synthesis of my research, I began the process of defining the core problems that needed to be solved and laying out the strategy to come up with solutions.

Project Goals

To start this process, I created a venn diagram outlining the different goals between the business, the user, and some technical considerations to keep in mind. Defining and understanding the individual goals, along with the larger, mutual project goals, helped pave a clearer path when making decisions throughout the design process.

Now that I understood the project goals, I started thinking about what kinds of features would be needed to achieve these goals. To help organize and plan these features, I created a feature roadmap.

Feature Roadmap

Looking back on my research findings, I put together a list of different features that Mirror’s website would need and then prioritized them based on what was more essential in order to meet the project goals.

Now that I understood what kinds of features would be key in meeting the project goals, I wanted to start exploring the overall architecture of the of the website. How can we organize, structure, and lay out all the information and features on the website to meet the goal of creating a delightful shopping experience for the users?

Card Sorting

Because Mirror has a large inventory of items, it is important to provide a clear path for the users to navigate through it, in order to provide the best experience, making sure the users can find what they are looking for. I set out to get a better understanding of this by conducting a card sorting.

I conducted an online, open card sort remotely with 10 participants using OptimalSort in order to observe how people naturally organize a variety of clothing items. From this study, I discovered that the most common trend was sorting the items by the type of clothing (tops, bottoms, accessories, etc.). Using this information, I was able to continue to work on the information architecture of Mirror’s new website by creating a site map.

Site Map

Now that I knew how people expected to see the different types of clothing items organized, I also went on to do more research by looking at what the common trends are for navigation on competitors’ websites. Using this information combined, I put together a site map to outline the organization of all the content on Mirror’s website and to show the relationship between the different pages.

Ideate

Ideating Solutions

I knew what kind of content would be on Mirror’s website now based off of the site map, but how will these users be interacting with it? Before I started to work on the design of the website, I wanted to better understand how users would be using Mirror and meeting their goals.

Task Flows

To better understand how users would be completing key tasks on Mirror’s website, I started by creating task flows. Creating these task flows helped me identify the key tasks the users would complete and the key screens that users would be interacting with.

User Flow

Diving deeper, I created a user flow exploring different scenarios for my persona, Sophia. Here I explored the different paths that Sophia would take while interacting with the website and identified the key pages and features that she would interact with.

Sketches & Wireframes

At this point, I started sketching different ideas for the layout of Mirror’s website reflecting Sophia’s needs and also common design patterns that I researched on the web.

After choosing the one that best fit Sophia’s goals and needs, I worked on digital versions of some of the key pages to solidify the layout of the website. I also worked on responsive versions to make sure that the layout is fluid across different devices.

New Branding

Style Tile

Following the logo design, I created a style tile for Mirror’s new branding - making the final decisions on brand elements that would reflect their new identity (color palette, typography, imagery, and the logo).

UI Design

With the new branding for Mirror defined, I started crafting together the visual design of the key website pages based off of the wireframes I had created earlier. Here I focused on how Mirror’s new branding would translate onto their new website and use these designs for the next step - building a prototype to test.

Prototype

Desktop Prototype

Using the pages I designed in Sketch, I used Invision to build a hi-fidelity, limited functionality prototype for usability testing in order to observe how users interact with the site and identify where improvements could be made.

Test

Testing the Design

Before I dove into the testing, I started by creating a test plan to have a clear plan of how testing would be conducted. I then recruited participants and began to test my design to observe how users interact with it and to identify how I could improve the design. Because meeting people in-person was difficult at the time of the project, I conducted a moderated, remote, think aloud usability test with 6 participants who fit the criteria I was looking for.

Usability Testing Overview

Objectives

1. Test if users can easily complete the tasks

2. Observe the different paths users take to complete the same tasks

3. Assess areas of improvement for future iterations of the design

Participants

• 6 participants

• Between 22-50 years old

• Have shopped online before

Affinity Map

In order to analyze the observations made during the usability testing, I used an affinity map with all the observations I had made. This allowed me to uncover patterns across the different participants’ experiences and identify what improvements needed to be made on the prototype.

I first grouped the sticky notes by each participant to get an overview of all the observations made during testing. Then, I grouped them by common patterns that I noticed amongst the participants to draw insights from the information I gathered.

Key Patterns

• 6/6 participants completed the checkout process error-free

• 4/6 participants manually scrolled through all products to find a specific item

• 2/6 participants (2/4 of the manual scrollers) looked for a filter feature but did not notice it*

• 2/6 participants had trouble selecting the product size*

• 3/6 participants ran into some confusion when trying to navigate between full-price and sale items*

*Pains identified during testing

From the pains discovered from the testing, I drew the following insights which helped me identify what design improvements that I should prioritize

Priority Revisions

Using what I learned from the usability testing, I made revisions to my design and created the final prototype.