Design

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Trading repainted —

Revamping Europe's leading broker platform platform with a fresh art direction and scalable design library.
Client
DEGIRO
Location
Amsterdam, Netherlands
My role
Senior — Lead Design
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.

A mockup showing the Markets page of the DEGIRO trader app.

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 illustrating how the components are built, displaying margins and paddings.
Image showing the DEGIRO updated color system.
An image showcasing the CTA's used within the trader app.
An image illustrating what the indices and graphs look like within the trader app.

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.

Icon representing the design tokens implementation.

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.
Icon representing the component library 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.

A mockup of the Markets page.
A mockup of the Portfolio page.
Mockup of a concept design for AI chatbot implementation.
Mockup of the product detail screen.
Mockup showcasing the concept of adding and customizing widgets on the Markets page.
Mockup showcasing the onboarding flow for new users.
Mockup showcasing the Markets page in dark mode.
Mockup showcasing the Favorites page

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —

More Work —