Home / Cases / Metro – loyalty program

Landing page for the new loyalty program
and Metro Customer’s Account

Project Main Goals

Project Main Goals

We developed a landing page for the updated loyalty program and a customer’s account for personal and business needs. Here you can see the main features of our customer’s account for personal and business needs that make it convenient and useful.

[PHP]

[React JS]

[Web]

Team members: [ 7 ]

Months: [ 4 ]

Metro – loyalty program - 4

Business Analysis

Business Analysis

We have formed 2 personal profiles according to the anticipated needs. The first persona is a legal entity, and the second persona is an individual. For a better understanding of users, we have also compiled an Empathy Map. An Empathy Map helps to better understand the feelings, emotions and actions of the user.

Metro – loyalty program - 8

Identify the Problem

  • It is difficult to understand the terms of the loyalty program
  • It is not convenient to keep records of different employees
  • It takes a long time to register in each of the new accounts
  • A lot of time is spent on accounting of purchases

Solutions

  • Convenient personal account with the ability to track purchases
  • A loyalty program for legal entities has been developed
  • Convenient and fast registration
  • Сost control and savings thanks to the loyalty program

Personas

Personas

Metro – loyalty program - 10

Legal Persona

Sam is a businessman. He is an owner of a logistics company. His company supplies food to the main restaurants of the city. He has more than 20 employees.

Metro – loyalty program - 12

Individual Persona

Amanda is an event manager. She travels a lot. She likes to try the cuisine of different countries. She buys products for corporate events and for her family.

Metro – loyalty program - 16

UX - Application Structure

UX - Application Structure

Before getting to the design stage, we always create interactive prototypes. That allows both the team and the customers to understand how the product will work

Metro – loyalty program - 18

Visual Design

Visual Design

Take a look at the font we used. It looks good on any screen. Also, the contrasting combination of colors emphasizes important details of the content.

Metro – loyalty program - 20

Project Features

Project Features

Here you can see the main features of our customer’s account for personal and business needs, that make it convenient and useful.

Metro – loyalty program - 28
Overview

Overview

To comply with Metro’s corporate style, we carefully studied the brand book and visual style of the product and reflected this as much as possible in the design.

We chose a color palette

We used Metro’s corporate colors, which combine well in the interface and allow us to accentuate details.

Metro – loyalty program - 30

Typography we used

Development of Metro client account activities.
Based on the information provided by users.

Metro – loyalty program - 32
Metro – loyalty program - 34

Result

Result

We have developed a personal account for legal entities and individuals and an attractive landing for the loyalty program. Now the loyalty program has become even more convenient and accessible!

FAQ
What is a customer loyalty program?
What is the best customer loyalty program?
What are the benefits of a customer loyalty program for businesses and their clients?
How to develop a customer loyalty program?
How much does it cost to develop a customer loyalty program?
Where can I find a supplier for online loyalty program development?

Contact Us

    Take a glance at

    Our works

    Transport Management System

    [AWS]

    [GPS]

    [Java]

    [React JS]

    [Web]

    Online service for Philip Morris Ukraine will allow tracking in real-time transport companies' trucks that are currently transporting a cargo of a customer.

    Learn more

    YChamp – fitness app

    [Android]

    [Apple Health]

    [AWS]

    [Google Fit]

    [Google Maps]

    [iOS]

    [Java]

    [Kotlin]

    [React JS]

    [Swift]

    [Web]

    Activity tracking program that selects ideal opponents in sports competitions by considering and comparing their capabilities.

    Learn more
    Our works