1 of 30

Customer Loyalty Mobile App for a restaurant

Jenny Daza

2 of 30

The product:

It is a challenge of the Google UX Design Certification.

A mobile app for a customer loyalty service of a restaurant.

Project overview

Project duration:

6 months.

May - October 2022

3 of 30

The problem:

How to know who is a frequent client and how can the restaurant owner award the loyalty.

Project overview

The goal:

Design a loyalty customer service mobile app that help restaurants.

4 of 30

My role:

UX designer, UX researcher

Project overview

Responsibilities:

User research, analyze, wireframing, prototyping and evaluate.

5 of 30

Understanding

the user

  • User research
  • Personas
  • Problem statements
  • User journey maps

6 of 30

User research: summary

UX Research was done with interviews of two types of users:

2 interviews with restaurant owners.

10 interviews with clients of restaurants.

A final short survey to the 10 clients.

THE GOAL OF THE RESEARCH WAS TO UNDERSTAND THE STATE OF CUSTOMER LOYALTY, in ADDITIONAL TO FIND PAINT POINTS OF USERS.

7 of 30

User research: pain points

Start the register of clients

A restaurant owner doesn’t like the idea to start a new database because this could take too much time.

Promote the new app

Most people don’t like to start promoting a new app to clients that doesn’t want to be interrupted.

Give my personal data

Some users of restaurants don’t like the idea to tell their data to others and receive spam

Untruest

Some users of restaurants don’t trust in promos, because those don’t seem real.

1

2

3

4

8 of 30

Persona: Elena

Problem statement:

Elena is an owner of a small restaurant

who needs a way to reward loyal customers without be annoying

because in that way she can give personalized promos to maintain their frequency of visit, and also they could bring more people.

9 of 30

Persona: Patricia

Problem statement:

Patricia is a busy professional that spend weekends with her family

who needs good attention and promos but with minimal interruptions

because she wants to enjoy the family conversation.

10 of 30

User journey map

Image of user journey map

It was important to identify the improvement opportunities where the UX work needs to be.

11 of 30

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Starting

the design

Our loyalty service app will let users sign up in the app which will affect to frequent customers of the restaurant by letting user skip formalities and avoid discomfort, but be identified to rewards. We will measure effectiveness by rate of users that sign up to the app.

12 of 30

Paper wireframes

Paper wireframes allow that me to generate several ideas.

Here it is an example of brainstorming paper wireframes for home screen.

13 of 30

Digital wireframes

As the initial design phase continued, I create basic sketches in Figma, where the structure and basic content visualize the signup process.

First screen after installation

Register just with the number

14 of 30

Digital wireframes

The goal is to sign up with comfort, quiet and fast.

After that, you could get easy access to gifts.

This wireframe shows user flow, hierarchy in structure and content.

Automatically read code and confirm

Home screen after sign up

15 of 30

Low-fidelity prototype

The low-fidelity prototype connected the primary user flow to signup in the app until user can get a free cake and save the first bill.

Try the low-fidelity prototype.

16 of 30

Usability study v1: findings

The low-fidelity app prototype for Customer loyalty mobile app was tested and can be viewed at this link to the figma prototype view. 5 Participants between the ages of 21- 50 who reside in Colombia. Unmoderated usability test.

Round 1 findings

Users need a confirmation page for gift redemption.

1

User needs instructions to register the purchases.

2

Give other signup options and confirmation page with details.

3

17 of 30

Lo-Fi after usability study

The low-fidelity prototype after update with insights.

Try the low-fidelity prototype.

18 of 30

  • Mockups
  • High-fidelity prototype
  • Accessibility

Refining

the design

19 of 30

Mockups v1

Applying visual user interface design: selecting font and color palette, adding images and icons, layout and negative space.

Checking best practices.

20 of 30

High-fidelity�Prototype v1

21 of 30

Usability study v2: findings

The high-fidelity app prototype for Customer loyalty mobile app was tested and can be viewed at this link to the figma prototype view. Same 5 participants between the ages of 21- 50 who reside in Colombia. Unmoderated usability test.

Round 2 - findings

User needs clear labels in the home view.

1

User needs clear labels to the buttons for purchase register.

2

User needs to focus on the signup options.

3

22 of 30

Mockups

Sign up options appears with a fade to let focus in them.

Before usability study

After usability study

23 of 30

Mockups

The main view labels were adjusted and the buttons for purchase register were separated from the main view.

Before usability study

After usability study

24 of 30

Mockups

25 of 30

High-fidelity�prototype

26 of 30

Accessibility considerations

Every button has a label to explain the action.

No only icon button.

Use of High contrast colors for background and text color.

Shadow for containers.

Use of the best practice: primary and secondary buttons.

Secondary button has an underline text

1

2

3

27 of 30

  • Takeaways
  • Next steps

Going forward

28 of 30

Takeaways

Impact:

All participants in the usability study would like to use this app.

They found really easy to sign up.

What I learned:

This case of study help me to refresh and update some parts of the UX design process, like the research process and accessibility best practices.

29 of 30

Next steps

I would like to review the user workflow for the menu part.

I would like to show it to a restaurant owner.

It would be great to convert the app in a loyalty app for several restaurants.

1

2

3

30 of 30

Let’s connect!

Thanks for reading my case of study.

Let me know your comments or if you want to connect, here is my contact information:

Jenny Daza

Jennydaza.com

jennydaza@cognitios.co

Instagram and Twitter: @jedaux