Stario app design

Fintech apps simplify personal finances for users. It allows people to pay money to friends and track their budget.

Stario is a fintech app design. The goal of this design is to have a solid mockup to represent to investors to get the necessary financial flow in order to start this project going.

Stario Mobile App

Task

My main task was to come up with a design highlighting some of the basic features of a mobile banking app such as registering for the first time, sending money to Stario clients as well as non-Stario clients and browsing payment overview.

Solution

Create an intuitive and appealing design that performs the basic functionalities.

Process

Research Benchmark Online Survey
Design Flow Diagram Sketch
Mockup Wireframe Prototype
UI Light mode Dark mode

Research

I started my mission with research to find out more about fintech, what the most featured categories are and also to get a good sense of what is winning in mobile fintech nowadays. I learned that the top categories include budgeting, money transfers, credit history and monitoring among other features so I focused on those in this project. Then I did an online survey to learn about the user experience among fintech/ banking apps.

The top 5 fintech apps that are being downloaded and used this year are: Cash App, Venmo, Paypal, Zelle and Capital One Mobile (according to App Annie: June 2021), so I took a look at how they are playing the field.

Research Analysis
Research Survey Results

Flow Diagram

This is an important part of my design, it helps to define the high level flow for the basic features that I will design.

Flow Diagram

Sketching

I prefer to start my design with simple sketches, it helps to define the high level flow for the basic features that I will design.

I drew several sketches before commiting to the ones below. My goal was not to overcomplicate things and make the app as simple as possible.

App Sketch
App Sketch App Sketch App Sketch App Sketch

Wireframing

After sketching I went on and designed the wireframes to have a clearer vision of how the app will function.

Wireframe

Mockup

Mockup

Low-fidelity prototype

In order to test my screens and see how it is looking so far I used the tool Marvel.

Why not take a closer look and even test it yourself? Feel free to click on the button below!

Medium-fidelity prototype

This is my favorite part of the project as I see the app coming to life.

Quick Log in and simple steps to sign up for first time users

Login and Signup
Login Flow
Registration Process
Account Setup

Transfer money to your friends and family within few clicks!

Select Contact
Transfer Money Flow
Transfer Money
Transfer Confirmation

Check your account anytime anywhere and take control over your budget!

Account Overview
Budget Control

You can also edit your profile with simple and secured steps

Profile Edit
Profile Security

Dark mode Dark Mode

Dark Mode Interface
Dark Mode Features