TotallyMoney future vision designs

TotallyMoney future vision

Reimagining the visual design of the product

In-house at TotallyMoney  |  My role: Lead UI Designer

Read my Medium story about this project

TotallyMoney is a web and native app that sets out to help users gain financial momentum by learning smarter habits, improving their credit score, and getting access to better borrowing.

When I joined TotallyMoney at the start of 2020, there had recently been a rebrand to help support the growth of the product. The tone of the rebrand was friendly, embracing and helpful, and this was reflected in the public homepage. However, the product itself was firmly rooted in the company's past. It was bland, dated and completely lacked personality. I embarked on a project to bring vibrancy and life to the product by setting a new visual design language.

The outcome

The TotallyMoney native app dashboard A selection of screens from the app

The process

The TotallyMoney native app before the redesign

My intention was that the new design would leverage the brand assets to give the product a unique personality in a crowded marketplace. It would be modular, scalable and promote the values of the company. I looked at how aesthetics could be used to engage our users further, encouraging them to discover more genuinely useful content.

I wanted to retain ownable features from the old design, including the dotted score wheel on a deep indigo background. I started by taking the retained elements and exploring how new patterns could be built around them.

A small slice of my initial exploration

After sharing my progress with the Head of Design, I added some new features and designed many more iterations before a viable dashboard was settled upon:

First viable dashboard design

As I progressed, I kept and refined a component sheet. It was essential to create component and pattern styles that were flexible and could be scaled easily and rapidly. A major issue with the old design was that it was so static and difficult to build upon.

A component sheet from the mid point of the project

I created a mockup of the dashboard on a tablet device to demonstrate how the components could work at different screen sizes:

How an iPad app might look

At this point I put together a plan to present my proposals to the senior management team. There would be considerable engineering effort required to apply the future vision to the entire app, and I needed the SMT's buy-in for this to be greenlit. After demonstrating how the new design language would align perfectly with the company's strategic priorities, I was extremely encouraged by their enthusiastic response. Below is a video of the prototype that I presented to the team:

Experimenting with the positioning of a future notifications centre

In addition to the dashboard, I explored how the future vision styles could be widely applied. Below is some of my exploration for the Credit Profile hub. Multi-variant testing was carried out and the design on the right was the most successful iteration.

A few of the options for the Credit Profile hub

I also designed a new, deeper nav bar for the native app that could be used on all screens below the top level, providing a distinctive familial motif. This new nav bar formed a part of a new set of page templates that I put together.

A selection of second-level screens

After a concerted effort from our engineering team, the future vision designs are progressively being rolled out to the native app. Work is underway to apply the same design language to the web app too. In the spirit of “build, measure, learn”, the designs will constantly evolve over time.

The data shown in these designs is fictional.

Read my Medium story about this project

Next project: Design system