Floos
UX/UI design of fintech applications.
Task
Floos is a microloans application with gamification elements. Fulfilling tasks, users open up new possibilities of service: from increasing the loan amount to reducing the interest rate.
Our task was to study the audience of the service, develop Customer Journey Map and reward system, create and test interactive prototypes, develop the design of the application and interface elements, prepare the UI Kit.
Business Research
Conducted a study of banking services in Oman, studied competitors and
identified the types and needs of potential users of the application.
Michael Griffith
33 years old, hotel cleaner
Lives in Liverpool, England
Lives in Liverpool, England
Target
Get more money next month
What is important
To increase the loan size with ease
Context
Often uses applications: has Instagram, sometimes shoppes
online
Paul Brent Ferguson
28 years old, dishwasher
Lives in Budapest, Hungary
Lives in Budapest, Hungary
Target
Get money to cover extra costs — buy new sneakers
What is important
Get money day in day
Context
Regular user of our application, not really skilled phone
user, skilled in apps he uses every day: WatsApp,
online-banking
Thomas Scott
39 years old, painter in construction company
Lives in Berlin, Germany
Lives in Berlin, Germany
Target
Get money for transport to get to work
What is important
Get money quickly, without contacting a bank or friends
Context
Rarely uses applications — only for calls to relatives via
WhatsApp
Made the user scripts for the new and registered user.
Customer Journey Map
Developed Customer Journey Map for two types of users. Through
onboarding we introduce a new user to the useful action of the
product. A registered user performs tasks, receives bonuses and opens
up new service opportunities.
Prototyping (UX)
Prepared interactive prototypes of application screens. Showed all the
relationships, blocks and state of the elements.
UI and animation
Developed a UI design for all screens, considering all the states of
the interface. Prepared animation for key screens of the application.
The customer and the developer got a visual representation of how the
future application will work.
Onboarding
Start screens tell about the benefits of the application. Introduce the new user with the value of the product.
Animated illustrations that convey the message of the text part, make the process of acquaintance easier.
Loan screens
The first screen where the user gets before or after registration.
The screen is personalized if the user is registered.
Amount selection screens
Using the wheel, the user selects the required amount. When performing
tasks, the service increases the limits.
Limit increase
Showed the animation of the wheel with the choice of the amount
when increasing the limit. Immediately give the opportunity to
share the application with friends and get additional bonuses.
Loan confirmation screen
At the last step, we introduce in detail the terms of service. We
tell how long the money will be credited and remind you that the
charge will be made on the card specified during account
registration.
History
In the history section we show committed transactions in the
application. We offer new visitor to issue the first loan. We show
the registered user the date of the next loan repayment with the
ability to pay without waiting for an automatic cancellation.
Bonus program
The bonus program helps the user to increase the cash limit and lower
the interest rate.
Bonus system
Developed a system of bonuses and rewards. The user performs
tasks, invites friends, opens up new possibilities of the service:
from increasing the loan amount to reducing the interest rate.
Total
120
total number of UI layouts
30
screens for registration and onboarding
220
hours for design and animation
Application icon
The application icon is the visual anchor of the product. The branding
element conveys the essence of the application.
Style Guide
Typography
Font family: Montserrat
COLORS
Main colors
complementary colors
UI Components
Buttons
Input
Background
ICONS
Project transfer
Prepared all the necessary materials for transfer to developers.
Got a project?
hello@lepshey.com