Whole Foods Market's Website and Design System

Whole Foods Market

2019-2022

Revamping the Marketing UX and visual design of Whole Foods Market's website to align with Modern Organic brand standards and to support the customer’s pre-shop mission.

Whole Foods Market's Website and Design System

Shopping in an Whole Foods store is described as magical, vibrant and inspirational. The online presence however was grim and lacking due to the legacy framework it was hosted on. This made it very difficult build usable, accessible and modular pages to support weekly marketing content. The current site also lacked up-to-date content such as a dynamic sales flyer and customer care topics our customers need when shopping with us.

The Problem

Primary Mission

The current site lacks intuitive ingress points into important content needed for trip planning. Customers top reasons for going to wholefoodsmarket.com is to:

1) browse weekly sales to build a grocery list and save where they can

2) get key information about their store and what the products they offer

3) learn about their Prime benefits at Whole Foods

4) become inspired by recipes and meal ideas

Mobile and Accessibility Standards

60% of the traffic is mobile and the UX was not optimized due to the lack of responsive grids and layouts. Many of the pages and interactions were not compliant with AA accessibility guidelines.

Outdated Look & Feel

There was a desperate need to explore and refine the distinct expression of the Whole Foods brand on our digital platforms. We aimed to leverage the Modern Organic brand aesthetic created for in-store to create synergy between platforms and carefully deviated when necessary.

No items found.

I met with key stakeholders from Product, Engineering and Business to present key findings from user testing so we could align on a differentiated storefront. I showcased the pros and cons of each approach and we collectively aligned on a differentiated storefront. This ensures:

No cart conflict when checking out separately
No confusion between fulfillment promises
Clear and logical ingress and egress points that enables customers to orient themselves
Alignment with customers primary mission to order catering
Browse, search and filtering UX is for the catering menu only

Through a mix of user testing and generative research, we uncovered the distinct needs of the catering customer. The insights compelled us to re-work the project plan and allow more time for up-front discovery work. Now the real work begins...

Flow 2: Meals planned to perfection

Audience: Families, Culinary Enthusiasts

This second concept sets out to provide our avid planners with a tool that makes them super shoppers. When we reduce the time from planning, we can focus on building satisfaction. Shopping for groceries becomes more delightful when focusing on the food you love. These screens focus on the mobile app experience in which we focused on reducing the friction our customers experience as they plan their meals for the week. Building your meal plan translates into building your cart at the same time. Build your own bundle too!

After some rapid and informal research, it became evident that customers in the meal planner group enjoy creating weekly meal plans, even specifying days when they don't require meals. These plans are usually crafted based on the ingredients in their fridge and pantry, inspiration from recipes or favorites, and family preferences.

Projects insights

The eCommerce project is an exciting venture that aims to revolutionize the online shopping experience. As a UI designer, my role is to create a visually stunning and user-friendly interface that captivates users and enhances their interaction with the platform. Through careful consideration of color schemes, typography, and layout, I will craft an intuitive design that seamlessly guides customers through the shopping process. By focusing on aesthetic appeal and usability, the eCommerce project will provide an enjoyable and efficient online shopping journey for users, ultimately leading to increased customer satisfaction and conversion rates.

Flow 3: All of your favorites, automated

Audience: Single professionals, dual-income households

Looking further into the future, can we leverage what we know about our customers to create an intelligent and personalized shopping experience that can do the shopping for you? We want to allow for full customization and control for those who want it, or no work at all. Either way, groceries show up every week. Think automated meal plans or an auto-generated cart.

No items found.

Flow 3: All of your favorites, automated

Audience: Single professionals, dual-income households

Basil Design System

Taking on the overhaul of the website necessitated the creation of a new digital design language system. This system is designed to embody and reflect the brand essence, conveying organic, intuitive and welcoming. In technical terms, it needs to be extensible, accessible, and reusable

“The Whole Foods Market website should be Disneyland for food lovers. It should inspire the senses, spark a sense of discovery, encourage people to explore — while conveying a sense of order and ease.”

No items found.

Moderated Concept Testing

Remote Moderated Prototype Evaluation with n=21 customers

Key questions:

What features were users gravitating towards?
What brings them the most hesitation?
How did the site make them feel compared to shopping in-store?
Would they be more likely to use this site or stay on Amazon?

Overwhelming positive feedback proved that customers were interested in the following themes when it comes to shopping for groceries online.
‍
1. Increased Efficiency
2. Inspirational Content and Recommended Items
3. Personalization
4. Brand Recognition

Post Launch

In-store Pickup Location

During store intercepts, customers were not clear where they needed to pick up their order. Store layouts are unique from store to store which makes it difficult to implement a solution across all stores. We worked with Marketing to design clear signage designating where to go after placing the order as well as displaying a map on the confirmation screen.

(OUTCOME and OPPORTUNITIES)

(1-Outcome and Opportunities)

INCREASED ENGAGEMENT

The rollout of the new Whole Foods Market website significantly boosted traffic through the front door. We observed heightened engagement directly on our homepage, with improved accessibility to key pathways through the core navigation and previously hard-to-find content. Customers were able to effortlessly navigate to their desired destinations, leading to a notable decrease in the bounce rate.

‍

Homepage A/B Testing

As we transition towards e-commerce and witness the drive to feature more of Whole Foods ecommerce programs on the site, our objective is to experiment with new placements that prioritize shopping at the forefront.

‍

Site Search

As we prioritize other revenue drivers such as Catering and Shipped To You, we will aim to optimize site search so users can find the product they want and the best way to fulfill it.

(2-Post Launch Iteration)

Product Browse Experience

Shortly after launch, I had the opportunity to redesign our products browsing experience. Understanding that customers have a desire to shop, even though we don't have a pure e-commerce setup on the site, we offer an experience that enables users to explore the products available in their local store.

‍

Authentication via Amazon

Subsequently, I contributed to the launch of account authentication through an Amazon account. With 85% of the customer base having an Amazon account, enabling them to sign in will enable us to tap into their shopping behaviors and progress towards a personalized experience.

‍

Digital Shopping List

The enablement of authentication empowered us to create a customized grocery shopping list powered by Amazon Alexa. Customers can seamlessly add items to their Whole Foods List using their Echo device or by browsing our product experience. They have the flexibility to shop their list using the Whole Foods app in-store or convert the list into a cart for shopping on Amazon.

(3-Project Team)‍