Better management for your online investments

UI Design
Mobile Design
Third case study thumbnail

The project

Leveraging technology to make better financial decisions

Ginmon offers a wealth management system combining leading capital market research with robo advisory technology.

The challenge

When I joined the project, the web and mobile app was already fully built and functional and I had to work around the constraints of not making any major functional or architectural changes. There was also very little research and analytics data on which to base my design decisions, so I had to rely mostly on design and market best practices.

My role

I was responsible for the redesign of the sign-up flow and the web and mobile app. I worked closely with the CTO, and later collaborated with front-end and mobile engineers.

Timeline

March 2019 - January 2020

Heuristic Evaluation

Uncovering usability flaws

With limited access to real users’ data as well as a tight deadline for this project, I started my design process with a heuristic evaluation of the current product and an in-depth analysis of the competitors in this market.

Unconventional controls in the sign up flow

The main issue with the sign-up flow was the use of very different patterns for selecting preferences. Although the aim was to have better representation and differentiation of each answer, most of the time the unconventional controls were hard both to understand and to use and added unnecessary cognitive burden to the user completing the form.

Additionally, the submit (Next) button was too far from the main action area on the page.

Selecting the preferred length of investment

Selecting the preferred length of investment

Lack of visual hierarchy

The most important screen of the sign-up flow is the one that shows the recommended investment strategy. However, the old design made it very hard to understand what exactly was being shown on the page and which part was output versus input.

Recommended investment strategy

Recommended investment strategy

Breaking the rules of form design

The sign-up flow ended with a long form asking for personal details; unfortunately, this form broke many design rules. For example, instead of using clear labels for each field, it used placeholders. (Source: Placeholders in Form Fields Are Harmful)

Form with personal details

Form with personal details

Design System

Creating a cross-platform design language

The next step was to define a style guide that could be used both on web and mobile. The company had already defined their main colour (a blue hue) and their secondary colour (an orange hue). I took into account the engineering team's preference for material design and based the new design components on that preference.

Colours & typography

Colours & Typography

Buttons & inputs

Buttons & Inputs

Onboarding new users

Every new client needs to go through an extensive sign-up flow, providing personal details as well as their investing preferences. The main challenge was to make sure that there was a clear indication of the progress and accessible navigation through each step of the journey.

Another challenge was ensuring that the content for each step was clear enough for new investors but also provided adequate detailed information for experienced investors.

Sign up journey

The investor's dashboard

he main challenge for the redesign of the investor's dashboard was to make sure there was a clear visual hierarchy and that the main actions were easily accessible.

There was also a need to restructure the information architecture so that users can manage multiple investor accounts.

Ginmon client dashboard

Mobile app for investors

The mobile app needed a total redesign and restructuring of the layout. We introduced an onboarding intro for new users that start their journey by downloading the app.

One of the main challenges here was to find a neutral design language since we needed to have one app for both Android and iOS users.

Ginmon mobile app

Next
Back to all projects