ROCKET

Image

Rocket is an app that helps you manage your savings to reach a particular goal, like buying a house, going on holiday, starting a business.

PURPOSE AND CONTEXT

Rocket is the final assignment of my CareerFoundry UI design course. The brief asked to design a money saving app. I wanted to challenge myself by exploring different solutions for this problem, and I finally decided to use gamification to make the saving process more engaging.

OBJECTIVE

Money is always a serious matter, but hard goals are easier to accoplish when fun is involved!

Rocket transforms the money saving process into something easy, enjoyable and effective.


APPROACH

I started by exploring the already existing money saving apps, in order to understand common patterns, UX solutions and also to get some inspiration on this topic, that was pretty new to me.

Most competitors offer a trustworthy interface, the possibility to add automatically the expenses connecting the app to the online banking account of the user, many settings to personalise the goal achievement journey.

Saving money is often a rather boring task, that involves sacrifice. Motivation is the key, to make the process as positive and successful as possible. This is why I started thinking about making the app experience fun, to engage the user in being constant in using it and reaching their goals.

My solution was to use gamification. I opted for the space travels theme, as it is a good metaphore for a user willing to reach a goal. I researched space imagery and looked for interesting game patterns to use in my UI design.

CHALLENGES

One big challenge has been managing to integrate the fun experience in an app that deals with a serious topic: money. Even if the user decides to save money using a game based app, he will still need to trust it to reach his goal in the best and most secure way.

For this reason I implemented a limited amount of functionalities, targeting those users who would download the app for a relatively "light" goal. In this way I wouldn't need many complex options and the overall structure of the interface would remain easily understandable and thus, trustful.

However, after some user testing, I realised that most of the interviewed users were missing a function to automatically sync the cash flow from their bank account with the app. I decided to follow the suggestions and implement this function, which implied reworking the high fidelity frames to give space to al the elements related to it. This taught me a lot about the importance of testing my assumptions at early stages, in order to get all the crucial information before finalising the design.


KEY FEATURES

  • LET THE USERS SET AND EDIT THEIR GOALS

  • LET THE USERS ADD MONTHLY EXPENSES AS WELL AS DAY TO DAY ONES

  • LET THE USERS TRACK THEIR PROGRESS

PROTOTYPING

As always, I started with rough pencil and paper sketches, to better understand which elements would be needed and how to combine them among the different screens. After various iterations, I moved to Sketch, to define precisely every aspect of the interface and prepare the screens to the final UI design process.

Image

UI DESIGN

Inspired by vintage space illustration, both for the style and for the color choice, I opted for a bold palette composed of primary, complementary colours. I wanted to convey a playful atmosphere, with a retro twist. I carefully selected the Solari font, inspired by the flip clock, to add a vintage feeling to the overall UI.

Before finalising the design, I took time to create a brand manual, which includes all the assets and the mood boards I used in this project.

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image