top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

Café Mate

Project Overview 

This application was made for frequent coffee shoppers that want a better experience during their coffee visit.

The goal of this app is to provide a smoother order transition, create a quicker service and add special accommodations for guests.  These goals are based on the demographics of user's needs in Richmond, CA. 

Start home page 1_edited.png
Home page 1_edited.png
Cafe Mate Menu 1_edited.png
Cafe Menu drinks _edited.png

Video

Café Mate

User Journey Preview

on /off sound

Project duration

3 Months of Design Sprint 

Software used

  • Figma

  • Photoshop

  • InShot Video Mobile app

Project Problem 

  • In Richmond, CA. Small Coffee busines have confusing ordering system,  slow service and no spaces to work.

​

  • Another issued is these coffee shops have no special accommodation for seniors, parents and pet owners

Project Goal

  • Creating an easy ordering system menu

​

  • Quicker ordering and service

​

  • Make the coffee shops accessible to multiple user types, with special needs

My role as UX Designer

  • User Research 

  • Wireframing 

  • Prototyping 

  • Moderate Interview 

Method & Discovery

Before starting the competitive research and to gaining better understanding of the geographic group on my area of frequent coffee shoppers and experiences, I prepare a pre-screening questionnaire made for 15 interviewers to better understand their likes, pain points, and what makes them comeback to their favorite coffee shops in the area. Here are some of the questions asked:

​

  • What do you like / Dislike about your favorite coffee shop?

  • What would you change the in coffee shop? 

  • How many times a day / week / months you visit this shop?

  • Are you happy with their accommodations?

​

These responses inform me on their ideal ordering system, service and menu. 

As well inform me about the accommodations requirements for their ideal coffee shop. With this in mind, I started to Ideate and visualize the ordering system flow, service and the accommodations.

​

After this pre-screening questionnaire, I was ready start ideating and creating first mock-up project for my first usability test.

​

About my competitive research: The big companies I compare the small coffee shops are: Starbucks, Peet's Coffee, Panera Bread, & Dunking Donuts.

​

Frustrations / aha! Moment

While interviewing, I was already creating this idea of what the consumers want and need. Based on my competitive research with nation wide companies, I had this idea of the solution but I was wrong. I become frustrated because I wanted to interview more people to get a more broad prospective of the consumers broadly.

 

But than I realized that my research was base on the Richmond, area, the demographics and paint points which I'm trying to solve for it's on this small area in North of California. So I focus on the needs, and concentrated the goals in this area for this app! 

Design Process Model 
Double Diamond

I used the double diamond process to discover, define, develop & deliver my creative design ideas and develop this app.

Understanding the User : Discover phase

User research summary

After creating my first prototype, I was left with more questions so I intentionally craft the second prototype to answer those questions regarding, quicker an better user flow, service while visiting and ordering from your sitting area, and special accommodations which feed my project goals. 

​

The type of research I conducted was a moderated recorded interviews via zoom. The duration was about 15 - 20 minutes remotely. I send a link to the mockup project, and give them a prompt of questions that base my research. 

​

Users most important quotes

 

User A  "I wish this app Cather to the blind and others with disabilities"

User B  "Once ordering there is no comment section"

User C  "I want to order on my phone while working on the café"

​

BIASES

At the second round of user interviews leveraging the second project mock up prototype, my biases were that "the users will be able to navigate and use the app easily". These assumptions were rapidly contradicted, base on the user insights and feedback. So I learned to put the user front and center based without any bias. From these learnings I was able to get the user pain points views clearly and work on a better direction. 

​

After gathering those insights from the mockup interview, I went back to the recordings, and carefully pay attention to the users pain points. I did a list of the qualitative research which answered most of the users frustrations.  From there I start my Quantitative research feeding my scope of work and the goals for the application. Having all the information Infront of me help me to understand the ideal user flow, and special accommodation that was needed in this geographical area.  My next steps where to start creating fast paper wireframes, which let me to create multiple variations of the solutions for this prototype and test it again, and again. I repeat this test 3 times before the high-fidelity prototype. 

​

User interview screen shots

User A

User C

User B

Paper Wireframe Prototype
Solving Users Paint Points

Refinement of Pain Points & Solutions
App Exploration 

1

PAIN POINT 

Confusing app user flow

2

PAIN POINT 

Difficulty ordering 

3

PAIN POINT 

Room for additional comments  

4

PAIN POINT 

No special accommodation   

Solution

Create a simple transaction user flow app, with simple home page

Solution

Create a menu with images, and quick purchase method

Solution

Make a comment section 

over the item selection

Solution

Add special accommodations at the home page, where indicates to select the type of accommodation need it

Demographic Persona Creation: 

"I like to meet my clients at coffee places, that offers good service, comfortable places to work and have special accommodations for my clients with special needs"

zusana

       Goals

  • Meet clients at coffee shops

  • Comfortable places to work

  • Easy Ordering Menu

  • Special accommodations for guest


 

       Paint Points

  • Confusing ordering system

  • Uncomfortable places to work

  • Slow service 

  • Not special accommodations for ADA, Mothers, Seniors and Pet owners.


 

26939.webp

About:
zusana is a philanthropist who likes to engage with clients at cafes shops that have great places to work, special accommodations for her guest and has an easy menu to order

 Info.

Age                     40 yrs.
Education          Master of Sciences
Hometown        Richmond, CA
Family                Married with kids
Occupation      Philanthropist 

​

 

High-Fidelity Wireframing Process 
Synthesizing

The low-fidelity wireframes and prototype study led to the development of the high-fidelity wireframes and Prototype. With the help of an affinity diagram, I was able to collect and synthesize the data and insights collected during the user interviews. These insights informed the next iteration of app design. 

Affinity Diagram 

After organizing the Affinity Diagram

Priority Requirements

​

Several key themes emerged from the user feedback and organized through the diagram process, driving the next iteration of the designs. These themes were:

​

  • Special Accommodations

  • App navigation User flow

  • Menu customization 

​

First Usability Test 

 Low-fidelity prototype

After insights from Users  

Home page 1_edited.png

Final High-Fidelity Mockup 

Low-Fidelity prototype to High-Fidelity 

High-Fidelity Prototype user journey 

Delivery Phase

After conducting the first design, having all the users pain-points in mind and getting a second round of interviews of the low-fidelity prototype design. I was able to offer to the user a much better way of transitioning and sequencing within the high-fidelity prototype, as well offering all the needs that the user had point out. 

​

  • Ability to schedule a table to work, inside and outside 

  • A better way to order multiple items while visiting or on the go

  • Accommodating special needs for guest, such as ADA, Seniors, Mothers with Baby's, and Dog Owners. 

​

Click below for Interactive Prototype

Moving forward

Takeaways

​

After testing the low-fidelity prototype, and interviewing users, I learn how to solve the issues, understand the user and guide my project process. 

​

Having a process in mind helps to maintain the focus on the study and proactive into the process. 

​

Letting the user to fully express themselves helps to create a better user flow and achivable goals. 

What I learned

​

The learnings from this project has been so rewarding across the different steps of the process.

 

I have understood that there is always ways to improve and that the user is really the one that drives the scope of work with the insights and usability testing. 

 

Letting go biases will help to understand the project direction and be patient into the process.

Next steps

1

Next steps for this app is to create a reward program that would help the business to advertise and incentivize more customers to visit. 

Create a better table reservation system to avoid confusion and prevent multiple users request the same table at the same time. 

2

Expand the menu offerings so the users will have more choices

3

bottom of page