Digital Menu
Designing a digital tablet menu for people with dietary restrictions.
Digital menus can offer convenience when ordering at
a restaurant, but that convenience often vanishes for users with dietary restrictions. To improve on this,
I designed a menu that puts these users first.
01
Project Summary
I Was Asked To
Observe for issues and pain points in the usage of kiosks or digital tablet menus in restaurants. Then, design a digital menu interface that focuses on solving one of those issues.
My Observation
Digital menus often do not account for users with allergies or dietary restrictions, by hiding filters and allergy information in difficult to find places or not showing some (or any) ingredients. This is very cumbersome, and negates the speed and convenience a digital menu could otherwise offer over a regular paper menu.
My Solution
Design an example of a digital menu that puts users with dietary restrictions first, by offering easily visible ingredient info, filters, and smart ingredient replacement suggestions.
Project Duration
May - June 2022
(5 weeks)
Course
Deliverables
IMD 363 - Studio Practicum III
User Research
Prototype
My Roles
UI Designer
I created a high-fidelity interactive prototype, iterating on it several times over the course of the design project. This was class project which I used to help me practice my visual and UI design skills, and refine my ideas based on feedback I received at different stages throughout.
UX Researcher
Before jumping into design, I observed the subject matter alongside a team of four. We conducted usability studies of digital menus available in restaurants in our area, and did background research on the market surrounding them. These insights would go on to inform my design decisions.
02
Preliminary Research
The Steps of Service
Before conducting any observation, I did some market research to understand the intended advantages of using a digital menu (such as a tablet or kiosk placed inside a restaurant) to order in-person, as opposed to a typical paper menu. The most important finding was this: if implemented ideally, a digital menu cuts down the steps needed to provide restaurant service nearly by half. This allows for faster and easier service on both the customer and worker side.
However, whether or not this improvement truly occurs depends on how the restaurant implements the digital menu, as well as the customers in question. I set out to understand what could be improved to make the experience quick and convenient for a wider array of users.
03
Usability Research:
Ziosk Tablet
Research Method
In order to understand the advantages and pain points of using a digital menu, I invited a few test users to visit an establishment that used a digital menu - a Red Robin. The digital menu in question was a Ziosk tablet, which consisted of an upright tablet screen with a built-in card reader and receipt printer.
My goal was to obtain insights into the tablet's convenience, as well as how easy it was to use for users with dietary restrictions. I observed the users ordering and paying through the tablet, and also asked them to try to order as if they had dietary restrictions (if they didn't already have them). Afterwards, I interviewed the users about their experience.
Key Findings - The Good
My observation yielded a few important observations. First, the good: payment through the tablet was very quick, leagues quicker than paying through a waiter would be. The ordering process had many options to customize each order, which users were delighted by. Surprisingly, items purchased using the paper menu could also be paid through the digital menu, which was very convenient.
Key Findings - The Bad
However, the ordering process also had some issues. Chief among them was the lack of visibility to the ingredients - finding a full ingredient list was difficult, and one of the test users even gave up before finding it. Allergy information was provided, but only in a dense spreadsheet that the tablet had to connect to the internet to open. The test users spent a considerable amount of time trying to parse the spreadsheet, and then forgot some of the information when they returned to the menu to order, since there was no quick way to switch between the two.
There is no reason that dietary option information couldn't be accessible AND not interfere with the convenience of ordering. With this point in mind, I set out to create a digital menu that would be convenient to order with and put people with dietary restrictions first.
04
Ideation
In order to bring feedback and alternative ideas into the ideation process, I did a round of idea generation with a group of 4 other designers. We each created a basic persona to reference, and then came up with some features that persona might want from a digital menu. Due to my focus on dietary restrictions, I created a persona that would represent users who have them.
Using our 4 personas as a framing device, we each wrote "I want" sentences on index cards. Then. we sorted them into groups based on their subject matter. Of course, not all of these ideas would make it into the prototype, but the exercise served as a good way to generate ideas without immediately dismissing any of them. I took the ideas we came up with that were relevant to my focus forward into my prototyping process.
05
Prototyping solutions
The Idea - Menu Filters
The idea that held the most traction with me was a filtering system where a user could select any combination of dietary restriction filters and only view items in the menu that they would be able to eat. The filtered menu would only include items that fit the selected dietary restrictions, as well as items that could easily be modified to fit them (for example, by requesting no cheese on a sandwich).
I created a wireframe to experiment with including the filtering options on the main screen as buttons or tabs, and to receive feedback on my idea before moving on to prototyping. The overall flow of the system worked nicely, but the system of adding and subtracting filters ended up being a little clunky, which I would later go on to simplify. I also received some suggestions to incorporate suggestions for the user, which I incorporated in the wireframe as well.
Prototyping – The First Pass
My first pass at a high-fidelity prototype stuck pretty closely to the wireframe above. I kept most of the layout the same, except where the limitations of Figma necessitated some minor changes, and added just enough functionality to test the most relevant features. After having a few other designers look through my work, the feedback I received made it clear that my idea was working alright, but only alright. The layout of each menu item could be made more appealing, especially if the filtering tabs didn't take up so much screen space. There was plenty of room for streamlining and making the filtering experience simpler for the user, even if I had already achieved the basic goal of allowing for filtering of the menu using multiple sets of criteria.
Prototyping – The Second Pass
In my second pass at the prototype, I redid the entire thing completely. Besides the issues with the layout and the amount of steps needed to go through the filtering process, I also found myself unhappy with the overall aesthetic, so I redid that, too. In my second prototype, I looked at some similar products for inspiration and rearranged the layout to display the menu items as cards, overhauled the aesthetic to look smoother and cleaner, and moved the dietary filtering options into a tray menu to the left side. I made sure to include an arrow to make it obvious that the menu could be expanded out. This version was met with much more positive feedback, while still fulfilling my initial goal of putting users with dietary restrictions first! Success!
06
What Did I learn?
This project was a wonderful opportunity for me to practice designing a feature targeted at a specific type of user, without compromising the experience of all other types of user. I used quite a bit of Figma for this project, so it was also an exercise in learning the capabilities and limitations of the software. I had to use some clever workarounds to make it seem like interacting with one element was changing another element, as Figma didn't support making that sort of thing happen the intuitive way at the time. Due to the smaller scale and solo nature of this project, I was also able to focus in on the visual design a little more than usual. It was great practice for combining research, rapid prototyping, and more elaborate visually designed prototyping over the course of the entire process.