Process: Secondary Research | Primary Research | Synthesis

Review the entire research plan here.

Research Goals

At the very beginning of the empathize phase, I outlined some key goals to guide my research. These key goals were to:

• Identify user patterns/behaviors of e-commerce shoppers for direct competitors

• Identify patterns of customers’ in-store shopping habits vs. online shopping habits

• Identify pain points users experience when using other competitors’ e-commerce sites

Market Research

My first step was to conduct market research to better understand the clothing industry and its e-commerce trends. The following are main insights uncovered from market research:

• The number one reason people shop online is the convenience of being able to shop 24/7

• Young consumers prefer to shop without leaving home, they enjoy online shopping and also seek security during shopping online

• 30% of consumers say they would rather buy from a website they’ve bought from previously

• 81% of consumers trust the advice of family and friends over businesses

• In 2018, smartphones accounted for 61% of retail site visits worldwide

• Generation X shop more online than Baby Boomers and Millennials

Competitive Analysis

Once I better understood the overall industry, I went on to conduct competitive analysis to compare competitors’ strengths, weaknesses, customers’ goals, and customers’ pain points.

Interviews

I then created three provisional personas based on the demographic information that I uncovered from market research. This helped me to identify participants for my user interviews.

I arranged 1-on-1 interviews with five individuals who were within the range of the target demographic. I asked open ended questions about their experiences shopping online and in stores to help me uncover their needs and frustrations while shopping for clothing online. (See interview debrief here.)

Empathy Map

After the interviews, I created an empathy map that allowed me to synthesize the information I’d gathered in my interviews. I gathered the following insights and user needs that would guide the design of Mirror’s website.

1. Users want to look good in the clothes that they purchase online, and before feeling comfortable committing to purchase they need to know clothes will fit.

2. Users want shopping to be a quick process as they need to save valuable time.

3. Users want to feel like they are getting a good deal and need to find quality clothing at a fair price.

I then used those needs and insights, as well as other information I uncovered during research, to create a user persona. This persona served as a model for the rest of the design process and guided every decision.

Persona

UI Requirements

In order to make certain that the site’s features meet the users’ needs, I outlined the UI requirements.

Sitemap

Next, I created a sitemap to organize the site’s content categories based on the features I listed as requirements and the data I’d gathered from the card sort. Taking this step ensured that the navigation would be simple and the site would be easy to use. This was one of the project’s requirements in the high level design goals and objectives.

Process: Low Fidelity Sketches | Mid-Fidelity Wireframes | High Fidelity Wireframes | Branding & Logo Design

Sketches

Once I had a clear product vision and roadmap established, I began the ideation phase with sketches of the Mirror homepage. In my sketches, I followed design patterns from other clothing e-commerce sites to help keep the design simple and easy to navigate, since efficiency is one of Megan’s (our persona) main goals. I also considered Megan’s need for quality clothes at a fair price in thinking through adding sale information to the page.

Mid-Fidelity Wireframes

After careful consideration of the best features from the hand-drawn wireframes, I then created digital, mid-fidelity responsive wireframes of the homepage and a product details page. In addition, I created mid-fidelity desktop wireframes for a search dropdown overlay, a category page, as well as pages to navigate through the checkout process. This helped me to plan out the page’s visual hierarchy, spacing, and flow before adding in details and product images. See annotations for my homepage wireframe here.

Logo and Branding

I started by defining Mirror’s brand attributes: Cozy, Warm, Comfortable, Familiar, and Casual. Then, I created a mood board on Pinterest so that I could hone in on the visual direction for this project. Using the brand attributes, I created a logo that fit the overall brand message and was simple, yet memorable. Then, I created a brand style tile that outlined the site’s color palette, type, and imagery. In addition, I created a UI kit in order to maintain consistency between the brand and the site while designing the rest of the UI.

High Fidelity Wireframes

After branding and style were developed, I proceeded to design the high-fidelity responsive wireframes for the homepage and product details page, then prepared desktop wireframes for usability testing.

Prototype

Process: High Fidelity Mockup | InVision Prototype | Usability Testing

High Fidelity Mockup

High-fidelity wireframes for desktop were created to test basic user function in an InVision prototype.

Usability Testing

The goal of testing was to observe users’ ease of use while navigating through the site. I needed to test the effectiveness of the pages’ layout and design in order for the user to complete the desired task. During testing, I documented users’ comments about their experience using the site. I drafted a usability test plan, then gathered some participants at a local craft show. Each person was given a series of tasks to complete related to purchasing a turtleneck sweater. The tasks were meant to test if the navigation, flow, and content layout was clear. I used a think aloud testing method and documented users’ thoughts as they navigated through the tasks which helped me to later analyze strengths and weaknesses of the design.

Iterate

Process: Affinity Map | Priority Revisions | Next Steps

Affinity Map

Using my notes gathered during testing, I synthesized test findings using an affinity map. By doing this, I was able to find the most prominent patterns in user behavior - including their actions, comments, and problems encountered - and identify specific, necessary design improvements.

Priority Revisions

Using my affinity map for guidance, I prioritized revisions for the site and made some changes. The first was to make all images on product details page clickable to zoom in and out so that users can zoom in on four product images, and not just one. Zooming in on images had been the greatest frustration during usability testing. I also decided to add a “filter by category” option to the sweater category page so that users can more easily filter results to find specific products. Finally, I chose to activate the search bar so that users have additional methods to find products.

You can see the additional pages and revisions here.

Next Steps

• Refine the prototype for additional features such as finalizing the checkout process

• Conduct additional usability testing to find areas for improvement

• Finalize UI components and deliverables for developers for hand-off

Conclusion

The process of designing this responsive website has allowed for a more valuable user experience for Mirror customers. By using the process, including research, designing the site, followed by rounds of user tests and iterations, Mirror successfully improved their customers’ experience purchasing products online. This case study has provided valuable insights into current user needs and how to meet them with this responsive site.