coffeego: delivery app
Project Overview: This project was created as a part of the CareerFoundry UI Certification course.
The objective was to design a location-based mobile native delivery app, taking ownership of all stages of the design process, including research, visual design and user testing.
My Role
UX/UI Designer
Timeline
Apr 2022 - May 2022
Tools
Sketch
Adobe XD
About
CoffeeGo is a location-based mobile app designed to provide users with a seamless coffee ordering experience. Whether for pick-up or delivery, the app enables users to browse nearby cafés, place orders efficiently, and track their delivery in real-time.
The primary goal was to design an intuitive, native mobile experience that adheres to both iOS and Material Design guidelines, ensuring optimal usability across Android and iOS platforms.
Objectives
📌 Develop a user-friendly native mobile app optimized for both Android and iOS.
📌 Provide an efficient location-based search for nearby cafés.
📌 Design an intuitive ordering and checkout process.
📌 Implement real-time order tracking for delivery users.
Problem Statement
In fast-paced urban environments, users often struggle with long wait times at coffee shops or inefficient ordering processes.
The challenge was to create a mobile solution that allows users to quickly locate nearby cafés, place orders with ease, and track their coffee deliveries in real-time, all within a streamlined interface.
User Stories
“As a busy professional, I want to quickly find nearby cafés and place a pick-up order, so that I can grab my coffee on the way to work without waiting in line.“
“As a remote worker, I want to have my favorite coffee delivered to my home office, so that I can stay productive without having to leave my workspace.”
Research & User Insights
To better understand user needs, I recruited 7 participants and conducted user interviews. The key insights were:
Users prefer a fast and frictionless ordering experience with minimal steps.
Real-time tracking is essential to reduce uncertainty in delivery times.
A clean and minimalistic UI improves usability and enhances the overall experience.
Secure and varied payment options are crucial for user trust and convenience.
The Design Process1. User flow
I started with creating a user flow for the customer journey through the app. The flow was then translated into sketches to define the layout and core functionalities.
2. Wireframes
3. Usability Tests
After creating a mid-fidelity prototype of the app, I have conducted usability testing. The results from the tests were analysed and used to define design iterations before proceeding with the final high fidelity design.
❤️ What users loved:
Easy navigation: Users enjoyed the easy navigation between the screens. The app felt familiar and everything was where it's expected to be.
Minimalistic feel: Positive feedback on the minimalistic feel of the app, no distractions, each option was easy to find.
The app is intuitive: Users found the app intuitive and easy to navigate.
⚠️ What needs improvement:
‘Set location’ screen: The 'back' button on the screen was not necessary and confusing.
Shopping cart button: The icon was not recognisable enough at the bottom of the screen.
Delivery options: It was not clear which option was selected/active on the Checkout screen.
The 'back' button on this page was not necessary, as the page is displayed directly after entering the app.
The back button was removed completely from the ‘Set location’ page to avoid any confusion.
⚠️ Before
✅ After
⚠️ Before
✅ After
It was not clear from the wireframe which option (delivery / pick up) was selected.
I created an active state for the selected option for easier differentiation.
✅ After
⚠️ Before
The position of the icon was moved at the top right corner of the screen. I have also included an active state.
Users felt the shopping cart icon was not prominent enough at the bottom of the screen.
4. Final Design
The final design follows a minimalistic aesthetic with a bold color palette. The project's design requirements was to follow iOs and Material Design guidelines, therefore no custom fonts were used for the app. SF Pro and SF Pro Text were used for the iOS version of the app, and Roboto for Android.
Login & Location
Users can easily login or sign up for the app and are then redirected to a set location screen. Based on their location, they will be able to see a list of nearby cafes.
Home & Menu
A location-based map displaying nearby cafés. Users can see a list of their favourites or use the search function. On the Menu page, products can be filtered.
Product Page & Shopping Bag
The Product page provides an overview of the product details. Users can customise their drink and add it to the Shopping bag or save it to Favorites.
Users can shop for multiple items and adjust quantity from the Shopping bag.
Checkout & Order Tracking
Returning users can login to their account to complete their purchase, while new customers are provided with an option to sign up.
Once the order has been placed, the delivery process is easily tracked.
Optimised for iOS and Android
Learnings & Conclusion
Key Learnings
📌 User Convenience is Key: A streamlined and efficient ordering process significantly enhances user satisfaction.
📌 Real-Time Tracking is Essential: Users value transparency and live updates on their orders.
📌 Cross-Platform Consistency Matters: Adhering to both iOS and Material Design guidelines ensured a smooth experience for all users.
📌 Iterative Testing is Crucial: Continuous user feedback helped refine the UX and improve usability.
Conclusion
User testing revealed a high level of satisfaction with the intuitive navigation and seamless ordering process. The real-time tracking feature significantly reduced order uncertainty, leading to increased user trust. CoffeeGo successfully delivers a convenient and efficient coffee ordering experience, bridging the gap between users and their favorite cafés.
This case study highlights the importance of user-centric design in mobile app development. By prioritizing efficiency, usability, and aesthetic appeal, CoffeeGo ensures a delightful experience for coffee lovers on the go.
