Holiday Table

Year: 2017
Role: UX Designer
Deliverables: Wireframes, user flows, UI, and interaction guidelines.
Team: Product Manager, Project Manager, Art Director, Visual Designer, Copywriter, and other stakeholders. Development by Springbox.

The final product

Goal: An inspiring path to purchase

The objective was to create an engaging digital counterpart to the Whole Foods Market printed holiday catalog. The key performance indicator was its ability to drive trips to our online store.

Customer journey user flow

Concept After researching examples of online catalogs, we created the concept of “shopping at the dinner table”.

First sketches of how the table, overlays, and articles would look and function

Table Wireframes

Each food item on the table had a corresponding hotspot that when tapped, revealed more information about the product and gave customers the opportunity to purchase it.

Product Overlay Wireframes

When a customer interacted with a hotpsot, an overlay would show a description, CTA to purchase, and links to recipes and articles featuring the product.

Editorial Content Wireframes

Each product overlay contained a link to the online store, as well as links to related editorial content.

Mobile Navigation Challenges

Due to evolving requirements, it was difficult to design an appropriate navigation for the site. At some points in the project, there were only 2 pages on the site; at other points, there were up 6.

I researched mobile navigation solutions and decided that the best course of action was progressively collapsing navigation, rather than a hamburger menu. It was a perfect solution to safeguard us against last-minute navigation additions.

Simplification Based On User Testing

Two questions we had before user testing
1. Do customers prefer navigating with hotspots, or the carousel below the table?
2. Do customers want the ability to collapse the carousel to see the table better?

What we discovered
1. Customers were almost evenly split between the two methods of navigation.
2. Almost none of them collapsed the carousel.

Action taken
We removed the collapse and expand tab above the carousel and kept both navigation methods.

Results

1.9 million
Unique visits from November 1 to December 31, 2017

2:44–4:42 minutes
Average time users spent interacting

34% Referral to the WFM online store

︎ All Projects

Raji Purcell

Online Store