Case Study

LoyalFoodie

April 2021

Mockup showing one of application screens
Mockup of smartphone

This project was created as a "capstone" for UX Design Certification Program. The idea was to develop one, random idea over few weeks to learn all stages of application development process. My selected idea was to create a loyalty program for food truck customers. Content and format of this case study was required by the course.

Welcome to LoyalFoodie Introduction

My name is Krzysztof (most people call me Chris). I must admit that I am overwhelmed with loyality programs I am assigned to and I do not see major benefits coming from them. Their terms of use are quirky, not transparent and prizes are not fair.

I love to eat and cook but sometimes I have no energy to do something on my own. I used to go to the restuarant but nowadays only home deliery is an option. I must admit that there is no application and restaurant that would encourage me to visit them by having valuable loyalty program. I decided to change it...

My role

I was responsible for UX reasearch, user study and design. There were no direct co-creators however I received a lot of support from participants of design reviews and usability studies.

Project timings
March - April 2021

The Problem

There are no loyalty programs aimed for food trucks and choices for small business are limited due to high cost of entry as most systems requires dedicated POS.

The Goal

The goal is to create an application of loyalty program that would allow for quick onboarding and easy use. Application should be accessible for most users, especially those historically excluded.

Personas

John

Age
29
Education
M.Sc. in Mech. Eng.
Hometown
Cologne, Germany
Family
Single, living alone
Occupation
Engineer in big company
Persona photo of John

“I am 2 drawings from finishing awesome prototype. I need to go to gym today. Where I would have lunch today?”

John is mechanical product developer in big company. He was born in Germany but studied in US, as his parents (mother from India, father from Germany) were working in US. He loves cuisine from India and Lebanon. He prefers vegetarian food. He is tech-savvy and fan of Android.

Goals

  • Wants to be healthy and handsome
  • Wants to establish a family
  • Wants to create breakthrough and innovative designs

Frustrations

  • Has no time or place to cook
  • Is spending too much time and energy at work
  • Is having too many unhealthy snacks

Dorothea

Age
42
Education
B.Sc. in Accounting
Hometown
Tokio, Japan
Family
Married, 2 children
Occupation
Freelancer
Persona photo of Dorothea

“I wish my day would have 48 hours. Let’s do some cake and later check the homework. I wish I could save some time on cooking dinner...“

Dorothea moved from Japan to study in Germany when she was 21. Three years later she met her husband, Marcus. Since she is 25 she is working as freelancer, as copywriter. She loves spending time with her daughter, Lisa and son, Thomas. She loves simplicity of Apple devices.

Goals

  • Wants to raise children as good and smart citizens
  • Wants to be creative and earn few quids along
  • Wants to be good mother and wife

Frustrations

  • Not enough time
  • No time to look for opportunities, special offers and deals
  • Overwhelmed with responsibilities

Competitors Analysis

After brief competitors 5 different direct competitors were named:

takeaway.com logo

Food delivery apps

Lightspeed logo

Lightspeed/Upserve

Sailplay logo

Sailplay

LoyalZoo logo

LoyalZoo

FiveStars logo

FiveStars

First one is collection of all food delivery application that are allowing users to collect points and exchange them into goods, as logo Takeaway.com was taken.

Lightspeed/Upserve, LoyalZoo and FiveStars are POS vendors where FiveStars is building offering only around custom POS device. Sailplay is being position as markting tool. Lightspeed has wide variety of products where customers loyalty program is tiny part of their portfolio.

Analysis helped to find out about differences in authenticating and user recognition. Sometimes it is phone number or mail given verbally. It may be smartphone or credit card.

After some time it was obvious that platforms are having wrong focus - they are aiming on reaching and coining business owner rather than pleasing this business customers.

Research

I conducted interviews with target users, then distilled what I learned into actionable steps. I used all discovered insights to identify pain points users were experiencing. Then I entered research with set of assumptions that were modified based on future users feedback.

The most important discovered pain points:

  • Users needs easy and quick way to check-in in the restaurant
  • Rules must be basic
  • Check out must be automatic
  • Offers must be appealing

