Riverbank Fintech App

Academic Project / UX/UI
Overview

Riverbank is a fintech app designed for young adults to keep track of their spendings and money. Riverbank gives them the facts about their finances and helps them to get a handle on budgeting, spending, and saving for the future.

Duration

September 2022 to September 2022

Roles

Research, Ideation, UI Design, Prototyping

Tools

Figma, Adobe Illustrator

Waves on a blue gradient background with a phone wireframe that has the words 'Riverbank' inside of it
Challenge

How might we motivate young adults to better track their finances?

This student project had a focus on UI design so I did some research into my target audience—young adults—before getting into the design.

Text detailing Riverbank's target audience, going through the demographics, psychographics, needs, and goals
A use case for Madelyn, a fictional young adult who wants help with finances so she can focus on what's important to her
A mood board of the art direction for the UI design as well as the personality and values
Fun Fact

It started with a little joke

How exactly did the idea of fish and water come about for this fintech app? It all started with the idea of finding a fun and unique name for this project. Suddenly, a fish joke heard from a very long time ago sprung into mind. The joke goes like this: Where do fish keep their money?

In a riverbank!

Rough sketches of fish, waves, treasure boxes, and other water-related items
The “Aha” Moment

The "aha!" moment came when sketching the visual elements. Many of the first sketches were literal depictions of fish, waves, sand castles, and other water-related objects. The vision for those sketches made the fintech app seem too juvenile when the target audience was young adults.

More sketching led to making more abstract and patterned visual elements which better fit the target audience.

Low fidelity sketches and mid-fidelity wireframes of Riverbank's user interface app design
Riverbank's style guide with a type scale, colour palette, and an example of how grids are used with the final layout
Style Guide

Blue for clarity, trust, and water

It may seem obvious to have blue for a fintech app named Riverbank, but that was not my initial direction. Although not pictured in this case study, my first mood board and colour palettes used yellows and greens. It made the interface look washed out and didn’t get the theme of the app across. Changing the colour palette to be mainly blue made a dramatic difference.

The Final Interface

Drum roll please...

Riverbank's launch screen as well as the login and sign up screens. All of them have waves in the background
Riverbank's home screen showing the monthly spending, goals and how a pop-up would look when the user has no wifi connection
Riverbank's account page with fish-scale-patterned credit cards. An inner screen for an account shows transactions
Three screens showing the Insights for August spendings by recent, by category, and within a category
The Tips screen which show useful articles to learn more about finances
Reflection

A compelling and consistent interface

This project allowed me to practice creating a compelling and consistent UI. It brought me through the very initial steps of defining a target audience and art direction all the way to the final interface. Along the way, I was able to exercise my skills with grid systems, typographic hierarchy, and UI components. I also learned the importance of constantly checking to see how everything looked on an actual mobile screen as I worked.

In the short amount of time I had to create this fintech app, I'm quite happy with the work I produced. If I were to do this project again in the future, or if I were to work on it further, I would like to add motion into the illustrative elements of the app and prototype it as well.

Thank you for making it to the end of this case study!