Key Control Dashboard

Het creëren van een weerbare wereld

Client

Yellowtail Conclusion

Period

March - July 2024

Tools

Figma

Project type

In-house development

Project Description

This project aims to technically and functionally update the KCD, ensuring it aligns with modern standards in technology, user experience, and information security. The goal is to make the platform future-proof and capable of continuing to meet the high demands of public sector organizations.

Introduction

The Key Control Dashboard (KCD) by Yellowtail Conclusion is a leading Governance, Risk, and Compliance (GRC) SaaS tool in the Dutch market. Designed to support organizations in managing Environmental, Social, and Governance (ESG) responsibilities, Information Security Management Systems (ISMS), and Performance Management Systems (PMS), this comprehensive solution offers an integrated approach to risk and compliance management. By streamlining complex processes, the Key Control Dashboard enhances organizational efficiency and ensures adherence to regulatory standards.

KCD is trusted by a wide range of public sector organizations and government authorities. Among its users are the Ministry of Defence, Ministry of Foreign Affairs, Ministry of Finance, Ministry of Justice and Security, Ministry of Health, Welfare and Sport, and the Ministry of Infrastructure and Water Management. It is also used by ProRail, the national police, the Municipality of Haarlemmermeer, the Municipality of The Hague, the Port of Amsterdam, and many others.

Briefing

"Apply a complete redesign to the current Key Control Dashboard front-end, including key functionalities such as the user and non-user data entry flows. Additionally, develop an initial responsive design to ensure usability across mobile and tablet devices."

My responsibilities

Research the tool

Get to know the current system, the different modules and the way the tool generale work in order to come up with a proper new design.

Deliverables

Create wireframes, (hi-fi) designs and prototypes for stakeholders presentation. conducting (Product) Quality Reviews and co-reflections during sprint reviews.

Component library

Set up a custom made component library with fonts, colors, button (states) and many other UI components.

Handover to dev

Ensure that all designs and components are delivered correctly to development and also be the first point of contact for questions and further development.

Responsiveness

Translate the desktop version to a mobile and tablet environment with a corresponding navigation structure.

Agile/Scrum method

A development methodology based on iterative and incremental processes within a multidisciplinary team.

Prototype (video)

The video below showcases the full desktop prototype, including the various screens, user flows, and custom-designed components created for this project. I presented these to the KCD team, other stakeholders, and existing users of the KCD tool.

Screens

Below you will find an overview of various screens that were covered during this project.

Login screen

As part of modernizing the Key Control Dashboard,
I redesigned the login screen to improve usability, accessibility, and visual appeal. The original interface was outdated and didn’t meet modern user expectations or mobile responsiveness standards.

Through research and stakeholder input, key issues were identified: lack of visual clarity, poor support for login issues, and an under-emphasized SSO option. I addressed these through a clean, professional redesign featuring improved hierarchy, password visibility controls, and clear navigation for alternative login methods.

The new design introduces a more structured and intuitive experience, supported by modern visuals and responsive behavior across devices. It builds user trust from the first interaction and better reflects the quality and professionalism of the KCD platform.

The design was presented to the KCD team, key stakeholders, and existing users, and received positive feedback for its clarity, improved usability, and alignment with the broader product vision.

Dashboard

The redesigned dashboard significantly improves clarity, usability, and visual appeal. By introducing a clear information hierarchy, modular layout, and intuitive navigation, users can now focus on key tasks—like tracking deadlines and reviewing performance—without feeling overwhelmed.

Users can filter and interact with data in a more intuitive way, thanks to smarter layout decisions, consistent UI elements, and contextual controls. The updated sidebar navigation reduces friction by allowing quick access to key modules, while the use of whitespace, subtle shadows, and visual grouping creates a cleaner, less overwhelming environment.

In a data-rich dashboard environment like KCD, the side drawer enhances the user experience by allowing quick access to detailed information without disrupting the main workflow. It keeps users in context, supports efficient multitasking, and creates a smooth, non-intrusive interaction. By enabling users to view and act on item-level details alongside broader overviews, the drawer contributes to a more intuitive and productive interface.

Data entry flow

To simplify complex input tasks within the Key Control Dashboard, I designed a responsive, step-based data entry flow tailored for both desktop and mobile users. This modular flow divides tasks into structured steps—such as introduction, form input, and confirmation—guiding users through the process with clear progression indicators, contextual instructions and is fully customizable for different scenario's. The design supports a wide range of field types, including text inputs, dropdowns, multiselects, date pickers, and file uploads, while ensuring each step remains focused and uncluttered.

On mobile, the flow is adapted into a vertically stacked layout with collapsible sections and intuitive navigation, allowing for a seamless experience across devices. This approach improves usability, reduces cognitive load, and ensures consistency in how data is collected and submitted—making it a scalable solution for different teams and use cases within the dashboard.