Work Collection
MenuTap
MenuTap is a platform intended to help restaurateurs manage their online menus in an extremely seamless process
Client
TappedIn is a Chicago based restaurant marketing and analytics company that serves to bring industry veterans to the digital world and stay connected to their tech-savvy diners
My Role
I was a remote UX Researcher and Designer working on a team of 5 UX Designers. We conducted both broad and specific research, ideated, and finally designed mid-fi wireframes and prototyped the product
Overview
The Challenge
The current process of updating menus across all the different online platforms is tedious and requires a lot of manual labor. Restaurateurs become frustrated with having to learn different platform interfaces while maintaining a business in multiple locations. TappedIn currently takes on the task of managing their client’s menus manually but wants to create a digital space where menus can be updated and shared seamlessly; a platform called MenuTap.
Project Goal: Design a restauranteur-facing interface for an internal tool to take the product from a client-service to a digital product.
Research
Alignment
During the initial connect with the client, we were given a big folder of what our clients already knew so the goal of our first sprint was to align ourselves with the client and find the gaps that this product solves. We received the original user flow and access to a beta version of the platform as seen below:
Exploratory Research
We conducted exploratory research and competitive analysis to understand the market and validate the assumptions given to us by the client. Additionally, we interviewed potential users, TappedIn employees, and some of TappedIn’s partners.
We then condensed all our insights together into master affinity diagrams. This allowed us to identify trends in our user base and helped us prioritize where to concentrate our efforts.
Brainstorming & Ideating
Our focus was on the crucial steps of creating a digital menu and sharing that menu to 3rd party platforms. We thought about ways our less tech-savvy users would take their physical menus and bring them to the digital space. We had three main hurdles to get through:
Creating a Menu
Making sure our design accounted for less tech-savvy users proved to be quite a difficult task but we eventually decided to give users two options. The first being to upload their menus using a template where they could copy data from Word or Excel files and paste them into the appropriate spaces on the template for the platform to read and populate. The second being a manual entry format where the user would fill out their menu into form fields.
Form Fields
Our client had given us access to the beta version of the product. What we learned was that this beta version was mainly a preliminary draft with no interface, just a barebones spreadsheet/database similar to Airtable. This was both a relief and a concern.
After speaking with the developer and how he viewed the capabilities of this tool, we began ideating on what features would be most useful to our user base. The manual entry format would need to be built on top of this grid system and be translated clearly to the user. We discovered through user interviews that many preferred form fields over entering items directly into the grid cells even though the latter would be more time-efficientWe decided that based on the constraints of the beta version and our insights from interviews that a form field pop-up would be an effective way to communicate MenuTap’s functionality to the user base.
Site Organization
Our biggest hurdle was organization. There are some standard menu features but plenty of variability between them. Some restaurants have menus specific to the time of day and others have one giant menu with items spread throughout. Some use terms like modifiers, others use add-ons, and some use both. We had to understand their language and their mental models before we could begin ideating.
Wireframing
From individual screens, we created a mid-fi prototype based on the insights gathered from user testing. We conducted A/B testing on certain features we did not have sufficient preliminary data on such as the display format; pop up vs new screen.
The feedback from this testing revealed that users preferred pop-ups because it gave them context to what they were doing. On a new screen, they may not remember where in the process of creating a menu they are or even where they’re creating the menu item.
Because we are working on a cross-functional team, we spoke with the developer to understand the feasibility of a “Sync” button and we believe that this functionality is very possible as long as MenuTap is granted access to the 3rd party platforms’ APIs.
Additionally, we asked users about the language on our platform as our typical user base is not tech-savvy. Words like “Pre-modifier” or the phrase “Combine with” in the context of modifiers was confusing for users.
This feedback led us to combine all modifiers into one overall heading where users had the freedom to enter modifiers in their own ways.
In order to tackle the variety of menu organization among current restaurant owners, we made the interface as simple and as open as possible.
Usability Testing
In our testing, our goals were to create a product that would save users’ time, that was easy to use, and which users would rate as worth the monetary investment. The KPIs set for this product were to increase the Customer Satisfaction (CSAT) score and gather quantitative feedback of usability using our System Usability Scale (SUS)
Our first round of wireframes yielded an average ease of use rating of 3.5/5
After ideating further and applying the feedback we had received, we created a second round of wireframes and tested those. We found the average ease of use rating (CSAT) of 4.5/5
We presented the prototyped platform as well as our gathered insights from usability testing to the CEO of TappedIn and successfully got his buy-in.
Next Steps
To take this platform to the next level, the team suggested:
Further testing with more restaurateurs to get an even more accurate analysis of what the platform has to offer
Active steps to connect the APIs of MenuTap and the compatible 3rd party platforms.
High-fidelity screens
After the handoff, I decided to take some screens to hi fidelity:
What I Learned
I learned that the process always changes and that projects can be like icebergs; not too bad on first look but massive below the surface. There is no standard process of UX design and being comfortable with knowing that you won’t find all the answers was an adjustment. We followed the trends of diverging and converging knowledge in this project but traditional deliverables did not guide us. We relied heavily on user interviews to get as many insights into the restaurant business as possible. This revealed that what we assumed would be a simple design was actually very complicated and nested. Like Matryoshka dolls, we’d crack through one roadblock only to be met with another slightly smaller one. My team and I worked incredibly well to power through and tackle each roadblock. By the end of the project sprints, we had effectively learned to prioritize items and direct focused attention by delineating tasks by our strengths