UX/UI Design
User Research
Mobile
Artbean Coffee Roasters Mobile App:
‍Explore the coffee culture with your favourite blend.
Timeline
May - July 2023
My Role
Product Designer
Resposibility
End to end UX/UI design
Tools
kickoff
Artbean Coffee Roasters, an independent coffee bean roaster and provider, has just unveiled its coffee shop in the bustling heart of Chinatown, NYC. However, the current in-store ordering process falls short of customer expectations, resulting in extended wait times and the potential loss of business.
‍
Artbean App is the solution that aims to improve the coffee-ordering experience, bid farewell to those frustrating in-store queues, and welcome a new era of convenience. But there's more to it. Our app opens the doors to the mesmerizing world of coffee, inviting users to explore a diverse range of blends, master the art of brewing, and uncover the captivating stories behind each and every cup.
With the Artbean Mobile App, you will experience:
01
Fresh palette inspired
by their artistic roots
Both Khanh and Spencer, the owners of Artbean, share a background in art and design, which led them to embark on the creative journey of melding art and coffee into a single entity.

This app serves as their canvas to blend their love for both, dipping in the colors inspired by their best-selling drinks to create a fresh and harmonious palette.
02
Streamlined
order experience
Not only can you skip the line in the store, but you can also leisurely browse the menu and place your order through the app. And that's not all! The app is a treasure trove of coffee knowledge waiting for you to explore!
03
Rich fusion
of coffee culture
With this app, you can dip into the latest events hosted by Artbean, discover amazing art exhibitions, and enjoy limited beans created through collaborations with local artists. Plus, you'll have access to a wealth of brewing guides and equipment knowledge. It's a genuine coffee community!
Let's dip into the design process.
user interview & pain points
To gain a deeper understanding of the users I'm designing for and their needs, I conducted interviews and developed empathy maps. Through this process, I identified three specific pain points based on the research findings.
The majority of participants expressed their dislike for waiting in shops.
Over 75% of the participants have limited knowledge about the coffee they are ordering.
50% of the participants indicated abandoning the ordering process due to limited payment options.
personas
Through the interviews from the user research, I identified two personas which are essential to building an intuitive experience.
“ I want to order coffee efficiently ”
Mei Ling Chen (45)
Hairdresser
New York, US
High School
bio.
Mei Ling is the owner of a salon located in Chinatown. She often finds herself struggling to understand the menu and feeling embarrassed. It would be helpful for her to be able to independently order her coffee, ensuring an efficient process that allows her to promptly return to her salon.
“ I want to expand my coffee repertoire ”
Ryan Mitchell (31)
Photographer
New York, US
Master of Fine Arts
bio.
Ryan, a freelance photographer, begins his day with a cup of coffee. With a desire to embark on a new hobby, Ryan seeks to venture into the world of brewing his own coffee, and in doing so, discover exceptional independent coffee roasters and support local business.
user scenarios
To evaluate design paths effectively, I developed two user scenarios that depict the challenges encountered by the user groups. By empathizing with the users, we can gain valuable insights and make design decisions to enhance their experience.
Mei Ling Chen
ordering
May Ling was frustrated because she took a lot of time to order.
She downloaded the Artbean app and ordered a coffee at her salon.
She got notifications about her order status.

She feels satisfied picking up her coffee without wasting time.
‍
Ryan Mitchell
brewing
Ryan was confused about coffee beans & brewing equipment.
He used the Artbean app and learned about brewing guides.
He purchased the coffee beans through the app.
He feels satisfied making coffee at home every morning.
user flows
To enhance the core experience of Artbean, I designed two user flows specifically aligned with the given user scenarios. These flows were created with the aim of improving the overall user journey and ensuring a satisfying experience.
ideation & sketches
After developing the user flows, I proceeded to translate my initial ideas into visual sketches. While some ideas may appear unconventional or impractical, certain elements within them resonate with the core user experience.
lo-fi prototype
Once the sketches were completed, I translated them into a low-fidelity digital format and developed a prototype. This prototype showcases the connections and transitions between each screen, providing a visual demonstration of the user flow and interaction design.
usability study
After creating the low-fidelity prototypes, I sought feedback from five potential users. Their input will play a crucial role in refining and enhancing the mock-up and high-fidelity prototype to better meet their needs and expectations.
research questions
1.
What is the average time it takes for a user to complete the coffee ordering process?
2.
What insights can we gain from the steps users take to accomplish their tasks?
3.
What were some of the frustrations users had with the app throughout the process?
4.
Describe the overall impression of the app.
5.
Are users actively engaged with the coffee knowledge provided by the app?
activities
1.
From the home screen, customize a drink and add it to the cart.
2.
Confirm your order and complete the checkout process.
3.
From the home page, figure out where you would go to brewing guide page.
4.
How did you feel about this app overall? What did you like and dislike about it?
affinity map
After gathering feedback from usability research, I employed an affinity map to identify patterns and insights derived from the data.
insights & iteration
Once I had developed a deeper understanding of the patterns and insights, I began the process of modifying the prototypes and iterating on them. The identified insights served as valuable guidance as I worked towards creating the final product.
Refined order status feature
40% of participants experienced confusion regarding the "order status" feature on the home page. Its purpose was not immediately clear.
“It’s not clear what this order status is. Will I see the progress? And why is there a order button next to it?” - user C
iteration
  • Clear language to explain the feature.
  • Display order status & progress.
  • Include useful information for tracking orders.
Simplified checkout flow
All participants expressed that the checkout flow was not intuitive, and there were too many steps.
“I want to get my coffee as soon as possible. I noticed there were 3 steps to complete the checkout and also I needed to select my payment every time.” - user B
iteration
  • Combine pickup & payment methods into one page.
  • Preselect the user's prior choices to streamline the process.
  • Collapsing option lists to reduce scrolling.
Improved community navigation
60% of participants experienced difficulty in locating brewing guides in an intuitive manner.
“Why is it called Culture? I am assuming Tips means brew guides and Artists means the baristas, right?”
- user A
iteration
  • Crafted a warm introduction.
  • Enhanced clarity in terminology.
  • Simplified the navigation bar to reduce clutter & unnecessary features.
final design
What I have learned:
Most users prefer the ordering process with minimal time spent.
Throughout this project, I noticed that many users often order the same drinks and prioritize an efficient ordering and checkout process. Designing the app with both new and loyal customers in mind is essential.
Design the product that captures the essence of the owners.
I started with brown in the lo-fi prototype, a typical choice for coffee apps. But after understanding their brand identity better, I explored colors that truly represent their essence. The result is a fresh and distinctive design, standing out from other coffee apps.
Future outlook: Integration of delivery methods for merchants.
In the future, we plan to introduce a coffee bean subscription program to enhance customer engagement and strengthen their connection with Artbean's unique coffee culture.

Explore other projects

HelpOut
Maikeiki
designed by wei-yuan wang 2023
linkedinInstagramemail