Launched Service
UX/UI Design
cubbi
Customizable team ordering feature for organizations
Launched Service / UX/UI Design
3 Frontend Engineers, 2 Backend Engineers, 1 Product Manager
User Research, UX/UI Design
3 months
Figma, Protopie, Jira
6 months following the introduction of this redesign, we observed a 56% increase in ABV (Average Booking Value).
Furthermore, the revamped menu laid the foundation for many subsequent features including ready-to-go meals, subsidies/coupons, and group orders.
Cubbi fridges are equipped with the latest technology, allowing employees to order meals with the Cubbi app.
Meals are distributed in bulk to the local businesses with free delivery. When it is time for lunch, employees can walk over to the fridge and collect their meals with one tap.
I interviewed 5 users from various companies with different order frequencies. Additionally, I conducted a user survey that yielded 112 responses.
I also engaged with the customer service team to grasp user motivations for utilizing our service and to identify common frustrations during the ordering process.
Observations and insights:
1. Users would like to view the menu first before selecting dates.
2. Ordering multiple days was complicated with a lot of back and forth involved.
3. Modifying or adding delivery days can be a complex process.
Users have to choose delivery dates before accessing the menu. This is very counterintuitive as they prefer to view the menu before committing to an order.
Moreover, when users attempt to modify their selected dates, they are forced to backtrack to the date selector. They would also lose the items already added to their cart.
Users can browse through the menu without having to select delivery days first.
Users can instantly switch between different delivery days and weeks.
Users can easily review and make changes to specific items across multiple days.
Before the ideation process, I explored a few similar applications for inspiration. I wanted to discover ways to present a multi-day menu on a single screen. My main takeaway included:
1. Present the menu directly to users without the need to select dates first.
2. Use tabs to allow toggling between menus for multiple days.
3. Display the calendar on a bottom sheet instead of a separate page.
Drawing inspiration from similar platforms, I integrated the calendar directly into a bottom sheet.
This change allows users to explore the menu before selecting delivery dates. Additionally, the new design enables users to change dates instantly without losing items in their carts.
After examining user data, we discovered that the vast majority of users primarily only place orders for the current or the upcoming week.
I decided to remove the calendar entirely - users can now conveniently swipe between weeks to make their selections.
I formulated a style guide rooted in the brand's guidelines, accentuating bold and vibrant colours while showcasing the Neurial Grotesk typeface which brings a modern and fresh energy.
The initial design only displayed up to three days at once, which sometimes caused users to forget their previous selections and accidentally add multiple items to the same day.
The new design now displays five working days and includes a numbered badge on each date to indicate items added to that specific day.
Due to the lack of information on the original product cards, some users were missing the order cut-off time. To address this issue, I included an "order by [time]" chip to remind users to place their orders on time.
Additionally, I incorporated ratings into the card layout to enhance transparency and foster trust with our customers.
I translated the wireframes into high-fidelity mockups while following the style guide, visually mapping out the process of placing a multi-day order.
After creating a high-fidelity prototype of the menu flows, I carried out a usability test with 10 participants to assess the user experience of the following tasks:
1. Locating specific items on the menu
2. Scheduling items for multiple days and weeks
3. Completing the checkout process for orders spanning multiple days
⚠️ 2 out of 10 participants found the buttons difficult to click, suggesting potential usability concerns.
🔍 3 out of 10 users wished there was a search feature and/or an easier method to locate products beyond manual scrolling.
🛒 2 out of 10 participants took some extra time to locate the cart for checkout.
In response to these issues, I implemented the following improvements to enhance the overall user experience:
In response to users' feedback regarding difficulties with reading the menu and clicking the buttons, I increased the size of the fonts and buttons.
After adding items to their cart, some users were uncertain about where to click. Therefore, I improved cart visibility to provide a more familiar checkout experience.
The primary ordering flow enables users to browse the menu for different days and check out multi-day orders at once.
Based on user feedback collected over time, I continued to iterate on the project and implement new features:
The search and filtering functions help users find the items they want and accommodate various dietary preferences and allergies.
Organizing menu items into different categories makes it easier for users to locate their desired dishes.
Users can browse through the menu without having to select delivery days first.
Users can instantly switch between different delivery days and weeks.
Users can effortlessly check and modify selected items across different days.
A subset of users still found the concept of placing multi-day orders unclear. More detailed onboarding instructions could help clarify the concept.