Unvcovered information helped me to realize I need to do more to make navigation easy and limit steps user must take to complete flow. Than conclusion helped to shape next steps.

Problems Statements

By applying the user pain points I identified in LoyalFoodie study, the problem statements for John and Dorothea would be:

John is a foodie who needs a additional offers because he does not what restaurant to decide on.

John is a busy working professional who needs clear and basic rules becuase he has not time to read terms.

Dorothea is a busy mother who needs easy navigation because she has no time to research user guide.

Dorothea is a good cook who needs catchy offer becuase she can cook well at home.

Initial Wireframes

Overview of all wireframes created in Figma:

Starting page would allow directly to check in first at the restaurant to see available offer and prizes. There are 2 methods of check in foreseen - by scanning QR-code available in the restaurant or by bluetooth beacon (BLE).

User may log in, log in with 3rd party authentication provider or sign up.

Wireframe of Starting screen

Offers page would show how many points user has. It would allow user to quickly compare his situation with benefits coming from using one or multiple offers.

After clicking one of offers a separate screen with QR-code and detailed description would appear. It is foreseen to show this code to the seller so it may be added to the order.

Wireframe of Offers screen

Usability Study

Methodology
  • Unmoderated usability study
  • Location: Germany, in selected restaurant
  • Length: Each session will last about 15 minutes, based on a list of prompts, with a SUS following the study
  • Participants must be:
    • Foodies (live to eat and enjoy eating various food types)
    • Be between 18 and 35
    • At least 3 male and 3 female
    • Have a car or live in the city center
    • At least 2 of them should not speak German
Results

Recorded results were generally summarized in 4 points:

Confused how to start
As log-in, sign-up and check-in are on landing page users were confused what to do
Simplify log-in
Users hate new passwords and would appreciate when log-in would be easy
Could not work offline
Users need to be able to use application without direct access to the Internet
Points are shady
Users would need to be more clear on what they are getting for “those” points
Findings and rationale

First summary had following working points:

  • Allow only to log-in with Google on Android devices
  • Do not allow to check-in until log-in completed
  • Add automatic check-in process
  • Highlight how point are collected (rules)
  • Add offline capability

After consideration it was decided that standard login method would stay in. It would be shame to reject users who do not have Google account.

The key change was modification of navigation: as of now user must first log in to be able to check in. Moreover navigation was simplified and remains at the bottom of the screen.

To make points collection process more transparent on the offer page would be added collection rate. Offline check-in capability would be added, however it would delay the update of points counter, awaiting the user to be in range of the Internet.

High Fidelity Prototypes

Project with high fidelity mock-ups
High fidelity prototype with animated user flow

Overview of all high fidelity mock-ups:

Offers page would now indicate where the user is checked in. It got button to check out, conisdered handy when automatic check in went wrong.

Points collection rate is now highlighted above all offers.

Wireframe of Starting screen

Check in page is including now list of all restaurants (BLE beacons) available around.

Wireframe of Offers screen

Further Studies

In final round of studies it was discovered that users would like to have better understanding of points flow. It should be considered to add separate tab or screen showing transactions history.

Studies conducted so far were not taking into account seller perspective. Application for restaurant must be developed and tested in order to consider this study as complete.

Accessibility Consideration

Based on usability studies and good practice following accessibility features were planned:

  • Every image and step would get additional alt text to match planned path during complete user flow
  • Team would add high contrast option. It would be available in settings
  • Team would add dark mode option. It would be available to switch in settings

Lesson Learned

Iteration is the key to successful and wise design. Humans affection cannot identify, analyse and fix too many problems at once. Every iteration of LoyalFoodie brought conclusions that were at that point of time obvious.

Keep It Stupid Simple is principle that rules navigation. At first sight it may seems that users are confused, not fluent with smartphone or even lazy but all of those are wrong assumptions - the user is the king. If user suggest it is too complicated. Damn! It must be simplified as soon as it is possible.

Credits and acknowledgments

I would like to thank to Michael, Emily, Karen, Jason, Dave, Paolo, Shabi and Kunal from Google who created UX Design Certification path.

Media credits: