Better management for your online investments
UI designer, 2019
Ginmon offers a wealth management system combining leading capital market research with robo advisory technology.
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 limited resources dedicated to research and analytics data on which to base my design decisions, so I had to rely mostly on design and market best practices.
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.
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
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
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
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.