Veggie Grill Online Ordering Experience
Research — UX — Web Design
The Problem
Veggie Grill's mission statement and principles are all about their commitment to being the go-to destination for innovative and delicious vegan food served by a knowledgable staff. However, their online ordering platform did not exactly align with the company's principles. The current state audit immediately revealed a clunky experience that still used the base OLO whitelabel templates. The lack of styling, disjointed experience from the marketing site (the main point of entry), and confusing information architecture made for a poor online ordering flow that resulted in:
- Low Conversion Rate
- High number of order errors
- High total time to place order
The Goal
High Level Goal
Our high level goal was to create a customized web app that is cohesive with the Veggie Grill digital ecosystem while having a considered, seamless, and distinct design that sets it apart from white label ordering apps and delivers on user needs.
Our Approach
- Align visually with the new brand refresh
- Design a userflow that allows for the least amount of friction through the path to purchase
- Deliver on Veggie Grill's unique user needs.
Menu Item Detail Modal
Veggie Grill's Original Menu Page
Overlay modal for changing locations
Research Summary
The team flew to LA for 3 days for introductions and user research. At this point, there was a chance that we wouldn't be able to do user testing, so I set out with the goal to get as much information as I needed about not just usability, but also users relationship with Veggie Grill and what they want out of the Veggie Grill experience.
Stakeholder Interview Insights
- Most of Veggie Grill's target audience are not vegan, they are "Veggie+", a term coined by Veggie Grill and used to describe those who eat meat but are seeking to add more veggies to their diet
- Veggie Grill has a high number of guests with allergies/dietary restrictions
- Employees must be very knowledgable of the complex menu
- Veggie Grill has a high number of repeat customers who travel far to visit one of their restaurants
Field Research Insights
- Novice customers like knowing what's popular and asking employees for recommendations
- When asked, all interviewees described Veggie Grill as "convenient"
- Customers usually highly customize their meals
- It's hard for employees to keep up with the ever-changing menu
- Customers love how knowledgable the staff is
- In addition to in-store orders, employees are also handling Pickup, Grubhub, and Postmates at the same time
Competitive Analysis Insights
- Strong content lends itself heavily to a more engaging experience
- With the existance of several 3rd party online ordering apps, consistency and cohesion will strengthen the holistic experience
- There is a huge opportunity to integrate nutrition and dietary information in a way that no one else is doing
How Might We...?
Only a fraction of Veggie Grill's customers have a high knowlege of vegan food, which means most customers will not be very familar with the menu and will be be seeking some sort of guidance when making their choice.
Most users, especially younger ones, are used to the frictionless experience of other apps. With every interviewee calling Veggie Grill "convenient", it is important that we bring this into the digital experience as well. Applying certain analogous design patterns ensure that users have an easier time navigating through the modification and purchase flow.
Veggie Grill has a higher-than-average number of picky eaters that frequent their restaurants. This system has to be able to handle a high level of customizations and none at all.
How might we provide an informative experience, akin to in-store?
Only a fraction of Veggie Grill's customers have a high knowlege of vegan food, which means most customers will not be very familar with the menu and will be be seeking some sort of guidance when making their choice.
How might we make this a seamless experience that stands out from peers and competitors?
Most users, especially younger ones, are used to the frictionless experience of other apps. With every interviewee calling Veggie Grill "convenient", it is important that we bring this into the digital experience as well. Applying certain analogous design patterns ensure that users have an easier time navigating through the modification and purchase flow.
How might we create a flexible ordering flow that works for everyone?
Veggie Grill has a higher-than-average number of picky eaters that frequent their restaurants. This system has to be able to handle a high level of customizations and none at all.
Personas
After speaking to users, we came up with these 4 personas, and defined an experience that would benefit them the most.
Improved Menu & Modification Structure
Inconsistencies between modifications labels and structures were eliminated and the menu was streamlined to be consistent across platforms.
Inconsistencies between modifications labels and structures were eliminated and the menu was streamlined to be consistent across platforms.
Ingredient Tool Tips
With the average Veggie Grill customer being an ingrequent or first-timer, there are lots of questions around the menu and its ingredients. Special/featured ingredients will feature tool tips to help the customer familiarize themselves.
With the average Veggie Grill customer being an ingrequent or first-timer, there are lots of questions around the menu and its ingredients. Special/featured ingredients will feature tool tips to help the customer familiarize themselves.
Featured Items
Featuring best sellers and highligting popular items aids newcomers in decision making.
Featuring best sellers and highligting popular items aids newcomers in decision making.
Dietary tags
A more robust system of dietary tags per menu item, will aid those customers with special dietary needs.
A more robust system of dietary tags per menu item, will aid those customers with special dietary needs.
Unfortunately, a number of challenges along the way resulted in changes to the design
Strict backend data services
A number of features I wireframeed (dietary tags and tool-tips) were not supported by the OLO backend and would require a customer middle layer of code that was not in scope.
A number of features I wireframeed (dietary tags and tool-tips) were not supported by the OLO backend and would require a customer middle layer of code that was not in scope.
High Flexibility
Veggie Grill was the "guinea pig" for our new Koala platform at Fuzz, requiring it to be highly versatile for reuse, hurting the amount of customization I originally planned for.
Veggie Grill was the "guinea pig" for our new Koala platform at Fuzz, requiring it to be highly versatile for reuse, hurting the amount of customization I originally planned for.
Accelerated Roadmap
The accelerated timeline meant no time for user testing. Because of this, I erred on the side of caution. If I couldn't test with users, didn't want to design something that I wasn't sure of.
The accelerated timeline meant no time for user testing. Because of this, I erred on the side of caution. If I couldn't test with users, didn't want to design something that I wasn't sure of.
The new Veggie Grill site launched earlier this year and is live right now!
Learnings
This being my first official product that has shipped as taught me alot.
This being my first official product that has shipped as taught me alot.
- I learned how flexible the process is. With a variety of deliverables, techniques, and methodologies, you can cater your process to fit your needs. No process is perfect!
What I'd do differently
In the end, all of my grievences could be alleviated if I had more time.
In the end, all of my grievences could be alleviated if I had more time.
- I would have liked more time to test different solutions for the map and modification screens
- During user testing, I wish I would have asked more questions that gave me more insight into a users thoughts, actions, and motivations as they modify a menu item.