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

    Unify. Load & Quotation Platform

    [Android]

    [AWS]

    [Google Maps]

    [iOS]

    [Kotlin]

    [PHP]

    [Swift]

    [Web]

    UNIFY is a mobile app for drivers & companies, which allows users to find a carrier for cargo in real-time.

    Learn more

    Satchel – Digital banking & Payment solutions

    [Android]

    [iOS]

    [Java]

    [Swift]

    Sending money internationally can be a hassle for users. The traditional ways eat up time, involve checks, and pile on extra fees. […]

    Learn more
    Our works