Tango – Finance Management Platform

Tango – Finance Management Platform

Redefining digital transactions. Tango offers a fresh take on payment management with a clean, intuitive design that makes every transaction effortless.

Web App Design icon
Web App Design
Fintech icon
Fintech
About Project
Our Task
Design Process
Wireframes
Visual Design
Key Features
Screens

About the Project

Tango is a web app that serves as a comprehensive digital payment platform, facilitating seamless transactions and efficient money management. It allows users to securely process payments, monitor financial activities, and streamline their financial operations with ease.

Screens designed

12 screens

Clock icon

190 hours

Tango finance management platform design
Web App Design icon

Service:

Web App Design

Fintech icon

Industry:

Fintech

Origin country icon

Country:

USA

Partnership period icon

Partnership period:

2023

Our Task

The client aimed to create a simple and reliable financial management tool. Our task was to bring this concept to life by designing a fintech app that allows users to complete payments for any goods and services effortlessly.

Our Solution

Our design solution for Tango took the form of a web app with an emphasis on clean aesthetics and intuitive functionality. This user-centric approach facilitates a smooth and efficient experience for managing finances and making payments.

Our Design Process

01
Research & Discovery
Initial research and discovery phase

Our design process commenced with a research and discovery phase. This involved in-depth discussions with the client to fully grasp his vision and target audience. After that, we conducted thorough competitor research, analyzing existing solutions and identifying potential gaps in the market. Furthermore, we performed a detailed user analysis to understand the needs, behaviors, and pain points of Tango's target users. By gathering these insights, we laid a solid foundation for designing a solution that aligns with both user needs and industry standards.

02
Wireframing
UX stage

With a solid understanding of the project's objectives, we progressed to the wireframing step. At this stage, our team meticulously developed multiple wireframes, mapping out the entire customer journey from account creation and authentication to transaction monitoring and reporting. This phase allowed us to conceptualize the optimal user flow and information architecture for seamless financial management.

03
UI Design
UI stage

During the UI design phase, we translated the wireframes into visually appealing and intuitive user interfaces. Our designers carefully curated a color palette that resonated with the financial industry's brand identity, while selecting a typography that ensured optimal readability across various devices. Additionally, we crafted a custom icon set tailored specifically for financial transactions, enhancing the app's visual language and user experience.

04
Adaptive Design

Recognizing the importance of accessibility, we ensured that the web app was fully adaptive. This involved creating responsive designs that work seamlessly across various devices and screen sizes. By focusing on adaptive design, we aimed to provide a consistent and intuitive experience for all users, whether they accessed the platform on a desktop, tablet, or smartphone. This adaptability is vital in the financial management industry, where users expect seamless access to their accounts from any device.

05
Clickable Prototype
Clickable prototype stage

Recognizing the importance of accessibility, we ensured that the web app was fully adaptive. This involved creating responsive designs that work seamlessly across various devices and screen sizes. By focusing on adaptive design, we aimed to provide a consistent and intuitive experience for all users, whether they accessed the platform on a desktop, tablet, or smartphone. This adaptability is vital in the financial management industry, where users expect seamless access to their accounts from any device.

01

Research & Discovery

02

Wireframing

03

UI Design

04

Adaptive Design

05

Clickable Prototype

Wireframing

To ensure a thorough and user-centric design, we developed a series of wireframes. These wireframes acted as a meticulous visual framework, outlining the entire user experience from initial account creation to transaction management.

Wireframe of Tango app login screen
Wireframe of Tango app main dashboard
Wireframe of Tango app transactions screen
Wireframe of Tango app invoices screen
New invoice creation screen wireframe of Tango app
Wireframe of Tango app-s my wallets screen
Settings screen wireframe of Tango app

Visual Design

Our design team developed a modern and inviting visual design to ensure an engaging user experience. The chosen color palette reflects professionalism and energy, complemented by the Kumbh Sans typography and a set of custom icons, which together promote intuitive navigation and usability.

Tango app typography
Tango app color palette
An example of using the Tango typography
Tango app icons set

Key Features

01

Dashboard

A comprehensive dashboard where users can view their total balance, spending, savings, and recent transactions at a glance.

Tango dashboard feature
02

Transactions Management

A robust transaction management tool that enables users to generate new invoices with ease, ensuring accuracy and efficiency in their financial record-keeping.

Tango transactions management feature
03

Invoices Management

A centralized hub for efficient invoice management, offering users a consolidated view of invoices, complete with status updates, order types, and payment amounts.

Tango invoices management feature
04

Wallet

A secure digital wallet that empowers users to manage their payment methods, including storing card details, tracking upcoming payments, and adding new payment options.

Tango wallet feature

Screens Overview

Login screen UI design of Tango app
Dashboard screen UI design of Tango app

More cases

View All

E-Booking

Learn more

E-Event

Learn more

Sliky

Learn more

Have a project in mind?

rocket-line
Rocket