Store Finder Redesign

UI/UX Design - Total Wine & More (2020)

Problem

The previous page was unresponsive & customers had a hard time finding store information.  

The previous Store Finder page was built on our older technology, which meant it was unresponsive (causing high operational and maintenance costs). Additionally, some of our NPS* complaints were related to customers' inability to locate stores and see all available TWM stores. 

Hypothesis

By allowing customers to easily find stores near them and see all Total Wine & More stores, we will increase our finding-a-store journey NPS* while driving greater traffic to the stores. Supporting only one responsive store finder page will also reduce operational costs. 

*Net Promoter Score

My Role

• Outlined the project scope & timeline with key stakeholders
• Created the research & user testing strategy
• Collaborated with another designer to create prototypes
• Conducted user tests
• Consolidated and presented testing results
• Documented edge cases with Product
• Collaborated with developers on design implementation through regular rounds of groomings & UX/UI reviews

Previous Store Finder Experience

In addition to being the main unresponsive Store Finder page, we also had a separate desktop-only page with all the stores listed by state in a non-accessible accordion layout.  

Store Finder Page (separate code base for mobile)

All Stores Page (desktop only)

Scope & Deliverables

Project Overview

01   Research

01a Crazy Egg audit (engagement insights)

01b Competitive Analysis / Feature prioritization

02   Wireframes & prototyping

03   User testing & design iterations

03a Round 1: A/B/C 

03b Round 2: Validation

04   Final designs & edge cases

05   Work with developers on execution

06   Live A/B test on production

01 Research

OBSERVATIONS

Feature comparison

The ability to search a ZIP code or specific location was a consistent key feature among the competitors analyzed. A responsive interaction map was also very common. Search results cross-link users to Store Details pages. The option to "view all stores" at once was rarely seen... though we know this is a specific pain point with our TWM customers. 

RECOMMENDATION #1

Make the search field clear & easy to understand

This should be the primary action of the page - as this action will provide the most accurate and relevant store results. 

RECOMMENDATION #2

Include a map on both desktop & mobile

Provide either a full map with the list below, or the ability to toggle to the map preview. This appears to be a common expected feature. 

RECOMMENDATION #3

Display additional content & browse paths

Browsing paths as well as other merchandized content can help guide the user into a shopping journey or educate them on our store features if they are unfamiliar. 

02 Wireframes &

03 User Testing Results

Round 01

Usertesting.com

A/B/C test to determine the overall page structure

• 20 total responses for Control vs. Option B
• 20 total responses for Control vs. Option C
• We asked users to rate the likelihood of them interacting with different features on the pages
• We also included questions asking the user to rate the ease of difficulty after a series of task completions. 

Control A

Option B

Option C

RECOMMENDATION #1

Reduce the initial search radius for results (in miles)

Each prototype matched the control with a 200-mile default search radius. Users said this was far too large a search radius to be useful. You would basically see the entire north half of the east coast, and they weren't anticipating driving that far for alcohol. 

RECOMMENDATION #2

Tab structure to toggle between search and browse-all

The majority of people primarily interacted with the search field to find locations. When it came to "browse all," hardly anyone noticed it on the Control (A), and people were very confused by it on Option (C). The tabs were the most intuitive. 

RECOMMENDATION #3

Display store content & browsing paths

The control was too empty according to some users - making it feel cheap and outdated. Though some people did not see the additional content, those who did really liked it. The nice images made the company look more professional and legit.

Round 02

Usertesting.com

Validate the new design experience

• 18 total responses 
• We had a series of questions asking the users to rate ease in finding information or completing a task for both mobile and desktop

Search a Location

Browse All Locations by State

RECOMMENDATION #1

Reduce the initial search radius for results even more

In the original test, each prototype matched the control with a 200-mile default search radius. For Round 2, we cut it down to 50 miles. Users still felt that even 50 miles was too far. 

RECOMMENDATION #2

Remove the store image thumbnail on mobile

The store images were nice to have, but not necessary. The images took up too much room on mobile and were too small to provide much value. They did work well on desktop and larger screen sizes. 

RECOMMENDATION #3

Make the state-level fulfillment options more prominent

People really liked having this information and thought it was important. Several users wanted to bump up the prominence to make it easier to see. Site-wide, this kind of information can help with overall session understanding.  

04 Final Mocks

We presented the final prototype to the developers for feedback and input. After some groomings, we made a few more minor changes to the mocks. Once the designs were finalized and approved, we documented all the various edge cases and created annotations. 

Summary

Optimization

The new Store Finder page is responsive & combines both of the previous experiences into one holistic experience.

In addition to being responsive and cutting down operational costs, this new experience will provide much more useful information to the users - including product availability and fulfillment methods. 

Thanks for scrolling! 

2023 Becky Drexler