Vitamin Dashboard

Creating an effective dashboard with recognizable patterns and clear visual hierarchy

The Challenge

Old Dashboard design

Vitamins’ mission was to create a brand that is bold and different from other investment platforms. Investing should be fun and less dry. But of course, the platform also needed to be trustworthy. At this stage, we had an MLP working that consisted of a “Dashboard” that showed your investment details and some additional learning pieces in a very rudimental way.

One of the biggest challenges in fintech and digital banking is the value of trust. This was even more true for Vitamin. For women, investing is already a sensitive topic that involves many obstacles for them to overcome. This made it even more important to create a platform that provides safety and trust for customers to start.

Redesign of
existing components

The current design of Vitamins’ investment platform did not deliver the design quality of comparable companies. It was crucial to provide a recognisable and trustworthy user interface with common design patterns that customers recognise from previous experience. The design needed a consistent look and feel for customers to get used to. After conducting a Design Audit, we collected all components and organisms that had to be improved or created and added more variants.

Typography

Poor visual contrast between headlines and content that needed to be improved.

The headline colours are too similar and do not provide a clear design hierarchy.

Alerts

No usage of appropriate colours that match the content of the notification, for example, Success, Warning or Error.

No appropriate button colours to use for Success, warning or error.

Buttons

No Variations with iconography

No buttons for success, warning or Error.

Cards

No variations available

New Styles

Better contrast

Better contrast between headlines and content which makes it easier to read and scan.

New Alerts

5 Notification Types

Variations for Default, Information, Warning, Error and Success

Responsive

The responsive Alert component that turn into a stacked version at a minimum width of 380px.

Several Varaints

Variants for Type, Icon, Headline, Dismissable, Button

Differnet Sizes

All Alerst come in small size (additional information for forms) and big size (General).

Buttons
Button Large - Primary Dark
Button Large - Secondary Light
Button Large - Primary Light
Button Large - Secondary Light
Button Large - Primary Error
Button Large - Primary Success

Icon Variations

Variants for: Icon left, Icon right, No Icon or Icon only.

Type Variations

Different Variations for Success, Error, Light Background and Dark Background

Cards

Variations and Sizes

Variants for: Event (Date and Location), Tags, Subtags or Video type.

improved Inputs
New Tags

Improve Information architecture

Since there were more features and functionalities that needed to be included, we had to rethink the information architecture and came up with two changes:

Adding Navigation

First, we created a new sitemap that included all relevant new features and new content. Then, we created a new Navigation that has been tested and validated with our users.

Adding better visual hirarchy

To create a better visual hierarchy, we added a sidebar to have a clear cue about which content is most important. This provides the user with a pathway on what to focus on and creates a more organised view.
New Navigation
New Designs
Verschlagwortet mit,