Menu
Users with dietary concerns feel it’s unsafe and more difficult to order food online.
Design a responsive site that is catered to modifying based on dietary concerns.
Cacao Tree’s new site creates a user experience focused on users safely ordering food for their dietary concern or preferences allowing them to feel more confident when ordering from Cacao Tree Cafe.
In 2010, Cacao Tree opened up its location in downtown Royal Oak, Michigan. Since then, online ordering has grown to be around 60% of Cacao Tree’s total sales, which has made them want to optimize their branding and online ordering experience.
Throughout their 12 years of being open, they have built a very loyal customer base of food-conscious individuals by providing high quality food, local ingredients, and menu transparency. Whether their customers are nondairy, vegetarian, vegan, have food intolerances or severe food allergies, each customer has very important, yet different goal when it comes to what food they eat or, potentially, how they order it. I wanted to help Cacao Tree improve their online ordering experience by optimizing their responsive site for their main customer base.
The overall goal of my case study was to create a responsive site that’s optimized for Cacao Tree’s main customer personas: food intolerances/allergies, vegetarian, and vegan/nondairy.
An initial survey was sent out to interested participants to see if they met the requirements of the target market before being scheduled for the focus groups.
I looked at similar cafes/competitors and what they do when it comes to the UX/UI of ordering products or food online for health-consciences individuals.
Three focus groups with 3 participants of each food category were conducted to gain a deeper understanding of our research objectives.
Users want to find and purchase a dish that they know meets their consumptions needs and wants
If they don’t have those things on the website, I shouldn’t bother because they won’t take my needs seriously.
– focus group participant
By taking the findings, I created a matrix to identify any patterns seen across the respondents answers. From the patterns, I was able to put together two personas: One Dish Oscar and Plant-Based Penelope
Cacao Tree’s current site did not have a well-structured or clear information hierarchy. I wanted to make sure when ideating my wireframes that I had a clear map of the hierarchy of the website.
Now that I had the entire information hierarchy planned out, I planned out what the main task flow was for the user.
I found that Cacao Tree had one main task – completing an order – and 8 subtasks they want users to accomplish when entering their website.
I like when they have checkboxes to customize the order because they often miss what I say in the comment box.
– focus group participant
After sketching low-fidelity wireframes of multiple ideations of each page, I decided on which to develop into mid-fidelity wireframes.
One I completed all of the mid-fidelity wireframes for the smaller screen (mobile), I went through the same process for desktop. All the while taking similar UI elements and implementing them in a desktop format
I like that the concerns were already listed based on top food allergies. I felt that the business was anticipating my needs and accommodating me and making it easier to order
– usability test participant
Since Cacao Tree hadn’t updated their branding since their opening, they really wanted a revamped look and feel.
From the client, I was given a few keywords they felt described them as well as how they wanted to be percieved by their customers. I took these trigger words and expanded on them to:
From there, I pulled imagery, UI, art, fonts, products, etc. to gather inspiration for each word.
The three circle lines was inspired by the spiritual symbol of harmony with a tree being grown and the center of it all.
Cacao Tree’s typeface is primarily the sans serif Outfit with organic touches of Mostra Muova to show a little more variety and uniqueness which really depicts the brand’s friendliness and inclusion.
Did I mention I love iconography? All the icons were created by yours truly. Outline while inactive and filled when active/pressed, these icons have a minimalistic yet organic look which complements the branding nicely.
Other places need to take note of how beautifully organized and thought-out this was! It would make people with allergies feel a little more at ease when ordering or finding a new place to eat.
– usability test participant
This is where you can really see Cacao Tree Cafe come together. The combination of colors in the background mixed with the iconography and fonts started to feel like a distinct brand. My clients absolutely loved how the branding came together but, more importantly, how much the user experience would improve for their customers.
More importantly, I discovered, in order to best tailor the UX to users with dietary concerns, I would want them to create an account where they could insert their dietary concerns/preferences.
With my high-fidelity wireframes made, I created an interactive prototype in Figma to show and test how the user experience might feel.
Lovely site! I’m a vegan who’d certainly go here. It feels friendly and authentic at the same time, and easy to navigate.
– usability test participant
Overall, the participants showed a lot of excitement for the online care this site showed regarding their dietary concerns/preferences.
When viewing the old homepage, the participant used keywords like informational, text-heavy, traditional, historical, refined, and unorganized. When viewing the new homepage, many of the participants described it as earthy, fresh, community-like, healthy, and clean.
Although my case study has come to a close, I’ll be working with Cacao Tree to bring this product to life. On my end, here’s what the next steps will look like:
While you’re here, feel free to look at some of the other cool projects I’ve been a part of!
