Case Study

Coffee Zoom


“Coffee Zoom” is a coffee ordering mobile app that allows user to order coffee both for pickup and delivery from local coffeeshops in a convenient manner for consumers all while supporting and empowering local businesses.

For more information on any aspect of the project, I encourage you to explore the attached Notion documentation that is linked to the multiple buttons on the page.

If you would prefer a more detailed overview of my process I would also encourage you to read my Medium article attached below.

Additionally, for readers who are visually impaired, I have recorded a video where I go through project.

The Problem

Existing food delivery platforms are not geared towards the small cost, highly fragile nature of coffee delivery both with their delivery costs and minimum delivery fare limits.

Meanwhile, local coffeeshops are being bypassed by the potential benefits of ordering platforms, damaging their longevity in the way of coffee chains

Opportunity

The ability for users to have a more holistic digital coffee ordering experience, while giving individual coffee shops greater market exposure.

Problem Statement

"As a consumer I want to be able to easily order coffee directly from local coffeeshops"

Role
This was a solo where I acted as the Product Designer, managing the project’s research and development stages
Methods
Conceptional Press Release, Competitive Audit, Exploratory User Interviews, Personas and User Stories, Sketches, Wireframing, Prototyping and Unmoderated Usability Tests

Mock Press Release

In a bid to get a better sense of what Coffee Zoom as a product would take, a mock press release, which would be published during the launch of the Coffee Zoom app, was created (hypothetically).

Delivery of a digital marketplace of local coffeeshops

Pickup service for customers to skip the queue

Highlighting local coffeeshop identity

Competitive Audit

Gorillas

  • Grid layout for item selection that allows for easier user experience
  • Option to “tick” or select delivery instructions at the end of the flow
  • “Related products” and “Suggest products” may confuse users at the end of their flow.
  • Information on the item is clearly shown
  • Option for tipping is clear
  • Accessible colour scheme

Flink

  • Bright and vibrant colour scheme of app
  • Sub text (item information) is small and slightly inaccesible
  • Scrolling categories at the top of the page
  • Difficulty of returning to home and accessing profile within the ordering flow

Uber Eats

  • Option for “Delivery”, “Pick-up” and “Dine-in” selection in the app
  • Available stores are shown in marketplace with the option to search also
  • Option for a “Group Order” that caters to large orders and different types of clients
  • Misleading and unnecessary option of “Frequently bought together” and “Complete your order with these” page
  • Clear black/white colour contrast
  • Scannable checkout page

Deliveroo

  • Clear brand awareness with blue colours
  • Ability to find favourites quickly from the homepage
  • Good use of UI cards in the app
  • Local deals shown in the app
  • Condensed item add on page - cleaner user experience
  • Use of horizonitional scrolling on the homepage for deals and other sections
Research

User Insights

Following on from my competitive audit, I was really eager to get in touch with users directly and get a sense of what they would like from a platform such as Coffee Zoom.

User Groups

In order to get in touch with the users for this project, I reached out to a number of Facebook and Slack groups

User Interviews

Connecting with users on these sites, I interviewed with a number of users in exchange for a €15 Amazon card

User Interviews

Interview Insights

There was a number of really great insights I received from users during the interview process. These insights governed the development of the project as whole, while being the basis for the user personas which were subsequently developed

Interview #1: Sunny

Sunny is a landscape designer based in Boston, USA. She mostly uses online ordering services for pickup and would appreciate an ordering platforms where she can go straight into the store

Interview #2: Sanket

Sanket is a software engineer based in Pune, India who predominately drinks instant coffee at home. As he is not a frequent coffee drinker, he would appreciate a platform that lists the ingredients.

Interview #3: Maria

Maria is currently working as a teacher in Berlin, Germany. Her drink of choice is one with a lot of milk in. In a ordering platform she would like the ability to search local coffeeshops within the app

Ideate

Affinity Map

To the right is an affinity map of all ideas and concepts that were generated in self reflection and through chatting with users.

User Flow

User flow for the ordering process of an Americano

User Journey

The journey and experiences of a user going through the ordering process based on the ideation and research phase of the project

Design

After defining the problem space for Coffee Zoom and having some really insightful conversations with different users, both in a moderated and unmoderated setting, I was really excited to get started with putting my ideas and concepts on to paper and then Figma.

UI Style

Below is a overview of the core UI styles that governed the design process of Coffee Zoom (Grid layout, Colour Palette and Type)

Design

High Fidelity Design

Progressing onto the high-fidelity portion of the project, I tried to employ a design that evoked coffee and alertness. This was done by employing oranges and browns to reinforce this concept.

Below is a number of screens that showcase the ordering flow of an americano for a user in the app.

Final Iteration

End product of the Coffee Zoom home screen before going to the developers for construction

Research

Usability Test

I went ahead with gaining further user insights into the project.

Whether it be the visual layout, unintentional pain points or general user frustrations, conducting several unmoderated usability tests any user difficulties with the platform would be uncovered.

Key Insight #1

One user highlighted the need to have a more clearer back button to allow for movement within the pages

Key Insight #2

Uniform card design in comparison to the favourites and homepage of the app

Interactivity

Working Prototype


Below is a link to the Figma file that includes the interactive prototype for Coffee Zoom as it would be used by final users following development

Reflections

One deficit of the project was the lack of coffeeshop identity within the app.

If/when later iterations of the app go into development, a more coffeeshop focused feature such as a dedicated flow for outlining the coffeeshop's story will be taken.




Website Font
Inter + Source Sans Pro
© 2022 Sam Limby. All right reserved.