Overview
Overview
Client:
City Cafe
Product:
Order-before-arrival coffee
Role:
UI designer
“City Cafe is a fictional cafe chain based in London that provides a convenient online coffee ordering experience. Users order online, and their coffee is ready when they arrive.”
“City Cafe is a fictional cafe chain based in London that provides a convenient online coffee ordering experience. Users order online, and their coffee is ready when they arrive.”
Problem
Problem
City Cafe already has the app's flow but needs a UI that is minimalist and usable. They believe downloading an app is a big ask for new customers, and they want to give a satisfying experience in return.
City Cafe already has the app's flow but needs a UI that is minimalist and usable. They believe downloading an app is a big ask for new customers, and they want to give a satisfying experience in return.
Aims
Aims
“The main goal is creating an interface that will work well alongside day-to-day disruptions. Users will likely use the app while commuting, so the UI should inform them of where in the process they are at all times.”
“The main goal is creating an interface that will work well alongside day-to-day disruptions. Users will likely use the app while commuting, so the UI should inform them of where in the process they are at all times.”
🍎 Minimalism
No distracting elements allowed, use a clean Apple-esque UI
👶 Intuitiveness
Don't reinvent the wheel, the app should be usable with minimal focus
🪄 Convenience
Add useful functions that will speed up the process when on the go
Initial solutions
Initial solutions
Pick store
A 2D map layout will be used due to its simplicity and familiarity
Pick store
A 2D map layout will be used due to its simplicity and familiarity
Pick store
A 2D map layout will be used due to its simplicity and familiarity
Pick store
A 2D map layout will be used due to its simplicity and familiarity
Pick store
A 2D map layout will be used due to its simplicity and familiarity
Pick items
Users will pick their desired items from a list, filters will be available
Pick items
Users will pick their desired items from a list, filters will be available
Pick items
Users will pick their desired items from a list, filters will be available
Pick items
Users will pick their desired items from a list, filters will be available
Pick items
Users will pick their desired items from a list, filters will be available
Pick time
Users will see both the 'Read in' and 'Ready at' time to avoid mistakes
Pick time
Users will see both the 'Read in' and 'Ready at' time to avoid mistakes
Pick time
Users will see both the 'Read in' and 'Ready at' time to avoid mistakes
Pick time
Users will see both the 'Read in' and 'Ready at' time to avoid mistakes
Pick time
Users will see both the 'Read in' and 'Ready at' time to avoid mistakes
Payment
Saved payment methods will be available, alongside discounts
Payment
Saved payment methods will be available, alongside discounts
Payment
Saved payment methods will be available, alongside discounts
Payment
Saved payment methods will be available, alongside discounts
Payment
Saved payment methods will be available, alongside discounts
Early UI elements
Early UI elements
Location cards
Compact location cards will mark CIty Cafe shops on the map. Once clicked, the card will expand to reveal details and a CTA button.
Location cards
Compact location cards will mark CIty Cafe shops on the map. Once clicked, the card will expand to reveal details and a CTA button.
Location cards
Compact location cards will mark CIty Cafe shops on the map. Once clicked, the card will expand to reveal details and a CTA button.
Location cards
Compact location cards will mark CIty Cafe shops on the map. Once clicked, the card will expand to reveal details and a CTA button.
Item cards
The item cards show all necessary information while keeping a sleek profile.
Item cards
The item cards show all necessary information while keeping a sleek profile.
Item cards
The item cards show all necessary information while keeping a sleek profile.
Item cards
The item cards show all necessary information while keeping a sleek profile.
Status bar
Users are always informed what stage of the process they are at, and further supported by friendly instructions
Filters
Scrolling can be a pain when trying to catch a bus. The filter option is neatly hidden but readily available at all times
Time selector explorations
Time selector explorations
Button selector
This version was chosen due to its lack of unfamiliarity. The buttons are intuitive to use and it's unlikely that users would book a coffee more than 10 minutes in advance, so their desired time is always just a few taps away.
Dial selector
The pros of this version are delight and the ability to quickly add more time. I didn't pick it because simplicity was a higher priority than fun-factor, but in a real world scenario I would AB test both options and then pick.
UI improvements
UI improvements
Better time selector
Everything is the same, just bigger. Users can now type inside the boxes to quickly add more time, eliminating the downside of this selector.
Better time selector
Everything is the same, just bigger. Users can now type inside the boxes to quickly add more time, eliminating the downside of this selector.
Better time selector
Everything is the same, just bigger. Users can now type inside the boxes to quickly add more time, eliminating the downside of this selector.
Better time selector
Everything is the same, just bigger. Users can now type inside the boxes to quickly add more time, eliminating the downside of this selector.
Larger item cards
Coffee shop menus are not that long, so a grid view only makes sense. It is more readable, scannable and prettier.
Larger item cards
Coffee shop menus are not that long, so a grid view only makes sense. It is more readable, scannable and prettier.
Larger item cards
Coffee shop menus are not that long, so a grid view only makes sense. It is more readable, scannable and prettier.
Larger item cards
Coffee shop menus are not that long, so a grid view only makes sense. It is more readable, scannable and prettier.
Final UI highlights
Final UI highlights
Technical information
I used styles, components and auto layout to create a fully responsive design, ranging from the iPhone SE to the 15 Pro Max. CTA button text is rated AAA according to WCAG contrast standards. Layout uses a 4-column grid and a 4pt spacing system to establish proper hierarchy.
Technical information
I used styles, components and auto layout to create a fully responsive design, ranging from the iPhone SE to the 15 Pro Max. CTA button text is rated AAA according to WCAG contrast standards. Layout uses a 4-column grid and a 4pt spacing system to establish proper hierarchy.
Technical information
I used styles, components and auto layout to create a fully responsive design, ranging from the iPhone SE to the 15 Pro Max. CTA button text is rated AAA according to WCAG contrast standards. Layout uses a 4-column grid and a 4pt spacing system to establish proper hierarchy.
Technical information
I used styles, components and auto layout to create a fully responsive design, ranging from the iPhone SE to the 15 Pro Max. CTA button text is rated AAA according to WCAG contrast standards. Layout uses a 4-column grid and a 4pt spacing system to establish proper hierarchy.
Pick store
The search function allows users to select a shop near their destination in case they are commuting
Having the 'Pick Store' button inside the location card helps prevent errors, since users will be 100% certain which store they are slecting
Pick store
The search function allows users to select a shop near their destination in case they are commuting
Having the 'Pick Store' button inside the location card helps prevent errors, since users will be 100% certain which store they are slecting
Pick store
The search function allows users to select a shop near their destination in case they are commuting
Having the 'Pick Store' button inside the location card helps prevent errors, since users will be 100% certain which store they are slecting
Pick items
The search & filter section meets the newer (and prettier) grid view, giving users plenty of ways to find their desired items
Adding multiple items is an easy process that is kept somewhat hidden, staying true to our goal of simplicity
Pick time
Users can see both ready in (if they know the coffee shop is x minutes away) as well as ready at times (if they know their train arrives at y o'clock)
The confirmation tab below contains all information selected so far, giving users a chance to review it before moving on to the last step
Pick time
Users can see both ready in (if they know the coffee shop is x minutes away) as well as ready at times (if they know their train arrives at y o'clock)
The confirmation tab below contains all information selected so far, giving users a chance to review it before moving on to the last step
Pick time
Users can see both ready in (if they know the coffee shop is x minutes away) as well as ready at times (if they know their train arrives at y o'clock)
The confirmation tab below contains all information selected so far, giving users a chance to review it before moving on to the last step
Payment
Adding payment methods on the go can be a pain, that's why the option to add a new one is available in the payment section
The need for copy-pasting discount codes is also eliminated, with codes syncing from the app's rewards tab
Payment
Adding payment methods on the go can be a pain, that's why the option to add a new one is available in the payment section
The need for copy-pasting discount codes is also eliminated, with codes syncing from the app's rewards tab
Payment
Adding payment methods on the go can be a pain, that's why the option to add a new one is available in the payment section
The need for copy-pasting discount codes is also eliminated, with codes syncing from the app's rewards tab
+More
Other exciting pages are the favourites page (top right), where users can save common orders to speed up the process while on the go
The rewards tab (botom left, 2nd) is where users can see their CC points and any rewards they purchased with them
+More
Other exciting pages are the favourites page (top right), where users can save common orders to speed up the process while on the go
The rewards tab (botom left, 2nd) is where users can see their CC points and any rewards they purchased with them
+More
Other exciting pages are the favourites page (top right), where users can save common orders to speed up the process while on the go
The rewards tab (botom left, 2nd) is where users can see their CC points and any rewards they purchased with them
Conclusion
Conclusion
“The main goal was creating an interface that will work in a distracting environment. Through a minimalist approach and intentionally crafted UI elements, I believe City Cafe's app is fit for the distracted mornings of workers.”
“The main goal was creating an interface that will work in a distracting environment. Through a minimalist approach and intentionally crafted UI elements, I believe City Cafe's app is fit for the distracted mornings of workers.”
🍎 Minimalism
A commuter's morning has enough distractions. Through a utilitarian look and feel. City Cafe's app doesn't add to those
👶 Intuitiveness
Via the use of hierarchy, clear CTAs and a supporting tone of voice, the app doesn't require the user's effort to be used effectively
🪄 Convenience
Features like 'Quick Orders' and synced discounts make the users' experience that bit easier during a hectic morning
Designer's thoughts
Designer's thoughts
“City Cafe was a great project to explore UI and sharpen up my visual skills. Working with such a minimalist style meant that I couldn't hide bad design decisions behind cool gradients, which fits my philosophy of getting the basics right.”
“City Cafe was a great project to explore UI and sharpen up my visual skills. Working with such a minimalist style meant that I couldn't hide bad design decisions behind cool gradients, which fits my philosophy of getting the basics right.”
