Revamping Europe's leading broker platform with a fresh art direction and scalable design library.

Client

DEGIRO

Location

Amsterdam, Netherlands

Role

Lead Designer

Year

2024

Introduction

DEGIRO, Europe’s top online broker, serves both data-driven professionals and casual investors. Despite DEGIRO’s strong performance, the platform felt outdated and misaligned with the brand's success. The goal was to modernize the platform while maintaining its existing functionality. I worked with a design director to set the vision and oversee planning. I later took over as the project lead, managing the client relationship, presenting progress, and guiding the overall design direction.

Deliverables

The project unfolded in three distinct phases: art direction, production, and delivery. Our primary deliverables included a compelling visual concept, an updated component library featuring design tokens, and developer support for seamless implementation. A significant focus was on accessibility to ensure the platform met 2025 EU regulations.

Research

To lay the groundwork for this project, the UX designer and I conducted a component and template audit. The findings gave insight into existing platform structures, components, and naming schemes. This information was critical to identifying key templates and the eventual redesign of components.

Image showing the DEGIRO updated color system.

Explorations

The vision for the art direction was founded on visual explorations which were regularly delivered to stakeholder and developer teams for approval. These regular check-ins aided in the creation of the cohesive art direction for the project.

Art direction

Creating a Comprehensive Art Direction

The art direction was centered around three pillars: Inclusive Design to increase platform accessibility for a wide range of users; User-Centric Empowerment to ensure user confidence in engaging with a friendly, spacious interface; and Purposeful Interaction to create clear hierarchies and allow easy user navigation. During this phase, I also refined brand aesthetics, accent colors, elevations, and corner radii to establish a cohesive and visually appealing design.

Testing

Realizing the main benefactors of the redesign would be users, my team invited a small group of DEGIRO customers to test updated elements of the redesign. For instance, customers found the change of buy and sell button colors from traditional red and green to blue and black to be unfavorable. Responding to the feedback, we adjusted the design to incorporate the red and green buttons.

Production

With the first round of feedback in hand, I fine-tuned our art direction and began the production phase. Over six weeks, I designed a large set of components used in the seven key templates of the platform. These templates formed the basis of our component library, the first step toward a design system.

Design tokens

A set of tokens were crafted based on the initial art direction, helping the design team and developers work efficiently. This system included core and semantic tokens for all components. Key elements included a refined color system, updated typography, a spacing system, motion guidelines, and more

Image showcasing the color system implementation.

Component library

All components, from small atoms to large organisms, were designed and merged with the design tokens in a component library, forming the base for our redesigned platform. Adding a motion designer to the project further enriched the platform, creating a friendly yet comprehensive experience.

An image showcasing the updated calendar view and dropdown component.

Implementation support

The final phase of the project involved providing five weeks of comprehensive development support. This ensured that the team implemented all components accurately according to specifications. Additionally, we hired a company for a thorough accessibility audit to ensure our redesigned components met standards. We made a few changes to address the issues identified in the audit.