Menu Creator
I took part in a rapid design exercise. Designers were given a prompt and had three days (evenings after day job) to fashion a UX around a menu creation program.
The Prompt:
“A store manager received an email invitation to log in to this new application. She/He logs in successfully, sees a quick tutorial, and is ready to start creating her/his restaurant menu in this new system.”
User Scenarios
User (person using the tool)
Mike, the owner of a food truck, moves around a lot in order to get the most business at a given brewery or event. It's hard for him to reach customers that aren't directly in front of his truck and finding people to come visit him for take out is next to impossible. Due to the event-like business he often has specials and limited release food options. He’d like to make sure that he has an online menu that he can easily update (maybe even while on his truck) to show updated operating hours, menu items both standard and specialty, and allow for a possible mobile order to be placed.
Customer (Purchaser of goods)
Teri is looking to order dinner for themself and their wife. Their wife is gluten free. It’s a Wednesday night and they want to order dinner to pick up from a food truck that they remember really liking once. They don't know where the food truck is and they don't know if the food truck is operating currently. But they know the name, Swine & Steel.
Output
To solve their user needs, Acme requires:
A digital storefront (to show address info, store hours, etc.)
A menu with special, local menu items and deals. For example, a restaurant in San Jose might offer a new kale salad vs. a restaurant in Houston might offer a new chicken wings dish.
Outcomes
Customer Outcomes
Teri is able to place an order to Mike's food truck, Swine & Steel, and know exactly where and when to pick up the food. The food must still be hot and delivered with all details in which it was placed (gluten free substitutes and all). Mike gets paid and earns a happy customer that he would not have had otherwise. Over the course of the month, orders similar to this allow him to earn an extra xxx money for Acme Services.
Questions going in to the project
Research and Data
Are there any preliminary research artifacts I can leverage?
Do we have any information on our users?
Building this tool for “Mike” is understandable enough, but what about every other demographic? Who else would be using this besides managers?
What data do we have or benchmarks do we have on the current process? (is there a current process?)
Business Questions
Who are the stakeholders in this project besides ACME?
Has Acme asked the question: “I’m solving the user problem of ________ by designing/researching/building ______”
Could this tool help the customer make healthier choices or drive the user (food provider) to add more honest ingredients?
What is the feedback loop? How does the Manager retrieve data from this menu item tool? Is data fetched from the POS? Or should we be in charge of articulating that data?
Benchmarks
I benchmarked known successful menu building tools like Post Mates and ChowNow to find a place to start. I conducting a small interview with a real-world user of these systems as well, my wife.
Bonus: my wife actually runs customer facing and internal facing operations for a series of restaurant groups in the Seattle area. I first consulted her on tools she uses in her day to day. I asked her questions about things that she hates about these pre-existing tools as well as things that make the tools useful for her businesses.
As an exercise, I watched her walk through the creation of one menu item and explain why each step was necessary, as well as spot improvements that she would like to see.
Given more time, I would have consulted her coworkers and other users. as well as fashion together some surveys to capture anecdotes that could help guide my design.
Working backwards from the customer
Always work backwards
Mike - the establishment owner (we’ll call him the User)
Teri - the consumer of the food (we’ll call them the Customer).
To work backward from Teri, I started with the menu experience within the mini site. I asked myself “what kind of menu experience would help them make the best food choices?” If this experience is poor, it wont matter how nice our menu building experience is.
After learning that, I was able to take one step back and ask the question “what information does Mike need to provide in his menu experience to help Teri purchase from him” If his outputs are correct, Teri will be a happy customer.
Menu Wires
To outline the elements within the menu, I mocked up a simple wire of how a menu might be displayed for Teri. This helped me visualize the items that I would need to include for the menu builder.
Elements are based off of a standard digital restaurant menu.
Menu Builder Wires
1 The left rail that houses all information regarding the navigation of different menus that a restaurant has. the user can add new menu items here, as well as reorder, edit, and remove menu items. A filter option is also available for establishments that have a high number of menu items. This filter can query location, ingredients, dietary restrictions etc.
It would be very simple for an establishment to filter all items with beef in them and then replace or edit those items if beef was no longer available.
2 This is for data entry of basic requirements of a menu item. The user can enter the main name of the item, the location it can be found at, imagery, detailed description, ect.
3 This is the area I designated to add in special order information.
4 This area is for all item level ingredients and modifications. I found out later as I fleshed this part out that it was perhaps the most complicated aspect of the menu builder.
Higher fidelity prototype
I built tested my wires with a rough prototype and presented the prototype to my wife(a prospective user - and the only person around at the time)
Based on the feedback I got from the prototype, I started thinking about improvements I could make. As I interviewed my wife while she tested, I found it was important to her to see what the menu would look like to the customer so that she could add or remove detail where necessary.
You can see to the right of the menu builder, there is now a menu preview that updates in real time as the user creates their menu.
High Fidelity Mocks
As the Mocks grew in fidelity, I made sure to add definition to the hierarchy of items on the page. This was done with darker shades for elements that lie in the background of the layout or have to contrast with the white of the foreground.
Based on feedback, I added subtext below H1’s to explain what section of the builder the user is on. I also added a tertiary button style for some of the CTAs. This was in the form of a bolded text button style for “add another portion” etc.
Toggling the Specials item is where the user can define if the menu item is a special item and only available at a specific time or day or a combination of the two.
I fleshed out the menu preview to show exactly what a user might see. I found that as a user built out their menu item it was difficult to know what changes would actually be reflected to the customer menu view.
If this were built out further, I would imagine that area to show the exact view of the menu as the customer would see it on their phone.
According to my initial research and benchmarks, the ingredients section was the most complex part of menu creation for a restaurant. I spent a lot of time adding fidelity to my drop-down menus and alignment of buttons so that the flow of adding ingredients to a menu would be as effortless as possible. Additionally, each ingredient added would auto update the dietary restriction for a given menu item.
I broke it out into three parts:
Main Ingredients, Sides, and Additions
Main Ingredients These would be things directly involved in the menu item. The user gets to add modifiers to each item that can be replaced or “substituted” as restauranteurs call it. This way if a user orders a Chicken taco, the main ingredient can be subbed out for beef.
Sides Users must define primary sides that come with the dish and then define substitutes for each. For example, fries might come standard with your taco, but a customer could sub that for a side salad.
Additions This is super crucial for food like pizza where customers tend to add a lot of items. One could imagine that this area would be where a user would add extra cheese for $2.99.
Deleting the item would remove it from the menu entirely, canceling would remove all progress unsaved, and save would lock in the menu item.
Learnings
I learned a lot building this over the last three days.
For one, I learned that my wife’s job is much more difficult than what she lets on to be.
But most importantly, I learned a lot about form creation and gestalt principles that differ from my average day to day at my job at IMDb. I’m so used to building sites that are a utility for research or information consumption. I seldom get a chance to build out a job place tool that helps people excel in their careers.
