Eat Unbound Dashboard
Helping restaurants serve customers with dietary requirements
8 MINUTE READ
ROLE
UX Research Lead
TIMEFRAME
2 weeks
April 2023
TEAM
Project Manager, UX Lead, UI Lead, UX Research Lead
TOOLS
Figma, Zoom, Trello, Miro, Canva
PROBLEM
A startup that provides menus for people with dietary requirements needs a dashboard to allow local restaurants to update their menus and view customer analytics.
SOLUTION
Making a web application that’s easy to learn and quick to use will help busy restaurants meet the needs of customers with specific diets.
OVERVIEW
Dining out can be complicated
For those with special dietary requirements, the idea of going out to eat can be exhausting. As a vegetarian, I’m familiar with the routine- as soon as someone suggests a few places to eat, I’m immediately comparing menus and counting how many ordering options I’ll have.
Our client for this project was the Founder CEO of Eat Unbound, a startup that provides menus from local restaurants to help people with dietary requirements find where and what they can safely eat.
While the customer-facing side of the platform was already up and running, the CEO needed a dashboard that would give restaurants the control to upload and update their own menus. He wanted a high fidelity prototype he could market to potential investors and restaurants to help them understand his vision.
RESEARCH
How can we get restaurant owners on board with a new platform?
Before meeting with our client for the first time, our team conducted research on Eat Unbound and some of the restaurants listed on the platform, as well as a competitive analysis of similar platforms. We discovered that Eat Unbound is currently focused on restaurants in Arizona, where our client is located.
During the kickoff meeting, our client acknowledged how busy restaurant owners are and emphasized that ease of use would be key for the restaurant-facing side of the platform. He also explained that this side of the platform would create a sense of ownership for restaurants by giving them control over their menus and also increase the trust that individual people have in the customer-facing side of Eat Unbound.
Our team determined that the restaurant-facing dashboard would need to function very similarly to online ordering platforms, so we reached out within our personal networks to interview restaurant owners and managers who had experience maintaining online menus.
The personal contacts we interviewed about maintaining online menus
The UX Lead and I carefully drafted our questions for the interviews, and as Research Lead I conducted 5 of the 7 interviews we secured. Afterwards, we affinity mapped the interview results with the rest of the team.
For the most part, the interviews confirmed our client’s hypothesis that restaurants would want a dashboard that’s easy and quick to use. But we were surprised by how many of the interviews preferred using desktop apps- 80% of those who had a preference chose desktop over mobile.
Before we started interviews, our team thought that restaurants might prefer mobile platforms for convenience. And our first two interviews were actually with food truck owners who both preferred mobile! But when we looked for patterns in the responses, we noticed brick-and-mortar restaurants preferred editing menus on a larger display.
I also realized I was biased in favor of food trucks because I was friends with those owners, whereas our client was focused on brick-and-mortar restaurants. At this point, our team decided to prioritize the desktop version of the dashboard since the time constraints of the project didn’t allow us to develop a mobile version as well.
IDEATION
Our vision for the dashboard
We conducted a design studio workshop as a team to sketch out ideas before beginning wireframes.
A sketch of a possible dashboard layout
A sketch of a possible layout for the menu pages
A sketch of a possible layout for adding a menu item
The main elements we decided to keep from the design studio workshop:
A “Quick Add” section for easy access to the most used functions
Highlighting menu photos throughout the platform rather than being too text heavy, to reflect what the customer will see on their side
A pill design for the dietary restriction tags
Three elements we kept from the design studio workshop
The UX Lead created a site map, and to make the navigation simple for restaurant owners, we decided to create only three main sections aside from the dashboard settings:
Menu Editor
Marketing
Restaurant Profile
User flow for adding a menu item or category
To help determine the focus of our wireframes, she also created a user flow for adding a menu item or category in the dashboard.
Site map
DESIGN
What does efficiency look like?
With the user flow and site map in hand, the UI Lead dove into wireframing in Figma. For the homepage, in addition to the "Quick Add" feature we liked from the design studio workshop, she created sections for Recently Added items and the restaurant's Current Specials. All of these features would help the restaurants accomplish their most common tasks as quickly as possible.
Wireframe of the dashboard homepage
With the Menu Editor, the UI Lead added a sidebar element so that restaurants can edit items without leaving the page. Here too, she was prioritizing efficiency for the restaurant owner’s task.
She also added a “Public View” feature in the sidebar so that the restaurant can see how their menu item looks from the customer’s perspective. Of the people we interviewed who had experience editing menus in ordering platforms, 60% mentioned experiencing glitches and not having their changes reflected on the customer’s side. This feature provides reassurance for the restaurant and saves time by showing them what the customer sees without having to check from an individual account.
Wireframe of the Menu Editor
The UI Lead also designed filters for dietary restrictions that the restaurant can apply while viewing all the items they’ve entered into their menu. It includes a feature to show additional information about the selected dietary restriction to provide a quick reference for the restaurant.
The filtering system was inspired by the customer-facing side of the platform that our client had already developed. Once a customer indicates what dietary restrictions they have, the platform will filter out any item they’re unable to eat.
In addition, the UI Lead created an “Archived Items” section to help prevent restaurants from having to re-enter items removed from the current menu.
Wireframe of the dietary restriction filters within the Menu Editor
At this point, we had a thorough check-in meeting with the client to present him with our work so far, including interview takeaways, sketches from the design studio workshop, and early stage wireframes.
Once the client confirmed we were all on the same page, we moved forward into developing a high fidelity clickable prototype.
PROTOTYPE
Key features for restaurant owners
The prototype was focused on showing the dashboard’s three main tasks:
1. Editing the current special
2. Adding a new item
3. Filtering items by dietary restriction
USABILITY TESTS
What if none of this makes sense
Once we had a clickable prototype, we wanted to check whether the platform was easy to use and that everything within the platform would be interpreted the way we intended.
The UX Lead and I conducted usability tests focused on the prototype’s three main tasks. We maximized relevant insights by reaching out to friends in food service and UX design, conducting sessions with:
A former vegan food truck owner
A UX designer
A UX designer who used to be a restaurant manager!
We received some really helpful feedback during the usability tests. First, a lot of kind compliments about our UI Lead’s design…
We got some great feedback about the ease of use too:
Speaking of ease of use, we had a 100% success rate for all 3 tasks across all 3 participants!
Obviously, it wasn’t just compliments that we got out of usability testing. Our testers gave us a lot of helpful feedback to help us fine tune the details of our prototype.
For example, the vegan participant pointed out that if the vegan dietary label is highlighted, then the vegetarian, egg free, and dairy free labels should all automatically be highlighted. This was a great tip to help save time for the restaurants who are using these labels.
The vegetarian, egg free, and dairy free labels are now automatically highlighted along with the vegan label
One tester pointed out that filling in the dietary labels to highlight them actually ended up having the opposite effect and emphasized the only label that isn’t actually highlighted.
This was a great example of our team maybe being too close to the design, and we needed that outside perspective to kind of zoom out a little bit and see things in a different light.
“Peanut free” is the only label NOT applied to this item but it was probably the first label that caught your eye!
Another participant pointed out that having the dietary labels filled in distracted them from finding the Save button because the color pulled their eye away.
At this point, we started to realize that having filled in versions of the dietary labels might be causing more distractions than the benefits it offered.
That same person also pointed out that we were using filled in dietary tags in the editing sidebar but not on the main part of the page, so it suggested that they served different functions.
This was the kind of observation that made complete sense when the tester pointed it out, but it had never crossed our minds despite how much time we had spent analyzing the design as a team.
They also commented on how the info icon that provides information on the definitions of the dietary labels didn’t catch their eye when it was the same color as the text, so they didn’t realize they could click on it to see more information.
We followed their lead on this and used the highlighting color to separate it from the text.
And finally, the vegan participant pointed out that while most people already know that meat, eggs, and dairy aren’t vegan, there are common cooking ingredients that a lot of people don’t realize aren’t vegan, like honey, gelatin, lard, and ghee.
So we listed those out to provide more quick references without the restaurants having to click on anything for additional information.
After the prototype was updated according to the usability testing results, we presented the entire project to the client. As Research Lead, I explained the secondary research, competitive analysis, user interviews, and usability testing findings to him. He was thrilled by our team's work!
NEXT STEPS
We’re not at the finish line yet
While the prototype is almost all built out, there are a few sections that were not designed due to the time constraint of the project, such as Settings, FAQs, and Help. If we were to continue working on this dashboard later on, we would need to tie up those loose ends before handing off the prototype to the development team.
Until then, we’re excited about the future of the Eat Unbound dashboard!
