top of page

Google UX Design Case Study | NGAROPI (Coffee Shop App)

Writer: Azrul ArtistikAzrul Artistik

Updated: Nov 16, 2021

Disclaimer: This project is based on Google UX Design Certificate. All components on this case study here are only for learning and don't mean to judge someone's creation.




Project Overview


The Product

The product:

Ngaropi App (Coffee Shop) is an online ordering and booking for coffee or café located in Indonesia. Ngaropi app strives to deliver best coffees and to give recommendation for cafes that people can book without waste time and energy. They offers cheap pricing, a lot of discounts and promos. Ngaropi App targets customers like millennials, students, families and workers.


Project Duration:

To finish this project, I spent a lot of time from September to October 2021.


The problem:

  1. Busy workers lack the time to enjoy a cup of coffee.

  2. Busy workers that need a place to do meeting with stakeholders and clients while having a cup of coffee.

  3. Millennials who were obvious to hangout in the cafes.


The goal:

Design an app that allows users to easily order a cup of coffee or book a café without wasting time and energy and offer good prices that can make users feel enjoy.


My role:

As UX designer, my role is designing an app for coffee shop and offers café booking from conception to delivery or reservation.


Responsibilities:

Conducting research, interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.



Understanding The Users


User research: summary (Ngaropi App)


I conducted interviews and created empathy maps to understand the users behaviours, problems, needs and constraints. A primary user group identified through research was working adults who don’t have time to buy a cup of coffee or don’t have a place to meet with stakeholders or clients. I also identified millennials that need good place for hanging out and enjoy coffees and some meals.


The research also revealed that time was not the only factor limiting users from making coffee at home. Other user problems included obligations, interests, or challenges that make it

difficult to get coffee or place that can be used for meeting while having coffees and some meals.



User research: pain points


Time

Working adults are to busy and sometimes they need a cup of coffee to get relax but they don’t have time or coffee to make it.


Place & Location

Working adults also need nearby and comfortable place to meet clients or doing self business but the place is too far and expensive.

Millennials also feel difficult to find good place for hanging out.


Price & Payment

The prices are too expensive and less promos. For the payment is not accessible because it just have limited payment method.


Accessibility & IA

Some coffee ordering apps are not equipped with assistive technology and also the text are so hard to read.



Persona: Ismi Anggraeni


Problem statement:

Ismi is a busy working adult who needs easy access to get a cup of coffee without wasting time and energy. But sometimes she need a comfort place to do meeting with stakeholders, clients or even to hangout that is near and comfortable with the price.




User journey map


Mapping Ismi’s user journey revealed how helpful it would be for users to have access to a dedicated Ngaropi app.


Click here to see user journey map





Starting The Design


Paper wireframes


Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.



Digital Wireframes


As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.






Low-Fidelity Prototype


Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was booking a café, so the prototype could be used in a usability study.


View the Ngaropi App



Usability study: findings


I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.





Refining The Design



Mockups


Early designs allowed for some customization, but after the usability studies, I added additional options to choose pizza crust and sauce. I also revised the design so users see all the customization options when they first land on the screen.



The second usability study revealed frustration with the description because it’s annoyed user with the icons around the page. to streamline this flow, I decide to make different page that contains for text only, so the user can focus to read the description.




High-fidelity Prototype


The final high-fidelity prototype presented cleaner user flows for building ngaropi app from ordering or booking to checkout. It also meet user needs for choose the best prices and more promo & recommendations.


View the Ngaropi (Coffee Shop)





Accessibility considerations


1. Provided access to users who are vision impaired through screen readers.

2. Used icons to help make navigation easier.

3. Used detailed imagery for Coffees and cafes to help all users better understand the designs.




Takeaways


Impact:

The app makes users feel like Ngaropi App really thinks about how to meet their needs.


One quote from peer feedback:

“The app made me easier to find better drink while busy working and also the app provide best place that we can book it and enjoy the coffee while meeting with clients, stakeholders or ever for hanging out.”


What I learned:

While designing the Ngaropi app (coffee shop), I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.





Let’s connect!


Thank you for your time reviewing my work on the Zia’s Pizza app! If you’d like to see more or get in touch, my contact information is provided below.



Comentários


© 2021 by Azrul Artistik. All Rights Reserved

bottom of page