The Basics
Ziplunch is a unique meal delivery app that provides free delivery at restaurant at take-out prices by fulfilling aggregate orders. Ziplunch staff were manually placing orders with restaurants after receiving orders from their customers. That was not scalable and challenging to manage. Ziplunch needed an automated, administrative portal that would allow bulk orders to be placed and fulfilled with ease.
[
Goal: Improve the user experience of the restaurant owner and Ziplunch staff by designing an administrative portal that gives restaurant owners the ability to manage their orders, menus and schedules.
]
My Design Process
1. Empathize
What we wanted to know
- Target Audience
- Lead Competitors
- Market Trends
- Opportunities?Gaps
When Ziplunch came to us, it was evident that they had done their research. They knew who they were as a company and a vague idea of what they needed from us. We conducted a number of user interviews, compiled competitive analyses, conducted a workshop on feature prioritization to understand what was needed. All of which brought us great insight.
Let's hear from users
Ziplunch provided contact information of various Subject Matter Experts for our team to interview. As the result of a global pandemic, interviews were facilitated through Zoom. I wanted to know anything and everything about the positive and negative interactions that restaurant owners and managers had experienced with food delivery companies.
“What I want most in a meal delivery app is good user interface. It is very important because it has to be something that my staff can use. My staff uses all different levels of technology. Some are okay with technology, some proficient and some have no idea what they’re doing. It needs to be intuitive”
-John, Restaurant owner
“It is very important for us to be able to manage our own inventory and our own menu.”
-Jeff, Restaurant Owner
What we found out
- Users need to be able to manage their own inventory, menus, schedules and orders.
- Users want orders to be the primary focus, with an emphasis on the orders for current and upcoming days.
- Users want delivery drivers to be provided by Ziplunch.
Aha! Moments
Only one member from the Ziplunch team was able to make our first meeting. Unfortunately he was new to Ziplunch and struggled to answer most of our questions. We proceeded with the limited amount of information we gathered. After a few email exchanges with the team, we realized two things:
1. Ziplunch does not provide their own drivers, meaning restaurant owners need to. While this was an evident pain point for users, it is specific to their business plan and not to the design and layout of their admin portal.
2. Asking the right questions is paramount and it was evident through our findings that some of our questions were geared toward Ziplunch as a whole and could have been better tailored to the functions of the admin portal.
2. Define
Synthesizing our information
After conducting research, our team was ready to take the information we received and start to amalgamate it and make more sense of it.
Affinity Diagram
Coming together as a team to discuss and dissect our finding happened most effectively and efficiently using an affinity diagram.
Persona
Meet John, a foodie with a passion for sharing his craft.
Design Principles
Our design principles came out of our interpretation of Ziplunch’s values
Problem Statement
The restaurant owner wants a clean and simple administrative tool with a supportive onboarding process to best meet their customers needs so that they have access to a larger market and maintain productivity.
3. Ideate
The clock was ticking to get the Ziplunch site up and running. The goal was to create a responsive design as to accommodate those using desk/laptop computers, tablets and mobile devices. To get creativity flowing, I quickly sketched out my ideas using the 6-8-5 exercise. I then moved them to low fidelity wireframes in Figma. Some of these ideas were well executed, while some simply didn’t make the cut.
6-8-5 Sketches
Low Fidelity Wireframes
Information Architecture
After having developed some ideas of my own, our team gathered together to map out some of our divergent concepts using a site map. We parsed out the information architecture by creating a card-sorting activity for the Ziplunch team to complete on Miro.
4. Wireframe & Prototype
Mid Fidelity Wireframes
Now for the exciting part. Our team brought convergent design to mid fidelity with Ziplunch’s desired user flow. For these designs I decided to use a crisp mint green to keep things light. This contrasted well with the color scheme of Ziplunch’s customer-facing side.
Sign up
This is first screen in the sign up sequence during which they are asked a number of questions regarding their restaurant. After reviewing it, Ziplunch can then send them an email to set up their account.
Onboarding
Upon receiving an email from Ziplunch, users can begin the onboarding process and set up their accounts. This includes uploading menus, adding restaurant hours and cutoff time.
Dashboard
The dashboard serves as an overview for restaurant admin to view the most pertinent pieces of information.
Create or Edit Menu
Users can make any changes to an existing menu or create a new one.
View and change restaurant schedule
If there are changes to the restaurants schedule such as holiday hours, closures or large parties, users can makes those changes in the schedules tab.
Orders
A more complete view of current and upcoming orders can be accessed in the orders tab. Here you can accept new orders and confirm that the order has been fulfilled and delivered.
Another Aha! Moment
I’ve come to understand just how flexible a UX designer must be while moving through this process. So many changes occur on different ends. At this stage, just after testing, we were told that all orders from Ziplunch are aggregate, meaning that they will only be serving this one specific menu item for any and all customers ordering on that specific day. After hearing this, I realized a few things:
1. I must ask better, more probing questions. Just because someone knows everything about a product, doesn’t mean they wont overlook important aspects.
2. I must seek information in more creative ways. Simply asking a stakeholder doesn’t always do the trick. Researching a company on social media and reading business plans will help me get a greater more granular understanding of a company.
5. Test
Usability Testing
We set out to gather data on the effectiveness of our user flow. We wanted to understand how the users experience with the portal matched up with their expectations. The tests allowed us to gathers this data based on several questions we wanted to answer.
- How well could the user navigate the portal?
- Could the user easily understand the layout?
- How intuitive was the flow?
- Where did users find difficulty in navigation?
- Did the user find value in the product?