Making money simple for your investments
and banking needs.

A UI / UX Case Study of a platform that manages your finances with ease of mind. A project intended to "make money simple."

Overview

In a highly saturated trading app market, it’s difficult to stand out. Our method?

Clean, robust design that simplified the process of trading online. Moneybase (then CCTrader) is an award winning trading (and banking) platform. It offers direct market access intended for knowledgeable and experienced individuals taking their own investment decisions. Given the role of UX/UI designer, I was responsible for crafting an online digital web experience.

The primary goal was to amplify the outdated interface, and develop a system that integrates potential future products. Allow me to run you through the process, from concept to the final product.

Client

Moneybase

Project

Website re-design

Role

UI/UX Design Lead, Branding

Tools Used

The Challenges

Changing an identity

As if changing the name of a brand is not already confusing for users, let alone revamping the whole look and experience of the site. Moneybase, which was then called CCTrader before the rebrand, in it’s core, remained exactly the same, but CCTrader (Calamatta Cuschieri Trader) meant absolutely nothing to investors. Renaming to Moneybase, for the sake of going international, at least gave an indication of what the product might represent. But why go through all the effort and risk of renaming and updating the look, if the product is still reaping positive results? The real question should be, why not?

Retaining Trust

“How do we get to retain the same level of trust?” How can we be approachable online just as much as we are offline in a market where speaking to bots is the new shift? During the discovery process, Trust and customer service turned out to be the foundation of the business and had to these had to be visually represented strongly. My role as a the UX/UI designer on the project was not only to understand the brief, but also to understand the perspective and goals of the business. This is key to forming the right mindset for the upcoming phase, designing the visual architecture.

Design for Additional Future Products

However the most challenging part of the project was constructing a site and brand that allows the company to include potential products and/or services that fall under the same umbrella. CCTrader was never built to include any other additional products, but with the rebrand, this was made possible. We constructed a format to the mother brand where any upcoming product would fit in effortlessly.

The Process

My Role

From start to finish, I was entrusted to lead the project, from the user experience to the user interface. Since the project was large at scale with a relatively tight deadline, I implemented a few steps that would help the team and myself be a little more organised and efficient with delivering on time. I will be going through the steps taken that helped me deliver the project successfully.

Project Vision Process Map

Below is a map of the steps taken throughout the project. Although the agile process is less of a
marathon and more of a sprint, it allowed us to stay focused on the goal whilst still leaving some
margin for errors.

Ideation & Research

The research stage was key to identifying where moneybase was to be setting foot in a market that’s dominated by competitors, who are more popular and have a larger client base. Once that data is gathered, it is then analysed and presented to the key shareholders of the business. It was decided that the moneybase persona is not for the man in the street but neither is it reserved just for the experienced investor. Picking the right target audience for the business would determine the rest of the design process.

What are the interests of the persona?
How much are they willing to risk?
How much do they trust online platforms?
Is the persona calm with their finances, or are they triggered by their emotions?
Do they have a preference for sophistication over simplicity

These questions are a few important questions that were brought up in the user interviews.

User Flow

Designing for the user experience began from sketching out a typical user journey based on the accomplishment of specific tasks within the website. The goal was primarily to convert traffic into downloading the app. Depositing money into their account would be a separate goal.

Wireframes

The mid-fidelity wireframes were designed to build the structure and architecture of the site. This step was crucial as it gave us a glimpse of what was yet to become, before heading straight to the high-fidelity mockups. Simple prototypes were of great use in identifying components for framing the design system. It was also a great space for the team to give initial feedback before we stepped into concentrating on the main visual design.

At this stage, I would already start identifying a few of the components I would be needing and the variants, states and cases for some of them. Normally these would include; buttons, fields, tabs and icons.

Moneybase Wireframes

1/5

User Interface & Experience

Guidelines

Creating a set of simple guidelines can be seen as an “extra, can do without” step. But in reality, this is a crucial step to start understanding and respecting the visual architecture of the brand. Normally, the guidelines step would be agreed upon with the stakeholders. Once approved, the guidelines will be the kickstarter and guardian that will maintain order throughout the visual process. In this particular project, I created a set of guidelines related to typography use, colour and grids.

Design System & Components

A design system was then created to visually represent how the set of components would have to be developed. Such visual elements would include colour, icons, typography, and UI components. One would only understand the importance of this phase until a project is undergone without creating a components page. Not only was I quicker with creating the symbols in Figma, but this also served as the blueprint for how the UI components would be coded. This simple set of instructions can only help the developers and thus increase code efficiency and timeline alignment.

Symbols

Once the components page was finalised, it was like hitting two birds with one stone. 75% of the symbols were created out of the components page. The remaining symbols were then designed as I went along with the creation of the high-fidelity mockups.

Symbols

1/5

End Product

The final product is a fully functional site that includes moneybase as the main brand, with the option to view both moneybase invest if you’re into investing / trading, and moneybase banking if you need an alternative to manage your finances all under one platform. Although the project had a tight deadline, thanks to good planning with the team, we launched a successful project within the scheduled date. I noticed that proper planning and building the right foundations for the projects not only improved the communication between the team and shareholders but also put us in a good position to lead the development team to help us deliver a good product.