2021

MOBILE
fishka

Fishka mobile app

A loyalty program that unites more than 6 million customers.

link https://myfishka.com/
app
app
main-mob
mini-icon
Devlight IT – Company
2021 / August

About the project

Fishka is the largest coalition loyalty program in Ukraine. It has more than 6,000,000 customers and dozen of partner companies in various business sectors. Fishka calculates points for transactions that users can later use to pay for fuel, goods, and services within the affiliate network. Fishka participants can manage their accounts, set goals, receive personal promotions and discounts, and pay for fuel in the OKKO petrol stations.

Customer

OKKO has more than 400 petrol stations. They are one of the leaders in the industry, but in catering establishments on the road, they are number one. Their chain of about 30 restaurants is the largest in the country. They have 10 oil depots and 19 stationary and mobile laboratories for quality control of oil products in the OKKO network.

img

FISHKA BY THE NUMBERS

 A loyalty program that unites more than 6 million customers who make their daily purchases more profitable with the Fishka card.

1B +
USD annually spent with Fishka loyalty program
6M +
Active users
148
Online shops supported
13
Years on market

Our challenge

Creating Fishka loyalty program app, we faced a few challenges:

  • creation of a reliable IT system that would include front-end, back-end, integration with partners, and the ability to manage a mobile app and its content using a special tool
  • upgrading a loyalty program from a plastic card to an online app, creating an additional product value
  • making the mobile app the main communication channel between Fishka and the end user

But the main challenge was to find a simple, reliable, and useful set of tools that we need to develop to fully meet the needs of the end user of the Fishka loyalty program.

alt

Problems we faced
with

There wasn’t any software infrastructure

The long-term product value of the mobile app was absent

Content management point was not centered

The data integration point was not centered

The need to build a multilevel structure of notifications to interact with customers via mobile app

The necessity of real-time customer, promo campaigns, special offers management

alt

Solutions we propose

alt

The development of a native mobile app for iOS and Android

Building a long-term vision for the mobile app by running sets of design sprints with the client’s team as well as defining its structure

Test product hypothesis and confirm product value for end-users by conducting 30+ in-depth user interviews with the different target audiences

Unique content and data management system building with hierarchy access for different types of admins regarding their objectives

Google Cloud platform exploitation for the project software environment

Microservices software architecture usage with a stack of independent services

The process of creating Fishka project

Regardless of the size and scope of your project, following this development process will make your enterprise mobile app development initiative a success.

DISCOVERY PHASE
Product value
creating
What is the product overall value? How product will compare into the market?
  • > Trend Canvas
  • > Key business ideas
  • > Customer journey map
  • > Value proposition canvas
Requirement gathering & collecting
What is the business context? Did vision match it?
  • > Backlog creating
  • > Job & user stories creating
  • > BPMN modelling
  • > Business tasks describing
  • > PRD completing
High fidelity prototyping creating & testing
How the users will interact with product concept?
  • > Figma hi-fi prototype creating
  • > User flows mapping
  • > Clickable prototype creating
  • > Clickable prototype realtime testing
  • > Iteration changes
Product’s software integrations plan creating
How the buisness will interact with product concept?
  • > Software architecture diagram
  • > Data flow diagram
  • > API methods specs.
  • > 3d-party services integration model
  • > Full technical specification creating
UI & software development
How the users will interact with product concept?
  • > UI styles
  • > Design system
  • > Design QA
  • > Design color tockens
Product’s QA. Pre-release stage
Does our product relevant to its goals?
  • > Regression testing
  • > Testing result documents
  • > Security report & APP protection
  • > Promotion materials completed
  • > Beta testing began
  • > List of key metrics. North Star
Release
Going to the market
  • > Deploy to markets
  • > Analytics gathering
  • > Interview session after the release
  • > Feedbacks collecting
Product’s support & growth
High-end growth for the business success
  • > Next iteration scope planing
  • > A/B testing
  • > Funnels bulding
  • > New engagament model building
Development phase
phase 1
logo

Discovery process

DESIGN SPRINT and solution

During this stage, we outline our goals, test hypotheses, sketch a prototype and after creating the prototype, we test it. Then we deliver the final solution to client and move on.

Initial workshop with the client

The next step is deep work with the client, which gives us answers to the most important question. During this workshop, we discovered problems and requests that clients had and found the best suitable solutions for them.

alt

Value Proposition Canvas

helped ensure that a product was positioned around what the customer values and needs.

Business Model Canvas

created visual representation of a business model, highlighting all key strategic factors, customers, revenue streams and more.

Customer Journey Map

mapped user journeys, measured touch points, and examined all of the most challenging areas.

IN – depth
interview

To understand the problem, we need to move on to qualitative research. And in-depth interviews are just that. It involves receiving detailed answers from the respondent and not filling out a formal questionnaire.

