Product Design

20+ years across national and multinational companies, government, publishers and SME / startups. Experienced as a Senior, Principal or a Lead role. Strategic product design and development. Problem-solving & impact-driven.

Cases

Selection

Limita
Limita
Limita
Limita
Website Limita
Detail website Limita
Detail website Limita
Case
  • Industry / Branch
  • Fine Furniture Design & Production
  • Role
  • Product Designer
  • Services
  • Concept · Research · UX UI Design · Interactive Prototyping · LEAN · Web Development · Accessability Wcag + EAA · Hosting · Project Management
Summary
  • The Why
  • Limita, a boutique artisanal furniture maker, had no digital presence. Their customers, high-income professionals who value authenticity and craftsmanship, were abandoning generic online stores with soulless "IKEA" aesthetics. Research (including an immersion day in the workshop) showed:
    1. - Buyers want stories, heritage, and a direct connection to the maker, not sterile catalogues,
    2. - The business grew entirely through word-of-mouth, no scalable discovery channel,
    3. - Competitors were very few, but none used digital storytelling to differentiate.
    Therefore the site had to build trust through transparency, not just display products.
    Authenticity - not price, would win this audience.
Decisions
  • Design
    • Organic palette & minimal layout, lets the wood grain and craftsmanship speak, avoiding the cold luxury look our personas rejected,
    • Story-driven visuals, photography shows the artisan at work, raw materials, and production stages, not just finished products. Every image earns trust,
    • WCAG/EAA compliance from day one, a must for an inclusive, premium brand; also a competitive signal of quality and attention to detail,
    • Clear information architecture with dedicated craftsmanship pages, visitors "meet" the artisan before they see the catalogue.
  • Development
    1. LEAN, modular HTML/CSS/JS - no framework dependencies. The client (a small enterprise) couldn't predict content delivery; a flexible, component-based codebase allowed quick iteration without costly rework,
    2. E-commerce roadmap, the site was built with a future shop in mind, but we launched with storytelling first to build the audience,
    3. High-fidelity prototyping in the browser, current clients validated interactions quick & early, ensuring the final design felt warm and trustworthy.
  • Content & engagement
    1. "From forest to your home" narratives, trace a table's journey from raw timber to finished piece,
    2. Artisan voice throughout, tool stories, workshop videos, material sourcing details. No faceless brand,
    3. Personal consultation option, virtual studio visits appeal to the persona's desire for a direct connection,
    4. Social media only as invitation: every post leads back to the rich, immersive website content.
Result
  • The site unified Limita's brand identity, blending contemporary elegance with visible craftsmanship. Organic search and referrals now convert international buyers, not just local word-of-mouth. The modular foundation is ready for e-commerce expansion.
  • Insights
    • Immersion beats assumptions: spending a day in the workshop revealed stories no brief could contain,
    • Accessibility early = quality signal: it reinforces the craftsmanship narrative, not an afterthought,
    • LEAN protects both parties: building modularly with minimal dependencies allowed us to deliver value despite uncertain content timelines.
2Deluxe
Scroll landing page
Bottom Action bar
 
Laptop view landing page
WCAG page detail
EAA page detail
Case
  • Industry / Branch
  • Sustainable & Green IT
  • Role
  • Product Designer
  • Services
  • Concept · Research · UX UI Design & Engineering · Interactive Prototyping · LEAN · Web Development · Accessability Wcag + EAA · Hosting · Project Management
Summary
  • The Why
  • 2Deluxe needed a digital home that practices what it preaches: sustainable, accessible, and genuinely fast. Existing providers buried green claims in PDFs, used impenetrable jargon, or built on bloated frameworks that contradicted their eco-promise. Research with SMEs, creative agencies, and accessibility-focused users revealed:
    1. - Users couldn't verify green hosting- reports hidden in technical docs or absent altogether,
    2. - Accessibility users assumed dashboards would fail on screen readers or keyboard - only input,
    3. - Heavy frameworks = heavier energy cost. A site's code must be as sustainable as its message.
    Therefore the product itself had to be the proof: lightweight, transparent, and inclusive from the very first byte.
Decisions
  • Design
    • Minimalist, earthy palette with muted tones and no heavy hero videos; the visual language itself whispers "green" without the performance cost,
    • Education Hub as a dedicated EAA section explains accessibility law in plain terms, building trust and making compliance feel approachable,
    • Full WCAG 2.1 AA from day one: high-contrast, logical focus states, semantic structure - the interface became the proof of its own promise.
  • Development
    • Zero-dependency build with HTML/CSS/JS, the site itself achieves perfect Lighthouse scores (100% Performance, Accessibility, Best Practices), using a fraction of the energy of a typical WordPress or React build,
    • LEAN, modular components makes future expansion requires no dependency updates; the client can reuse, rearrange, and grow without vendor lock-in,
    • Coded prototypes with the keyboard navigation and screen reader compatibility were tested in days, not weeks, enabling rapid iteration with real users.
  • Content & engagement
    1. "The site is the proof" - carbon savings and renewable energy data are shown transparently on the dashboard, not hidden in a PDF,
    2. Persona-driven messaging - Sophie's frustration with greenwashing directly shaped the tone: no vague claims, only verifiable facts,
    3. Lightweight performance is marketed as a feature: faster equals greener, simpler means more trustworthy.
  • Benchmarking
  • Mapped the core user flows against WCAG 2.1 AA standards before a single pixel was placed.
Result
  • The live site scores a perfect 100% across Google Lighthouse Performance, Accessibility, and Best Practices - walking the walk of sustainable design.
    Clients immediately recognised the financial upside: simpler to build, maintain, and expand without recurring framework overhead.
    The accessible-by-design approach opens doors to public-sector and climate-focused NGOs.
  • Insights
  • Sustainability is a UX metric - users equate speed and lightweight code with genuine ecological commitment,
    Accessibility early = trust - it speaks directly to the values of the core audience and differentiates from greenwashers,
    Zero-dependency freedom - without framework CVEs or breaking changes, the client owns a stack that will age gracefully and cost less to run.
-->
Sulvalda
Sulvalda
Sulvalda
Sulvalda
 
Sulvalda
Case
  • Industry / Branch
  • Recycling & Engineering
  • Role
  • Product Design Developer
  • Services
  • Consulting · UX Design · UX/UI Engineering · Interactive Prototyping · Lean · Development · Usability · Accessability Wcag + EAA
Summary
  • The Why
  • Sulvalda, a Dutch start-up at the intersection of recycling and engineering, needed to launch a credible online presence - fast.
    Procurement managers in municipalities, construction firms, and industrial partners vet partners by clarity and substance, not visual flash.
    Dense, text-heavy sites that fail on mobile cost them time and trust.
    The dual challenge: speed to market (no long build cycles) and instant credibility (engineering precision + environmental commitment visible from day one). The site itself had to signal operational competence.
Decisions
  • Design
    • Industrial palette as browns, dark greys, clean whites - reflects both the environmental mission and the engineering backbone, immediately signalling reliability,
    • Custom technical illustrations, complex recycling workflows are demystified at a glance; no stock imagery, just clear, scannable explanations,
    • Shallow information architecture for core service descriptions, certifications, and approach were structured for scanning, not reading; every page delivers value within the first viewport,
    • Crisp, high-legibility typography: reinforces precision and ensures flawless readability on any device.
  • Development
    1. LEAN, high-fidelity HTML/CSS prototypes from the first workshop we moved directly into live code, not static mockups. The founder tested a responsive version on phone and desktop within days, validating decisions instantly,
    2. Zero-dependency, modular codebase - pure HTML/CSS/JS ensures sub-second load times, minimal energy consumption, and easy expansion without refactoring. The lightweight tech stack itself aligns with the client's sustainability mission,
    3. Full WCAG/EAA compliance from the start as is essential for public-sector stakeholders relying on assistive technologies; accessibility becomes a trust signal, not an afterthought.
  • Content & engagement
  • Service descriptions were tested and refined with the founder within days, feedback loops were so short that adjustments landed directly in the design system and codebase,
    Custom illustrations and a clean, industrial voice position the company as an informed, serious partner - not a generic consultancy,
    The site's own performance (fast, lightweight, accessible) serves as a living case study: it proves the same precision the firm promises to clients.
Result
  • Sulvalda launched a professional online presence within the agreed timeline. The clean, industrial interface and deliberate performance instantly positioned the start-up as a credible engineering and recycling partner.
    The modular, dependency-free stack gives the founder full ownership. Any future services or case studies can be added without re-engaging a developer.
  • Insights
    • LEAN is a competitive advantage: for start-ups, the ability to iterate in code (not slides) reduces time-to-value dramatically,
    • Trust lives in the details, Accessibility and performance aren't extras; in technical industries they are direct indicators of operational competence,
    • A modular codebase scales with the business: simple, well-structured HTML/CSS/JS is the most sustainable foundation for future growth.
Waternet
Waternet Amsterdam
Waternet Amsterdam
Waternet Amsterdam
 
Waternet Amsterdam
Case
  • Industry / Branch
  • Semi-Government / Water Management
  • Organisation
  • Waternet Amsterdam
  • Role
  • Product Designer
  • Services
  • Product Design Development · UX Engineering · Web Development · Accessibility · Usability
Summary
  • The Why
  • Waternet, Amsterdam is public water authority, serves over a million residents and businesses.
    The existing website had solid core functionality, but common tasks - reporting a leak, checking water quality, paying bills, were buried under unclear labels, complex forms, and cluttered pages.
    On mobile, the experience was especially frustrating, with tiny touch targets and hard-to-complete workflows. As a semi-government utility, users expected the clarity and speed of a modern service, not bureaucracy.
    The challenge: deliver measurable UX improvements without a full rebuild, while meeting Dutch government accessibility standards.
Decisions
  • UX & Design
    • Surgical, high-impact changes means no visual overhaul. Instead, clarified navigation labels, re-grouped form fields, and surfaced the top 4 citizen tasks on the homepage,
    • Mobile-first refinements for enlarged touch targets, optimised inputs for on-screen keyboards, and restructured critical service information for quick scanning on small screens,
    • Reduced cognitive load means simplified multi-step forms so reporting a leak or finding water hardness data takes fewer clicks and less mental effort.
  • Technical & Accessibility
    1. WCAG compliance as a core requirement for improved focus states, colour contrast, and semantic markup for screen-reader users, making forms and service updates accessible to all citizens,
    2. Iterative front-end implementation: each improvement was tested against the core tasks identified during discovery, ensuring measurable speed and clarity gains without side effects,
    3. Alignment with existing tech stack: all changes stayed within Waternet's infrastructure, zero risk of a platform rebuild.
  • Process & Stakeholders
  • Continuous review with Waternet's internal team kept every tweak aligned with communication standards and data-privacy regulations,
    Short feedback cycles: UX refinements were implemented, reviewed, and validated directly in the live environment, cutting project overhead and speeding delivery.
Result
    • - The streamlined interface reduced task-completion time for thousands of daily users,
    • - Navigation flows became intuitive, mobile usability jumped dramatically, and accessibility barriers were removed,
    • - Waternet's digital services now feel as reliable and clear as the water it delivers - without a single line of wasted code or a costly redesign.
  • Insights
  • Incremental changes can transform public trust: even small UX improvements, when they hit the most critical tasks, have an outsized impact on citizen satisfaction,
    Usability is a public service metric: for a utility, the ease of online interactions directly correlates with trust in the institution,
    Mobile is the front door for a smooth on-the-go experience is no longer a luxury; it's where real-world issues get resolved.
National Library
Delpher
Delpher
Delpher
KB Nationale Bibliotheek
 
KB Nationale Bibliotheek
Case
  • Industry / Branch
  • Government & Education
  • Organisation
  • KB National Library / Delpher
  • Role
  • Product Designer
  • Services
  • Consulting · Analysis · UX Research · UX Design · UI Design · Prototyping · Engineering · Development · Usability · Optimization · Accessibility Wcag
Summary
  • The Why
  • Delpher, the Dutch National / Royal Library's digital archive, is a national treasure - millions of historical documents, newspapers, and books.
    But the interface had become a barrier: cluttered, desktop-centric, and inaccessible to many. Its users - from hard-core academics to retirees tracing family history, all valued the depth of content but were frustrated by the friction of the interface.
    Mobile view was essentially non-existent, screen-reader users were locked out, and the dated UI eroded trust.
    The challenge was clear: create Usability and Accessibility without a structural overhaul. The platform's legacy workflows had to be respected; radical change would alienate loyal researchers.
Decisions
  • Design
    • I created new user flow and GUI have effectively addressed the immediate issues and improved overall functionality and user satisfaction. My approach highlights the importance of prioritizing User Experience and Usability over purely aesthetic considerations, which is a common challenge in Product Design projects.
    • Restraint as a principle: no full rebuild. Instead, a clean-up of visual hierarchy, spacing, typography, and colour contrast. Existing functionality was elevated without forcing users to relearn anything,
    • Academic, neutral palette with improved contrast ratios subtle enough for intense, long-form reading sessions, crisp enough to signal institutional authority,
    • Typography tuned for reading digitized historical texts and line heights, font sizing, and measure optimised across breakpoints,
    • Mobile-first responsive framework and for the first time, centuries-old newspapers became comfortably browsable on phones and tablets. The document viewer, search filters, and navigation adapted gracefully without breaking the core search experience.
  • Technical & Accessibility
    1. The main focus was understanding how the GeoTool app functions and translating its GUI into a workable and functional solution.
    2. After each layer upgrade, it was necessary to test the entire app to identify any new occurring phenomena or issues that might have arisen.
    3. I have reworked and restructured the "GeoTool" apps' Filter menu, introduced the Search function, and reduced the navigation depth.
    4. Accessibility compliance was embedded from the start, as it was necessary for a government organization to follow WCAG requirements.
  • Process & Validation
  • High-fidelity mockups & prototypes presented directly to stakeholders - visual and interaction decisions were aligned rapidly in a government setting that required minimal disruption,
    Responsive layout underwent iterative refinement to keep dense information legible - early testers validated that context was never lost on smaller screens.
Result
  • Visual noise stripped away, replaced by a clean, professional aesthetic befitting a national institution.
    Search became intuitive and responsive. For the first time, centuries-old newspapers could be explored on any device.
    The platform remained true to its heritage mission - but now with a modern, inclusive interface that boosted user satisfaction and engagement significantly, without breaking a single legacy workflow.
  • Insights
    • Respect the legacy: in public institutions, minimal, surgical UI improvements often deliver far more value (and less risk) than grand redesigns,
    • Mobile is an accessibility issue: for older demographics and students alike, responsive design directly drives engagement and inclusion,
    • Trust is built through clarity: a clean, accessible interface reinforces the authority and reliability of a national library.
National Railways
NS
NS
NS
 
NS
Case
  • Industry / Branch
  • Semi-Government / Public Transport
  • Organisation
  • Dutch Railways (NS)
  • Role
  • Design Engineer & UX/UI Web Designer
  • Services
  • Concept · Research · UX Design · UI Design · Web Design · Front-end web development · Usability · Accessibility WCAG
Summary
  • The Why
  • NS moves over a million travelers daily. The legacy website was slow, clunky on mobile, and inaccessible to many screen readers and keyboard-only users were locked out of critical journey planning.
    Peak-hour delays turned the interface from a tool into a liability. The audience couldn't be more diverse: daily commuters needing split-second updates, elderly travelers navigating complex layouts, and international tourists who don't know Dutch geography.
    The urgent need: a modern, dynamic front-end that felt fast, worked everywhere, and met government accessibility standards - without breaking the real-time services millions rely on.
Decisions
  • Design
    • Mobile-first, enlarged touch targets, because most travellers check trains on their phone during rush hour, not at a desk,
    • Simplified, scannable layouts - key information (departure times, platform changes, disruptions) surfaced immediately; no buried content,
    • User flows for multiple steps and screens, whether filling out a form or going through a filtering, search, or selection process.
    • Consistent, clean UI components, rebuilt journey planner, departure boards, and disruption alerts as reusable AngularJS modules, enabling real-time updates without page reloads.
  • Technical & Accessibility
    1. WCAG 2.1 AA from the first line of code - semantic HTML, ARIA labels, logical focus states, and robust keyboard navigation built into every new component, ensuring travellers with disabilities could plan journeys independently,
    2. Phased migration - core UI modules were transitioned one by one from static to AngularJS, reducing risk, enabling continuous user feedback, and never disrupting live travel information,
    3. Performance-first engineering - the dynamic front-end eliminated full page reloads and boosted perceived speed on critical paths like departure times.
  • Process & Validation
  • Close collaboration with NS product teams, designers, developers, and testers across multiple sectors (2013-2017) ensured every component balanced inclusivity with scalability,
    Real-world testing with commuters and screen-reader users validated that the dynamic interface reduced task time and improved accessibility - feedback drove immediate refinements.
Result
  • · The modernized front-end delivered measurably faster journey planning for millions of travellers.
    · Real-time updates arrived without page refreshes, mobile usability jumped, and accessibility barriers were removed - aligning NS with both user expectations and regulatory standards.
    · The modular foundation paved the way for future digital improvements without a single point of failure.
  • Insights
    • Modernisation must be almost invisible - for critical public infrastructure, the best transitions are those users only notice because everything feels faster and more reliable,
    • Accessibility is a public duty, not a feature - semi-government services must engineer inclusivity into the component architecture, not bolt it on later,
    • Phased migration protects everyone - replacing legacy constructs piece by piece allows continuous delivery and minimises disruption to essential services.
TNO Companies
TNO Companies
TNO Companies
TNo Companies
Case
  • Industry / Branch
  • Science & Investment
  • Role
  • Product Designer
  • Services
  • Lean Development · Consulting · UX UI Engineering · Prototyping · Web Development · Usability · Project Management
Summary
  • The Why
  • TNO Companies (subsidiary of Dutch applied research giant TNO) from Delft, needed a digital presence that simultaneously signalled scientific rigour and investment opportunity.
    An external agency had delivered a strong creative concept, but it wasn't engineered for the real world: bilingual content, performance, and critically - a CMS that non-technical staff could manage without breaking the design.
    The site had to earn trust from two very different external audiences (researchers and investors) while giving the internal team total control with zero training overhead.
Decisions
  • Design
  • Agency concept preserved, technically refined: the visual language balanced scientific authority and investment appeal through clean typography, structured data presentation, and a restrained professional palette,
    Bilingual by architecture, not duplication - a seamless Dutch/English toggle was built into the data model, so every piece of content (research, news, investor updates) could be managed and displayed in both languages without double work.
  • Technical & CMS
    1. Custom CMS, purpose-built for simplicity - only the fields the TNO team actually needed were exposed; everything else was hidden. Updating bilingual content, adding news, or managing partner listings required no technical knowledge and zero risk of breaking the design,
    2. Performance & SEO optimized: the site was engineered to load fast and rank well in both Dutch and English, ensuring research partners and investors could find TNO Companies instantly,
    3. Front-end precision - the static concept was translated into responsive, accessible code that worked on every device.
  • Process & Validation
    • - Lean iterative builds as functional prototypes were shared with stakeholders, allowing real-time validation of bilingual flows and the admin experience,
      - Direct CMS testing where TNO administrators used the interface early; their feedback confirmed the simplified design cut the learning curve dramatically and removed the need for ongoing developer support.
Result
  • The bilingual website launched as a robust, professional platform that accurately reflects TNO Companies' dual identity.
    The custom CMS empowered the internal team to manage everything independently, slashing long-term operational costs.
    The collaboration model - agency vision, my technical execution produced a product that earned trust from both scientists and investors.
  • Insights
    • Transformed the state-of-art visual into a state-of-the-art functional online product,
    • Admins' UX is part of the overall product UX. Designing for internal users is just as critical as designing for external audiences; an intuitive, well-thought-out CMS acts as a force multiplier for client autonomy,
    • Collaboration scales with a clear split between agency creative and technical execution yields consistent, high-quality outcomes across multiple projects,
    • Bilingual by design - smooth language switching is not a feature, it's an expectation; building it into the architecture from day one avoids expensive retrofitting.
DePers
DePers
DePers
DePers
DePers
DePers
Case
  • Industry / Branch
  • Publishing & Investment
  • Role
  • Product Designer
  • Services
  • Concept · Consulting · UX Research · UX UI Design · Web Design · Prototyping · Engineering · Development · Usability
Summary
  • The Why
  • AEX Media Amsterdam set out to build the first Dutch online news platform that would engage readers, not just broadcast headlines.
    The target audience as investors, analysts, executives, were tired of ad-cluttered, slow sites that buried financial data in unreadable tables. They wanted a platform as sophisticated as their own work: instant, scannable, and interactive, across every device.
    The site had to balance dense market numbers with long-form readability, and transform passive consumers into an active community, without the friction of paywalls or pop-ups.
Decisions
  • Design
    • Editorial, high-contrast palette built around trust, speed and precision,
    • Typographic hierarchy was tuned for both scanning financial data and immersive long-form reading,
    • Custom data visualizations - market numbers and tickers transformed into subtle, scannable insights; key metrics highlighted without visual noise, letting the editorial voice lead,
    • Clean, authoritative interface: visual elegance signalled credibility, exactly what the "Informed Decision-Maker" expects from a premium financial news source.
  • Technical & Performance
    1. Performance-first front-end with sub-second load times were non-negotiable for readers checking markets between meetings or during commutes,
    2. Modular, dynamic architecture - enabled real-time data updates and a personalized feeds, keeping the experience seamless,
    3. Optimized readability - typography was carefully calibrated for long-form reading, with optimal line-height, measure, and contrast to reduce eye strain during extended sessions.
  • Engagement & Interactivity
    1. - Interactive tools: real-time polls, meaningful comment sections, personalized feeds, were woven into the reading flow, not bolted on as afterthoughts,
    2. - Community features were designed to make daily participation feel natural, turning casual readers into loyal returnees - a first for Dutch news at the time.
  • Process & Validation
  • High-fidelity prototypes were tested with investment professionals to validate the balance between visual sleekness and information density,
    Developed a user flow that provides an intuitive experience for forms, forums, and new interactive features, guiding users through these elements and handling both common and uncommon interactions,
    Rapid iteration for readability and data-widget clarity and typography scaling were refined until the experience felt premium.
Result
  • The platform launched as the first truly interactive Dutch news website, smoothy blending editorial authority with sleek, modern design.
    Platform was recognized with the prestigious award for Best Dutch NEWS Website, validating the UX design strategy.
    AEX Media became a leading digital voice, the proof that dense financial data, when treated as a design asset, builds both credibility and daily engagement.
  • Insights
    • Data doesn't have to be dull, with careful design, financial information becomes a compelling visual asset that reinforces trust,
    • Engagement is engineered, not added so that interactivity must be part of the fabric of the experience, not just a layer on top,
    • Performance = credibility - in news and investment, a slow site is a forgotten site; sub-second loads are as important as the headlines themselves.
RWS
RWS
RWS
RWS

Case
  • Industry / Branch
  • Government / Geospatial Water Management
  • Organisation
  • Ministry of Infrastructure & Water Management (RWS)
  • Role
  • Product Designer
  • Services
  • Consulting · Analysis · UX Design · UI Web Re-design · UX UI Engineering · Prototyping · Mockup · Development · Usability · Optimization · WCAG Accessibility
Summary
  • The Why
  • I was hired to solve integration problems that the Ministry of RWS had with their "GeoTool" app and a new handovered GUI - designed by a renowned Dutch agency.
    I focused on the user experience by analyzing the GUI layout, identifying usability and functional issues, reporting flaws, and creating a replaceable solution.
    I received an official thank-you letter from the Ministry for using my expertise to improve their tool, successfully addressing UX and usability issues.
Decisions
  • Design
    • I created a new user flow and GUI that improved functionality and usability by focusing on the user experience rather than aesthetics, which can be challenging in UX design.
      By focusing on how users interact with the interface rather than just how it looks, I ensure a more intuitive and effective experience.
      I support the adoption of user-centered design principles over prioritizing visual design first.
  • Development
    1. The main focus was understanding how the GeoTool app functions and translating its GUI into a workable and functional solution. After each layer upgrade, it was necessary to test the entire app to identify any new phenomena or issues that might have arisen.
    2. Filter menu was completely restructured, Search function introduced and Navigation depth reduced.
    3. Accessibility compliance was embedded from the start, as it was necessary for a government organization to follow WCAG requirements.
Result
  • The redesigned interface was integrated into the Java "Geotool" application. Analysts now work with an unobstructed map, intuitive filtering, and accessible controls.
    The tool is fully WCAG compliant, meeting government standards and serving all staff members equally. What started as a front-end integration ended as a usability rescue, proving that questioning the brief can uncover the real product.
  • Insights
    • Question the brief - uncovering entrenched UX flaws during integration can deliver far more value than blindly implementing specifications,
    • Map real estate is sacred - in geospatial tools, every pixel of the map matters; the UI must be supportive, never obstructive,
    • Government tools must be inclusive - WCAG compliance isn't a checkbox; it's a fundamental requirement for public sector software used by a diverse workforce.
Ministry Internal Affairs
Politie
Politie
Politie
Politie
Case
  • Industry / Branch
  • Government (Police)
  • Role
  • Product Designer
  • Services
  • Concept · Consulting · UX Research · UX UI Design · Web Design · Engineering · Prototyping · Development · Usability · Project Management
The Why
  • The Why
  • The Ministry of Interior's Police Top leadership diversity programme had a website that was never finished - fragmented across standalone pages, unstructured, and impossible to navigate. Police personnel, diverse recruits, and public officials couldn't find basic programme information. The digital home for a mission championing inclusivity was itself exclusionary. Without a complete structural redesign and a CMS the Ministry could actually use, the initiative would remain invisible.
Decisions
  • Design & Information Architecture
    • Logical, user-centric restructuring - scattered pages consolidated into clear thematic sections; every piece of content now sits under a predictable, intuitive menu,
    • Navigation built for diverse users - internal police stakeholders, potential recruits, and oversight bodies can now reach critical programme details in minimal clicks,
    • Cohesive visual identity - initial graphic direction by agency was refined and executed to reflect professionalism, warmth, and inclusivity - not a cold government portal.
  • Technical & CMS
    1. Custom, lean CMS - only essential controls exposed: update text, swap images, publish news; nothing extra. No risk of breaking the design or getting lost in admin complexity,
    2. Non-technical staff empowerment - the Ministry team can now manage the entire site autonomously, ensuring the platform stays fresh and relevant without external developers,
    3. Clean, maintainable codebase - built to government standards, accessible, and ready for future content growth.
  • Process & Collaboration
    1. Research-driven diagnosis - deep audit and audience research confirmed the fragmented IA was the root problem, not just visual design,
    2. Interactive prototypes validated the new navigation with Ministry stakeholders before a single line of final code,
    3. Agency + execution model - Barlock provided the visual concept; I led UX architecture, technical realisation, and the CMS build, blending creative polish with rigorous government-grade delivery.
Result
  • The digital platform that once hid the programme now carries it. Clear structure, intuitive navigation, and a welcoming design restored trust. The Ministry manages all content independently through a purpose-built CMS, turning a previously unfinished burden into a sustainable communication and recruitment asset for Dutch police diversity.
  • Insights
    • Structure is accessibility - in government comms, a logical IA is as critical as the content itself; confusion erodes credibility,
    • Collaboration amplifies value - pairing agency visuals with in-house UX/technical execution delivers a cohesive, high-quality digital product,
    • Simplicity empowers - a CMS stripped of unnecessary features is the most sustainable tool for government teams with limited technical resources.
Audi
Website Audi
Website Audi
Case
  • Industry / Branch
  • Automotive
  • Role
  • Product Design Engineer
  • Services
  • Analysis · UX UI Engineering · Prototyping · Web Development · Usability · Optimization
The Why
  • The Why
  • Audi Netherlands needed a Dutch-language website that didn't just translate content, but replicated the exact premium digital experience of the global brand.
    Audi's customers expect speed, precision, and visual perfection; any inconsistency in layout, load time, or interaction erodes the luxury perception.
    The challenge was to take high-fidelity UI mockups and build a final product that was pixel-perfect against Audi's Design System, seamlessly integrated with a Java CMS, and indistinguishable from the global flagship - all for a Dutch audience that judges engineering by the website alone.
Decisions
  • Design & Fidelity
    • Absolute adherence to Audi's Design System, every spacing, font weight, and micro-interaction was implemented exactly to spec, because premium means no compromises,
    • UX patterns preserved - navigation, model configurator flows, and dealership tools followed the global standard, ensuring a consistent luxury feel,
    • Dutch-specific refinements - where subtle localisation was needed (language length, address formats), it was solved without visual deviation.
  • Technical & Integration
    1. High-fidelity prototype first - key pages and interactions were built as functional HTML/CSS prototypes, allowing stakeholders to validate micro-interactions and visual precision before backend integration,
    2. Phased development cycles - UI components were built, reviewed, and tested in iterations, ensuring every module met Audi's rigorous quality gate before moving on,
    3. Seamless Java CMS integration - collaborated directly with backend developers to ensure content management was effortless while maintaining front-end performance and SEO.
  • Process & Collaboration
    1. Continuous feedback loop between UI engineering, stakeholders, and Java team, deviations from design were caught early and corrected immediately,
    2. Cross-functional collaboration ensured the final product aligned not only with brand values but also with real-world CMS maintenance needs and search visibility.
Result
  • The Audi Netherlands website launched as a flawless extension of the global brand - sleek, fast, and pixel-perfect across every device. Dutch customers could explore models, configure cars, and find dealerships with the same premium digital experience as any other market. The robust technical foundation enabled easy content updates via the Java CMS and set the stage for future market-specific enhancements.
  • Insights
    • Stick to corporate guidelines - pixel-perfect implementation builds instant trust for luxury automotive brands,
    • Engineering equals experience - fast load times and fluid interactions are as vital to the premium feel as the visuals,
    • Phased, integrated work scales - collaboration between front-end and back-end from the start ensures a robust, maintainable product.

Contact

& get in Touch

☖
aalleexxxxwwoorrkkss..ppaaggeess..ddeevv
✉
aalleexxxxwwoorrkkss@@pprroottoonn..mmee
☎
++3311((00))662200551199557722