Kopi Bar
PROBLEM DISCOVERY
What is the Problem?
The lack of a streamlined ordering process for people to order from cafes during busy periods, resulting in long wait times and frustrated customers.
User Research
User Interviews
Interviews conducted revealed the significant benefits of implementing a mobile ordering system for cafes, primarily in enhancing the overall customer experience. For those with busy schedules, they find the ability to order in advance beneficial as it helps them to save a significant amount of time and plan ahead better.
For some mobile ordering apps, there are certain aspects lacking, such as:
01
Confusing Navigation
02
Long Ordering Process
03
Lack of Order Tracking
These aspects hinder the user experience and contribute to low customer retention.
Market and Competitive Analysis
Analyzing competitors like Starbucks, Luckin Coffee, and Tim Hortons provided valuable insights into their current mobile ordering processes. By evaluating their strengths and identifying areas for improvement, I uncovered opportunities to enhance user experience.
Competitive Analysis Summary
Overall, each brand offers a distinct user experience tailored to its business model and products. Starbucks excels in functionality with its feature-rich app and strong rewards integration. Luckin Coffee prioritizes efficiency with a streamlined interface and affordability, while Tim Hortons focuses on simplicity, offering essential features for a broad audience. Drawing from these insights, my goal is to create a booking process that balances efficiency and simplicity while enhancing user satisfaction and engagement.
Pain Points
Cafes sometimes have long queues, especially during peak periods, which results in a longer waiting time than usual.
People with busy schedules who still want to order may not be able to do so due to time constraints.
Customers may find it a hassle to order through the app as it might be difficult to figure out the process.
Lack of clear updates on the order can be frustrating for customers who want to be informed on their waiting time.
Improve the mobile ordering experience which allows customers to place orders in advance quickly to save them valuable time and enhance customer satisfaction. This will also result in improved traffic flow and increase orders for the cafe.
UNDERSTANDING TARGET AUDIENCE
User Persona
The main users that usually face some of these issues are categorized into 2 main user personas.
Persona 1
Persona 2
User Flow
The essential steps of the ordering process are placed into a user flow for clarity of the pages and optimizing the ordering flow.
IDEATION PROCESS
Paper Wireframes
With the user flow, I then created paper wireframes that helped me quickly generate different ideas for the each of the pages in the app.
Home page layouts
The idea was to create a home page that combined all the important functions to expedite the ordering process
Having the order button right from the get go will help to reduce the ordering steps
Final homepage layout
Creating various possible layouts and incorporating the most important elements from different ideas helped me to form the final layout that was most suitable.
Digital Wireframes
Home page
The homepage provides access to essential features of the app such as ordering, rewards and promotions, enabling users to easily find the necessary information they need to place their order.
Conducting research on various cafe apps enabled me to understand the most important features and experiment to create a better layout.
Menu page
The Menu page aims to include all the necessary functions for users to view and make their order with ease. By providing the flexibility to switch their order type after selection, users save time without having to go back and forth.
Review order and Collection details page
By providing the estimated time for collection before ordering helps users to plan their time better and avoid longer waiting time.
Design Ideation
I drew inspiration from various cafe apps with a variety of color palettes and fonts to form a suitable design.
I wanted to create a visual that would leave a strong impression, therefore I chose red as the brand color, given it's associated with excitement and energy.
Design Kit
USER TESTING
Usability Testing Round 1
Method:
Moderated usability study
Participants:
5
Time taken:
15 minutes each
Location:
Singapore
Round 1 Findings
Main functions on the home page can be better positioned to be more easily accessible to users
Users need a clearer way to switch between pick-up now or schedule in advance
Drop down function for changing location can be made more visible
Design Iterations Round 1
Order page
Home page
THE SOLUTION
Initial mockups
Ordering process
The ordering process aims for efficiency by allowing to start on the homepage, followed by selection of the store and then the menu. By having the ability to switch from pick-up to scheduling in advance throughout the pages, users that changed their mind can switch easily without the hassle of going back.
Homepage
Location search
Pick-up order
Item customization
Review Order
Order confirmation
Switching to Schedule in Advance order
Pick-up order
Selection page
Timing selection
Schedule in Advance
USER TESTING
Usability Testing Round 2
A second usability test was conducted to validate the newly added features as well as the changes made from round 1.
Method:
Moderated usability study
Participants:
5
Time taken:
20 minutes each
Location:
Singapore
Round 2 Findings
Improve clarity of 'Switch to Schedule in Advance' option and menu layout
Menu page can be improved with an option to highlight favorite products
Improve collection details page by providing live updates on the order
Product image and product description on the item customization page is slightly cramped
Time not shown for the schedule in advance option on the menu page
Design Iterations Round 2
Menu page
Collection Details page
Item customization page
Schedule in Advance page
Final Designs
Homepage and location search
Pick-up order, item customization and order history
Switch to Schedule in Advance and timing selection
Review order, select payment method, collection details and profile page
Final Prototype
Impact
By implementing simplicity in the design, the result is an easy to use and efficient ordering process that encourages customers to place their orders through the app, retaining customers who face difficulty ordering in person and driving more sales for the brand.
Consequently, this enables the brand to offer additional benefits through the app to enhance overall customer satisfaction and increase customer retention.
What I Learned
What I learned throughout this design process is the importance of feedback and iteration. There is always room for improvement in the initial designs and feedback is extremely essential in transforming a good design a to great one. By remaining open to new ideas without biases and analyzing them to filter out those that will benefit the users, I’m able to constantly improve my designs and reach better results.