top of page

Portfolio

Google UX Certification

Customer Loyalty App for a Cafe

I completed this project for my Google UX Certification Program. This is an end to end UX project, starting from user research to high fidelity prototyping.
Google UX

Project Overview

This customer loyalty app focuses on an easy and quick way to earn and redeem rewards at a local cafe.

User Research

I conducted user interviews and created a survey to better understand the users and what their goals and frustrations are when using customer loyalty apps.

Interview Questions
  • What is your experience like when you use a rewards app?

  • What challenges or dislikes do you have about rewards apps?

  • What makes the process go smoothly when using a rewards app?

  • What features do you enjoy in a rewards app?

Quotes from participants

“They usually have a pretty poor user design and don’t add a lot of unique value. 9/10 times I would rather just use a mobile web browser”

​

“Keep it Simple.”

​

“I need all of the info on the screen”

​

“Dont like expiring rewards”

​

“I need easily application navigation, most rewards apps don’t have that”

User Research Takeaway

I initially believed that the main concern of users was the amount and quality of rewards earned in app, but the survey quickly revealed that they actually had a much wider variety of goals and frustrations. These included issues like expiring rewards, confusing navigation, and useless features.

Pain Points

Pain points are problems that occur at the different levels of the customer experience.

pain_points.webp

User Research helped me identify these 4 key pain points in popular rewards apps

Personas

A persona is a fictional character that represents your target users. They are created by conducting user research and identifying pain points. For this project I created two primary personas.

persona_susan.png
persona_matt.png

​User Journey Map

To further empathize with the users I created a User Journey Map for the Matt persona. A user journey map is a diagram that visually illustrates the user flow through your product.

User Journey Map.jpg

Matt’s user journey was helpful to reveal that there are many more useful features than just rewards for a Cafe customer loyalty app

Goal Statement

Our customer loyalty app will let users earn rewards quickly and easily which will affect users who want to save time and money by letting users scan a personalized QR code when ordering.

​

We will measure effectiveness by the amount of rewards earned and redeemed.

User Flow

I created two different task user flows in figjam to visualize how users will move through the app.

user_flow_01.webp
user_flow_02.webp

Paper & Digital Wireframes

paperwireframes.png

A few paper wireframes

digitalwireframes.webp

Digital wireframes in Figma

Low-Fidelity Prototype

lofiprototype.gif
lofiprototypescree.png

​Usability Study

To test how potential users will react to my design I conducted a remote usability study. I provided participants with the low fidelity prototype and had them complete several tasks.

Research Presentation_studydetails.jpg

Affinity Diagrams

After collecting the data from my usability study I organized the participants comments and observations into an affinity diagram. This helped me identify common themes so I could define the problems in the product.

Customer Loyalty Affinity Mapping 1.png

Research Insights & Recommendations

Research Insights.jpg
Research Recommenndations.jpg

After reviewing the research insights and recommendations I highlighted what my next steps would be

​

  • Implement a more detailed deals program

  • Further update the rewards timeline to limit confusion and to provide a visual aid for the number of points collected by the user

  • Reassess the rewards system to continue to limit confusion by the user

Refining the Design

To take the next steps, I updated the user flow and low fidelity wireframes. I deleted the rewards store because it caused confusion and replaced it with a list of available rewards.

updatedwireframes.webp

Updated Wireframes

Refining the Design

Colors

I was originally going to use several shades of brown and a green accent for the color scheme. I decided to go against this because it felt to literal and overdone. After some color research, I chose to use different shades of blue for the color scheme for a few reasons.

​

1. The color blue is often linked to creativity, which helps generate ideas even under pressure.

​

2. The color blue can boost productivity due to its relaxing and mentally stimulating effects.

​

3. Blue is often seen as a sign of stability and reliability. Businesses that want to project an image of security often utilize blue in their advertising and marketing efforts.

Asset 2_3x.png
Typography

Avenir Next is an iconic sans-serif typeface and a system font with macOS and iOS.

type.webp
Iconography

I wanted simple, solid, and rounded icons, so I made these in Illustrator. I originally wanted to use unfilled icons but they felt lost on the finished mockups.

icons.webp

High Fidelity Mockups

I used the style guide to create high fidelity mockups. I also removed the deals list on the rewards page to avoid unneeded repetition.

hifiscreen.png
Google UX

High Fidelity Prototype

hifiprototype.png
hifirec.gif

Conclusion

I had a lot of fun doing this project and thoroughly enjoyed the certification course. I’ve done UX projects before but for this project I got to go more in depth with the UX process. I got a lot better at practicing empathy with the user and doing ux research. In the future I would like to add to this project, I will add a menu and a preorder process.

Thank You!

bottom of page