The interview cannot confirm/disprove the hypothesis, it only gives an understanding of the context in which the problem occurs, how users are solving this problem now. That is, it directly describes the experience. It is also one of the most inexpensive and simplest studies.

Before recruiting people for interviews, we need to form a sample of respondents – what characteristics describe the user, whose experience will be relevant to us. Because not every user suits us.

To do this, we form a general profile of the respondent and prescribe the criteria by which we will select respondents. Based on these data, a screening questionnaire is formed which filter questions for the selection of respondents.

Screening criteria for respondents
  • Age (20-55 years old).
  • Income (average/above average/ high).
  • Over the past six months, the respondent has used loyalty services.
What is important to understand
  • Who is our user, what is his goal and motivation.
  • What is his current experience – what steps he goes through, what actions he takes on them, what problems he has, what pleasant moments arise along the way.
    solution providing an end-to-end business application d business .
stickers
30

Respondents

1.5 H

Duration of each

25

questions

interview
analysis

After the interview, we translate three respondents’ answers into text form. We analyzed and placed on separate stickers what actions the person performed (yellow stickers), what problems he had at that moment (red stickers), and what pleasant moment he had while moving toward the goal (green stickers).

Also we note the context that facilitated these actions. We define the Big Job for which all actions were performed. Next, let’s group the stickers by topic. As a result, we get a certain number of groups of stickers and then try to give them names. This process is called theming.

scheme
user persona

Based on the data obtained from in-depth interviews, we draw up a general user persona that reflects the customer segment we have intensified as a key.

Viktor Savchuk

Age: 27

Status: Single

Occupation: Working Professional

Lacation: Kyiv

Viktor does not know much about existing loyalty-reward apps. His colleague introduced Fishka to him and told him about the possible rewards that he can redeem with the use of the app. However, he was hesitant to create an account due to privacy concerns. He felt that he needed to know more about the app and how it functions first before signing up for an account. He also wanted to make sure that the rewards available were enticing to him and were catered to his needs.

goal
  • Needs to know what the app is all about and the rewards it offers
  • Understand the process of collecting chops and redeeming rewards
  • Merchants and rewards that are catered to his needs
Frustration
  • Doesn’t like to sign up before knowing what the app is all about and what it offers
  • Unable to identify and sieve out promotions that are relevant to him
  • Rewards were just not worth the trouble
Features
  • Fishka Card
  • Fishka Online
  • Rewards
  • Map of Partners
Influences
  • Friends
  • Online and social media
  • Online advertisment
Technology
  • Mobile apps
  • Social network
  • Iphone

Creating software
architecrure map

We plan the high-level design of software so that detail can be added later, allowing software teams to sketch out the big picture and begin preparing a prototype.

scheme

entity relationship
diagram (ERD)

Our plans included adding the high-level software design later. This would allow software teams to sketch out the big picture and begin preparing a prototype. For this, we created Entity Relationship (ER) Diagram that visualizes relations between «entities» like people, objects, and concepts within the ecosystem of an app.

diagram

high -fidelity
wireframes

High-fidelity wireframes are often built in the advance stages of the design process to communicate design decisions to the development team prior to coding the final product.

wireframes

prototypes

We prototype the main screens and their possible variants of them to select the most fitting vector for our design system. Few options of design are going through our targeted audience reviews to check if it’s clear and understandable for them.

prototype
prototype
prototype
prototype
prototype
prototype
prototype
prototype
prototype
prototype
prototype

Technical
specification

A clear and consistent technical specifications document ensures that the app works properly, and meets your expectations and business goals. For our customers, we create technical documentation during the Discovery phase to be certain we are on the same page as our clients.

RESULTS OF DESIGN SPRINT

Non-functional requirements

Performance
  • Load for all interfaces – 1 million sessions per month. 200 sessions simultaneously.
  • Processing at least 10,000 orders per month.
  • Regular synchronization time with the bus is not more than 4 hours.
  • Order creation time (from the user’s click “Place order”
    to the result of registration) no more than 3 seconds.
  • Warehouse inspection time – 12 sec
  • Normal page load time – 1 sec

As the load increases, the system must allow horizontal scaling to ensure the above speed;

Availability
  • System availability is 99.6% per year.
  • The system may be unavailable from 12:00 to 05:00 (technical window). Unavailability time cannot exceed 15 minutes.
Capacity
  • Expected number of system users – 200 000 users
  • Expected number of items in PIM – 3200 items
Compatibility

Requirements for WEB client: Browsers:

  • Mozilla Firefox (version 60.0 and higher)
schema
phase 2
logo-inner

design process

colors

Primary Colors

#EF4046
#FF7E7E

Primary Colors

#404852
#5B6169
#B8C1CB
#F2F6FC

Buttons Cases

Sign in
Sign in
Pay with app
Sign in

Elements

app

Final design

