Milk and Honey is a student run boba shop serving more than 5000 students. As an avid customer, I observed a problem that is damaging their revenue.
Currently, customers wait for at least 30-60 min before they can start ordering drinks. In the preliminary survey we sent out, 93% customers see this the most frustrating problem.
Milk and Honey Customer Line
The online solution would provide a way for customers to place order, track order progress, and recieve pick up notifications. I worked as the UX designer and UX researcher.
I worked closely with my team over the course of 12 weeks. The project was kicked off with a stakeholder meeting that included the manager of Milk & Honey to get a better understanding of the business goals and requirements.
First, I needed a better understanding of the users, their needs, and the current Milk and Honey ordering system.
My goal was to learn from customers their expectations, experience, and behaviors when ordering. In order to confirm user pain points, we sent out 100 surveys (recieved 64 responses) and conducted 20 user interviews with customers.
96% of users found waiting to order the problem most frustrating
Vendors current Google Form was chaotic to make changes and wants a simpler structure.
Customer find it difficult to know when their drinks are ready.
Customers leave when they wait for too long, which leads to decreased sales and profit.
Using our insights from the interview, we crafted 2 different customer personas to ensure our design truly reflect the diverse student body's needs. .
After meeting with stakeholders, we defined product goal for 2 user bases.
Allow customers to pre-order, view menu, and track order.
Allow vendors to imput orders, see all orders to be made, mark order/payment status.
With user insights and a re-defined problem statement in hand, it was time to come up with solutions and validate them.
When we initially ideating, we envisioned the app to include online payment. The payment system cannot be online due to it's intergration with College's payment system.
Now that payment is in-person, there are two problems.
1. Customers may have to wait in line to pay
limit for order/person
2. People might order and not show up to pay
Registration Security System to prevent non-students from ordering
Here are our user flows before and after the solution.
Vendors Interface Wireframe
Customers Wireframe
I worked with the team to flesh out the existing off-line brand identity and create a new online identity.
I created the Design System and UI elements to maintain a unified design voice across the devices. Milk and Honey is a small team without an in-house designer, so I made the components easily accessible so that the M&H team can reuse the components after the project is complete.
I built a high-fidelity prototype to validate initial design solution. I wanted to know if the redesign would intergrate with current vendor workflow.
Using insights gained from usability testing and design critiques, I iterated on the wireframes and visual design. The following sections highlight key features iterated.
Users were satisfied with the sign up email verification system. Of the 10 customers tested, all users rated 10/10 for satisfaction with the onboarding.
While our flow was satisfied by users, we recieved feedback on findability of the "sign up" button. We made some visual design on the sign in page to make the sign up button more visible.
I iterated over the flow of the form a couple of times to make sure it was right.
Customization fruit tea was made with more visual cues to help customers visualize the differen flavors where there are no baristas to ask around.
Better time management for students to anticipate when to pick up drinks.
During our usability test, we found more students are willing to shop because of the drinks tracking feature.
We upgraded from current google form feature by providing
The initial flow wasn't flexible enough for users to explore drinks option.
Insteadof exiting current orders, the menu bar allow users to toggle back to menu tolook at more options. This design promotes ease of use and exploration.
After iterating on the prototpe, we worked with developers to release an MVP.
The updated ordering app is easier for placing order, tracking order, and viewing order details for both vendors and customers.
Time on task, ease of use and satisfaction were main key metrics that were measured during the internal review and second usability test. While the design solution had not yet been implemented on the live site at the time this case study was written, I was able to see that the redesign had a positive impact on users.
From our beta release, the average time users takes from ordering to recieving drinks only takes 10 minutes compared to the previous 30 minutes.
I asked users how satisfied they were with the new app. 85% of users rated satisfaction of 7/10, up from 25% compared to the in-person ordering process.
I asked users how easy the new form was to use. Average users are 70% satisfied with the new app, up from 32% compared to the original form.
We our currently fixing the technical issues found during our second usability test. Here are our next steps:
