Looking For Fashion?




Rethinking WholeFoods


Redesigning WholeFoods

A whole new way to shop

As a part of a Visual Design class I took in Fall 2019 of my Masters in Human-Computer Interaction @ UMD, we were tasked with creating a new design language for one of 4 products: NASA, Hulu, New Balance or Whole Foods. This involved redesigning the existing aesthetic as well as developing a new feature within the visual design framework we defined.

The product I chose to work on was Whole Foods.

Why Whole Foods?

I saw an opportunity to change the way people typically shop — through ingredients in their meals & recipes.

I carefully went through the website (including headers, footers — really anything I could find) and tried to glean aspects about the brand that were not as popularly known. From this exercise, I found recipes, meal collections & catering options hidden deep inside the footers of the website.

Furthermore, I also saw that Whole Foods did not do a very good job at highlighting the fresh, organic produce that they so proudly advertise. I wanted to bring all the attention to ingredients, food and recipes.

Defining a strategy

Using their mission statement as a guide , I came up with a strategy that would guide the new look of Whole Foods. This was a good way to understand what they stood for as a brand and find ways to translate it visually.

  1. Environment: WF is committed to the environment which should be reflected in earthy colors, more reminiscent of earth, classic flavors in recipes.
  2. Communities: Should include more personalization and an at-home feel but at the same time remain classy; The interface should appear such that there is nothing between it and the user. Should be bright & cheery.
  3. Highest Quality Natural and Organic: Modern look & feel while still maintaining earthy feel — more lifestyle brand with high quality pictures of fresh produce and food.

Moodboard

The idea behind the moodboard was to create something vibrant and bold yet still staying true to Whole Food’s commitment to the environment and being a quality, organic supermarket.

The color palette was chosen keeping in mind earthy colors and the rest of the pictures were chosen to emphasize beautiful, natural produce.

Moodboard

Mobile Screens

With mobile, I wanted to:

  • Emphasize the ingredients, associated with each recipe/meal, that can be bought on this app.
  • Make use of a uniform photography style for all photos which was to have pictures of the food/ingredients on top of a plain color background.
  • Changed the typical app navigation by eliminating the hamburger menu and top bar and replacing it with the Whole Foods logo on the top left corner.
  • Make use of the full screen real estate provided by the iPhone X to provide full-length views of the pages to focus all the attention on the vibrancy of food!
Key Screens
You can also interact with my prototype in InVision:

Click here to view the project `Whole Foods Final`

Apple Watch

For the watch , the idea was to create a location-based service & tool.

  • Through the shopping list, ingredients can be searched by aisle number in the store they’re currently in (indicated by the location at the top) and then muted when you’ve found them.
  • The WF Card was made to enable contactless payments through a Whole Foods credit card (full-scale provided further down)
Key Watch Screens
Click to view the interactive prototype in InVision:

Click here to view the project `WF Watch`

Whole Foods Credit Card

The branding was also applied to a credit card — which is tied to the idea of being able to use it on your phone/watch with contactless payments.

Credit Card: Front & Back

Advertising Posters

I created some mockup posters in Photoshop which I envisioned would work as flyers — in-store on large displays or even in print-ads.

Conclusion

This class was the first time I was introduced to the world of branding and visual design and working on this project helped me understand that this field wasn’t as elusive to me as I initially thought.

Being able to use a brand’s mission and values to inform a new design aesthetic, while not grounded in the product’s users, was still based on the idea that it represented what the brand stood for and what it wanted to project to its customers.

If I had to do this all over again:

I would definitely conduct user interviews for the website and understand the pain points of users to inform the feature set and then validate it with a round of usability testing.

Hope you enjoyed viewing my design as much as I enjoyed making it!

Rethinking WholeFoods was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.