Despite their busy schedule, in
Milk and Honey is a student run boba shop serving more than 5000 students. As a user myself, I observed a problem space that is cutting the business 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
Milk and Honey Customer Line
Here are some ways we improved the user experience:
After implementing the app, average wait time decreased 77% from 30 to 7 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.
I worked closely with my team over the course of 12 weeks. This diagram is a snapshot of the process I followed. Read the full detailed process below.
First, I needed a better understanding of the users, their needs, and the current Milk and Honey ordering system.
After conducing stakeholder interviews, here are the top 2 pain points
Users uses GoogleSheet to track order and they are not notified when drinks are ready.
Currently vendors call out names when drinks are ready. Customers oftentimes miss the call.
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 3 different user personas to ensure our design truly reflect the diverse student body's needs. .
With user insights and a re-defined problem statement in hand, it was time to come up with solutions and validate them.
We conducted a feasiblity study and found that online payment is not feasible so we pivoted to a new solution. Changes include capping number of orders per person and implementing registration security to students of the Claremont Colleges.
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.
After meeting with stakeholders, we redefined 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.
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 to maintain a unified design voice across the devices so that the M&H team can reuse the components after the project is complete.
With user insights and a re-defined problem statement in hand, it was time to come up with solutions and validate them.
I built a high-fidelity prototype to validate initial design solution. I wanted to know if the redesign would intergrate with current vendor workflow.
Ella is extremely busy college student. How might she get boba during the busy midterm season? She signs up, places an order online, and tracks order status as she waits. When the order is ready, she pays and picks up her drink.
Users sign up with their Claremont Colleges email to prevents people from ordering and not showing up to pay for drinks. 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.
As a busy college student, Ella can place an order when she is studying in the library and come pick up the drink when ready. This allows students to still purchase from M&H without sacrificing their study time.
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 to look 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.
We our currently fixing the technical issues found during our second usability test. Here are our next steps:
