Research and Planning

Embarking on the design of the Open Regels Register required a deep dive into the intricacies of governmental regulations to ensure the platform's effectiveness and user-friendliness. A pivotal resource in this journey was the Regels Overheid Documentation, which provided comprehensive insights into the project's architecture and foundational principles.

A flowchart illustrating how policy goals are translated into laws, processed by various specialists, and implemented to impact citizens and businesses.

Key Learnings

Project Architecture
‍The documentation detailed the tripartite structure of the project, encompassing:

A hierarchical diagram showing the structure of "Regels" (Rules), divided into "Community," "Interactief" (Interactive), and "Content," with subcategories such as expert groups, architecture, methods, and publications.

Versioning Practices
‍Understanding the project's evolution was crucial. The transition from a unified versioning system using semantic-release to individual app versioning with changesets highlighted the team's commitment to precise and organized development workflows.

Software Bill of Materials
The automated tracking of dependencies via GitHub's dependency graph underscored the importance of transparency and security in the platform's development. This practice ensures that all libraries and packages are up-to-date and reliable, fostering trust among users.

Developing the Design System

Designing the Open Regels Register for the Dutch government required creating a user-friendly design system that embodies the trustworthiness expected of a government platform. This system needed to be intuitive for citizens and maintain consistency across the site. Given its role as a widely used public resource, it was essential that the design system not only followed best practices but also upheld principles of transparency, accessibility, and reliability.

Link to Design System

From Scratch
Creating the Open Regels Register from scratch required us to align with the Dutch government's visual identity guidelines, known as the Rijkshuisstijl. This meant adhering to specific color palettes and typography to ensure consistency and trustworthiness expected from a government platform.

Color Palette
‍I adopted the official government colors, including the primary Rijksoverheid Blue, inspired by Dutch skies, to maintain a cohesive visual identity.

Typography
‍Utilizing the Rijksoverheid Sans and Serif fonts, specifically designed for government communications, I ensured readability and professionalism across the platform.

Creative Freedom‍
While adhering to mandatory elements like logos and fonts, the absence of a comprehensive government design system allowed us to exercise creativity in developing components and layouts that met user needs while staying true to the Rijkshuisstijl principles.

Reusable Elements
I developed a set of versatile components—such as buttons, navigation menus, and form elements—that could be consistently used throughout the site, ensuring a unified look and feel.

A UI component anatomy diagram labeling different elements such as the label, icon, title, and text, with specifications for font, color, size, and spacing.

A design layout diagram illustrating spacing and alignment principles, showing padding, item spacing, and resizing settings for a label component, with measurement annotations in pixels.

‍

‍Documentation
‍Each component was accompanied by clear guidelines, facilitating ease of use for (future) designers and developers and maintaining design integrity.

Ensuring Accessibility
Prioritizing accessibility, I incorporated features like high-contrast text, keyboard navigation, and screen reader compatibility to make the platform inclusive for all users.

Team Effort
As the lead designer, I worked closely with trainees and interns, creating a collaborative and hands-on environment. To ensure top-notch quality, I also teamed up with experts from the NL Design System community, integrating their insights and best practices into our project.

Ongoing Enhancements
Treating the design system as a dynamic entity, I regularly updated it based on user feedback and evolving requirements, ensuring its relevance and effectiveness.

Wireframing and Prototyping

Embarking on the design of the Open Regels Register required a structured approach to visualize and test the platform's functionality before full-scale development. Utilizing Figma, I transitioned from initial sketches to interactive prototypes, ensuring a user-centered design that aligns with governmental standards.

Link to Interactive Prototype

My Figma design prototype showing a navigation flow with multiple connected screens, labeled with page names such as Home, Blog, Forum, and Agenda, with blue lines indicating interactive links between elements.

Key steps

Conceptualization
I began by sketching basic layouts to explore various design possibilities, focusing on user needs and content hierarchy.

Low-Fidelity Wireframes
Translating sketches into low-fidelity wireframes in Figma helped in mapping out the structure and flow without the distraction of visual details.
‍
User Flow Mapping
I ensured that the wireframes effectively represented the user's journey, highlighting key interactions and navigation paths.

High-Fidelity Prototypes
Building upon the wireframes, I developed high-fidelity prototypes incorporating real content and adhering to the Rijkshuisstijl guidelines.

Interactivity
Prototypes were made interactive to simulate user experiences, allowing for practical testing of functionalities and workflows.

An animated GIF showcasing interactivity in a Figma high-fidelity prototype, demonstrating filtering functionality using variables for managing rule-based methods.

User Testing and Iteration

To make sure the Open Regels truly serves its users, I embraced an open-source approach and an agile workflow, using GitHub for smooth collaboration and quick updates.

Defining Objectives
I established clear goals for each testing session, focusing on critical user tasks and platform functionalities.

Selecting Participants
A diverse group of users, including citizens with varying digital proficiency and stakeholders from different governmental departments, was recruited to provide comprehensive feedback.

Moderated Sessions
Facilitators guided participants through tasks, observing behaviors and gathering insights into user expectations and challenges.

Identifying Patterns
We systematically reviewed test results to detect common pain points, navigation issues, and areas where users hesitated or made errors.

Prioritizing Issues
Usability problems were ranked based on their frequency and impact on user experience, allowing the team to address the most critical issues first.

Iterative Design Approach

"Roadmap page showcasing an iterative design approach, with structured phases for design, content management, and DevOps improvements over time."

Design Adjustments‍
Based on user feedback, we refined visual elements, adjusted layouts, and modified interactive components to enhance clarity and usability.

Functional Enhancements
Improvements were made to search functionalities, content organization, and accessibility features, ensuring the platform catered to all users, including those with disabilities.

Subsequent Rounds
After implementing changes, additional testing sessions were conducted to evaluate the effectiveness of modifications and gather new feedback.

Agile Iterations
This cyclical process of testing and refining was repeated, fostering an agile development environment that quickly responded to user needs and emerging challenges.

Embracing Agile with GitHub