Finally, we are happy to share with you finalized design screens!
The effortless-looking and friendly design are what we resulted with after all the previous stages of hard work and deep research. Looks neat, doesn’t it?

PHASE 3
logo

Development process

CI/CD Pipeline

The complexity of the project determined the decision to build the next CI/CD pipeline for the automatic delivery of new builds. The pipeline builds code, runs tests (CI), and safely deploys a new version of the application (CD).
Commit change
Tigger build
Build
Notify of build outcome
Run tests
Notify of test outcome
Delivery build to staging
Deploy to drodaction

Technology stack

We decided to use only a native stack of technologies according to the current situation of the product.
Mobile Technologies
Web Technologies

scrum Process

For the management of project development, we used the scrum process. It is an iterative and incremental software development methodology designed to build products faster. It is based on breaking down the workflow into short-time boxed development cycles (called sprints). Each sprint ends with potentially shippable functionality delivered.

scrum

Project team

Here is a team of brilliant experts who were responsible for delivering the tasks and aims outlined in the project plan. Each of them is in his place and knows his business perfectly.

 

Lubomir Miller

Delivery Director

Alex Kurochkin

Business Analyst

Andrii Bryzhnychenko

iOS Developer

Andrii Malitchuk

Android Developer

System design

This scheme illustrates how the Fishka ecosystem works. It consists of a mobile application and a webpage that are backed with a CRM system, notification system, and Payment service.

circle
Client
circle
Mobile app
circle
Webpage
circle
Admin
circle
Java
circle
CRM system
circle
Push notification system
circle
Payment service
Analytics

The Dashboard section provides insight of key analytics of your app.

The project was quite complex and voluminous. Not to miss anything we decided to build an analytic system to track the data, define user behavior, find bottlenecks, and define insights to build a better application version. Here are the primary indicators and analytics dashboards from Firebase:

macbook
icon
icon
A story about
all the features
macbook-name
Analytics

Firebase tracks the retention of your app users by tracking a group of users for 5 weeks

Analytics

Firebase generates real-time heatmaps so you can observe your user’s behavior

macbook-name
phase 4
logo

RESULTS

Onboarding

In Fishka we use benefits onboarding, or feature promotion to highlight the benefits of our app and how it can improve your users’ lives

result
icon
icon
A story about
all the features
logo
logo
logo

Fishka pay

It is a convenient payment service that includes several services: card-to-card transfer, points transfer, points purchase, charity transfers, Fishka purchase points, and transfer via the phone number

pay
pay
pay
pay

Fishka Card

Digital loyalty card, which is always at hand and available for use in the chain of about 25 partner companies

Fishka Online

Users can earn additional loyalty points for online purchases with it

pay
pay
pay
pay

Rewards

Here customers can exchange their points for real goods of the partners from the reward catalog

Map of partners

All offline partner companies can be found here as well as their offers and rout construction to them

pay
pay
img-header
Security

mobile application security

Mobile apps store and create a tremendous amount of data about us and our lives. So it is crucial for developers to ensure a secure way of using such information. At Devlight we always use best practices for mobile application security:
  • Multi-factor authentication – it is essential for any enterprise app that stores, processes or accesses sensitive corporate data or personally identifiable information.
  • Transaction security – one of the best solutions to avoid cyber threats with end-to-end encryption that makes transactions a lot safer.
  • Encryption data security – a security method where information is encoded and can only be accessed or decrypted by a user with the correct encryption key.

Fishka

Check our demo
The largest loyalty program in Ukraine
circle-bg

System dashboards

The clear and functional tool for service administrators to control all the existing entities and events in the system

In this menu client can manage webpage for end-users

circle-books

In this menu client can manage promotion for app and web-page

circle-books

In this menu client can manage discount program

circle-books
  • In this menu client can run survey about application and general information to understand end-users better
circle-books

Ratings and reviews

12kreview
3.9 out of 5
icon
star star star star star
February 14, 2022
Mykhailo Luhovyi
Nice app with plenty of discounts for many shops.
icon
star star star star star
May 2, 2019
Valerii Sovytskyi
Completely updated design and fixed business logic, all is very convenient and I don’t see any defects.
icon
star star star star star
November 27, 2020
Ievgen K
It is convenient to pay for petrol right next to the pump gas.
icon
star star star star star
December 17, 2021
Serhii P
The app isn’t impressive, but I’m glad that I can fuel the car without going into the box office. If you do not want to talk to someone additionally, that’s what you need. The functionality is top.

Customer feedbacks

quote

FISHKA BY THE NUMBERS

90%
share of points withdrawn
Top 7
In chart Shopping
100K +
Daily active users
25%
Retention rate over 6 weeks
3M+
Instals of app in App Store and Google Play
Monthly active users
820K
heart

Thanks for
watching !

Boost your compan’ys
productivity
Get a consulation