-min_edited_edited_edited_pn.png)
nova money
"GAMIFYING USER'S FINANCES TO HELP THEM SAVE MORE".
How we helped Nova bring the store experience home with a new, playful and interactive virtual experience.
setting the scene
Nova Money (formerly Cash Coach) is an app designed to use A.I. to help users comprehend and manage their finances. The startup launched its MVP and despite its impressive technological capabilities, it still needed a much clearer definition of its user base and how it wanted to help them.
Following the MVP release with a successful round of funding, Nova hired a UX researcher and myself to tackle these gaps. Our objective became to increase the understanding of our user base, and propose, design and test features. But first, the app needed a new 'skin' and visual direction. This is where it all started
My role
define
Together with the client, defined what MVP and post-MVP would be and planned a roadmap of incremental implementation
design
develop
Defined interactions and gestures and designed them for two different platforms
Handedover design and animation specs and QA'ed implementation
the main challenges
-
The uncertain nature of an early-stage startup
-
An initial lack of a defined user base and understanding of their needs
-
Gamifing personal finances
high level goals
-
Expand our understanding of the growing user base
-
xxx
-
xxxx
Keep scrolling for a sneak peek of the project While the case study comes out soon
THE CASE STUDY
Part 1
meet nova: a financial a.i.
THE technology was impresive but to be a widely customer facing product it needed a visual revamp and identity
the original identity was futistic .
what is nova?
an a.i. to help people mange their finances
Nova was born as an A.I. from the future coming to help people better understand their finances. The goal was to help them save more and accomplish their financial goals.
who is nova for?
800 million gamers
The app was born with a quite niche user target: gamers. With around 800 million gamers just in Europe, there seemed to be a significant demographic waiting to use an app like.
how does nova cater to its users?
gamification of course!
To appeal to this customer base, the app's competitive edge, besides its A.I., was gamification. Using gamification principles and a sci-fi visual style, the intention was that it would feel appealing and engaging.
gamifing my finances?
couldn't that be risky?
nova believed it wasn't... we were about to find if users believed it was
But first...
Part 1
giving the A.I. a new identity
As we gathered information about users' feelings on finances and gamification, we gave Nova a makeover. The first step in taking the app from more than a proof of concept into a product that felt finished and official was to make it look like it.
Its a game, make it look sci-fi*
*in hindsight this wasn't the greatest idea
As Nova's concept was of a futuristic A.I., the original redesign was aimed at recreating that vibe, almost a videogame one. and modern look, balancing fun and the seriousness user's finances demands
profile
original
new
avatar creation
original
new
spending tracker
original
.png)
new
tl;dr
What
we
learnt
Big ecosystem, poorly connected
We focused on the homepage, navigation, car model and article pages. Changes in these pages would ripple across the rest of the site and AM's ecosystem.
9 templates made up 90% of the site
Compared to other brands in the auto and luxury industry AM's pages performed well but that wasn't enough.
simple reskin or complete component redesign
Got an initial idea of what components would be simply reskinned against the ones that would be fully redesigned.
Part 2
the functions
With a new visual language, the next step was applying it across the app. But redesigning the app wasn't only about the looks, it was also about the function.
onboarding
tracking spending
saving objective
the onboarding
What didn't work
​
z
x
before
a chat for onboaring
The original onboarding was chat-based. The steps happen as a text conversation with the A.I. This made it last longer than necesarry
after
stepped onboarding
The original onboarding was chat-based. The steps happen as a text conversation with the A.I. This made it last longer than necesarry
tl;dr
the
impact
Big ecosystem, poorly connected
We focused on the homepage, navigation, car model and article pages. Changes in these pages would ripple across the rest of the site and AM's ecosystem.
9 templates made up 90% of the site
Compared to other brands in the auto and luxury industry AM's pages performed well but that wasn't enough.
simple reskin or complete component redesign
Got an initial idea of what components would be simply reskinned against the ones that would be fully redesigned.
THE spending tracker
whaT didnt work​
z
x
before
Let's track my....
savings?
The initial way to track user's expenses was confusing (to users and designers alike).
The intent was to break the selected saving goal into even weekly goals split into different categories. Then each week would be marked by success or failure.
after
Let's track my... expenses!
It was important for our users to know both the spending per category but also how close were they to their objective overall. The more money users spend, the higher the line would go until the spending goes above the expenses budget allowed and into the planned saving objective.
tl;dr
the
impact
Big ecosystem, poorly connected
We focused on the homepage, navigation, car model and article pages. Changes in these pages would ripple across the rest of the site and AM's ecosystem.
9 templates made up 90% of the site
Compared to other brands in the auto and luxury industry AM's pages performed well but that wasn't enough.
simple reskin or complete component redesign
Got an initial idea of what components would be simply reskinned against the ones that would be fully redesigned.
THE saving goal
whaT didnt work​
z
x
before
Let's track my....
savings?
The initial way to track user's expenses was confusing (to users and designers alike).
The intent was to break the selected saving goal into even weekly goals split into different categories. Then each week would be marked by success or failure.
after
Let's track my... expenses!
It was important for our users to know both the spending per category but also how close were they to their objective overall. The more money users spend, the higher the line would go until the spending goes above the expenses budget allowed and into the planned saving objective.
NOVA
UX DESIGN, UI DESIGN, RESEARCH
"GAMIFYING USER'S FINANCES TO HELP THEM SAVE MORE".
The Background
NOVA is an app with the goal of helping users to keep track of their money: how much they earn, spend, pay on bills and save; with the goal of saving more.
​
Through open banking, the app gets read-only access to the information of users' bank accounts while the A.I. categorizes and organizes that data to help users better understand how their money comes and goes.
I am half the design team at Nova
My role
I joined NOVA as the only UX/UI designer with the main task of redesigning Cash Coach 1.0.
My other half was a UX researcher and together we led and supported the redesign and it's implementation, in terms of visuals and user-centricity.​
What I have accomplished
I've grown tremendously since I joined, some key achievements of which I have listed below:
​
-
Implemented a design process. This has helped our team establish more structure to how we conduct our work and allow other teams to gain visibility across our upcoming sprints.
​
-
Improved usability across the platform. Almost no usability tests were conducted before dev handoff. Since we established a design team, together with the UX researcher we have been actively working towards conducting UX research and usability testing on all previous and new features.
-
Establishing a design kit. This has helped allow faster and consistent prototyping and testing leading to faster implementation.
THE
CHALLENGE
Before Cash Coach even hired a product design team, an MVP of the app was released mostly based on the decisions of its 2 co-founders.
Even though this MPV already had a significant A.I. and back end established, it was created without much usability testing and had little consideration for the user needs that were trying to be addressed.
THE
OBJECTIVES
-min.png)
Give users control over their bills
Keep track of their spending
Help users
understand their inflows
Get in the habit of saving more
1. Sign-up &
Bank Connection
THE
REDESIGN
The redesign consisted of two parts, one half was about the features and how well they solved user goals and the second half was visual, giving the app a new look.
Here I present the flows and screens that had the biggest significance at either increasing our user base and deliver more to our users.
THE REDESIGN
THE BRAND
A futuristic and modern look, balancing fun and the seriousness user's finances demands
The first challenge and one that would keep on testing the design was the visual style of the app.
​
The goal was to combine a futuristic feeling but grounding it with the expectations of users when it comes to banking and finances.
TYPOGRAPHY
COLORS
Open Sans
Nova Money
Primary
Secondary
.png)
THE REDESIGN
THE ONBOARDING
Sign-up was the initial bottleneck for the app's growth so it was a priority to optimize it as in the early stages of the app our user base was small and each drop out was a significant loss.
1st VERSION
The initial onboarding was a chat based one. So the different steps would happen as a conversation going on with the A.I. This made it last longer than necesarry
.png)
THE REDESIGN
THE SAVING OBJECTIVE
Users' goals are not about saving but spending
We found out that users don't save money just for the sake of it. In the end, saving always means spending, that is the reason people save, maybe for a month for a gift or 5 years for a house.
What we achieved
10%
Improvement in D28 retention
300%
Increase in weekly signups
70%
Sign-up completition
SETTING THE OBJECTIVE
The new way to help users track their savings was by breaking the process in two:
1.
Review Salary & Bills
Confirm your expected salary for this month
and the coming bills & subscriptions.
-min.png)
2.
Set Objective
Knowing how much of the salary is left after bills, it's time to select how much saving.
THE REDESIGN
THE TRACKING
The easiest and hardest way to save more is to.... spend less.
The goal of the app is to encourage people to save money. The most straightforward way of achieving that is by spending less. To achieve that it was key that our users would first, be able to track their finances, how their money comes and goes.
1st VERSION
Let's track my....savings?
The initial way to track user's expenses was really confusing (to users and designers alike).
The initial intent was to break the selected saving goal into even weekly goals split into different categories. Then each week would be marked by success or failure.
THE RESULTS
Since the launch of Nova back in January, this is how our metrics have improved
300% INCREASE IN WEEKLY SIGNUP
D28 RETENTION
INCREASED BY 27%
PRODUCT OF THE DAY
ON PRODUCT HUNT
OTHER SCREENS
Transaction
details
Monthly
summary
Accounts
screen
Setting
screen
Avatar
profile
