BMG-Initiative Long COVID
Collaborated with a cross-functional team of developers, designers, and product owners to build and refine frontend components using MUI, Next.js, and Figma.
Date
2023
Role
Front-End Development
Client
die wegmeister
Situation
The German Federal Ministry of Health (BMG) needed an official information platform for Long COVID — a trusted, publicly accessible resource for affected individuals, healthcare professionals, and the general public. The platform (bmg-longcovid.de) had to meet high standards for accessibility, responsiveness, and content clarity, given the sensitivity of the topic and the diversity of its audience.
I joined an interdisciplinary team at die wegmeister gmbh consisting of designers, senior developers, and product owners to build the frontend of this platform. As a public sector project, there was no room for compromise on accessibility compliance or cross-device usability — the platform needed to work reliably for everyone.
Situation
The German Federal Ministry of Health (BMG) needed an official information platform for Long COVID — a trusted, publicly accessible resource for affected individuals, healthcare professionals, and the general public. The platform (bmg-longcovid.de) had to meet high standards for accessibility, responsiveness, and content clarity, given the sensitivity of the topic and the diversity of its audience.
I joined an interdisciplinary team at die wegmeister gmbh consisting of designers, senior developers, and product owners to build the frontend of this platform. As a public sector project, there was no room for compromise on accessibility compliance or cross-device usability — the platform needed to work reliably for everyone.
Situation
The German Federal Ministry of Health (BMG) needed an official information platform for Long COVID — a trusted, publicly accessible resource for affected individuals, healthcare professionals, and the general public. The platform (bmg-longcovid.de) had to meet high standards for accessibility, responsiveness, and content clarity, given the sensitivity of the topic and the diversity of its audience.
I joined an interdisciplinary team at die wegmeister gmbh consisting of designers, senior developers, and product owners to build the frontend of this platform. As a public sector project, there was no room for compromise on accessibility compliance or cross-device usability — the platform needed to work reliably for everyone.
Task
As a front-end developer, my responsibilities centered on turning design into functional, production-ready UI:
Component development: Building key frontend components using Next.js and MUI, following the product designer's specifications and the project's design system.
Responsiveness: Ensuring all components worked seamlessly across devices and screen sizes.
Accessibility: Implementing components in compliance with WCAG standards, so users with diverse abilities could navigate and access content without barriers.
Design–development alignment: Collaborating closely with the design team to ensure that the implemented UI matched the intended UX — both visually and in interaction behavior.
Task
As a front-end developer, my responsibilities centered on turning design into functional, production-ready UI:
Component development: Building key frontend components using Next.js and MUI, following the product designer's specifications and the project's design system.
Responsiveness: Ensuring all components worked seamlessly across devices and screen sizes.
Accessibility: Implementing components in compliance with WCAG standards, so users with diverse abilities could navigate and access content without barriers.
Design–development alignment: Collaborating closely with the design team to ensure that the implemented UI matched the intended UX — both visually and in interaction behavior.
Task
As a front-end developer, my responsibilities centered on turning design into functional, production-ready UI:
Component development: Building key frontend components using Next.js and MUI, following the product designer's specifications and the project's design system.
Responsiveness: Ensuring all components worked seamlessly across devices and screen sizes.
Accessibility: Implementing components in compliance with WCAG standards, so users with diverse abilities could navigate and access content without barriers.
Design–development alignment: Collaborating closely with the design team to ensure that the implemented UI matched the intended UX — both visually and in interaction behavior.
Action
Translating design into scalable components Working from Figma files and the established design system, I built interactive UI components with Next.js and MUI. I focused on getting both the visual details and the underlying logic right — hover states, transitions, content behavior at different breakpoints — so the components felt polished and consistent.
Prioritizing accessibility from the start Rather than treating accessibility as a late-stage fix, I integrated WCAG compliance into my development workflow from the beginning. This included semantic HTML structure, proper ARIA attributes, keyboard navigation support, and sufficient color contrast — essential for a public health platform that needs to reach the widest possible audience.
Ensuring cross-device reliability I systematically tested and refined components across screen sizes, making sure layouts adapted cleanly and interactive elements remained usable on mobile, tablet, and desktop. For a government health resource, broken layouts or hard-to-tap buttons aren't just a UX issue — they're a trust issue.
Collaborating within an agile workflow Using GitLab for version control and Jira for task management, I worked in close feedback loops with designers and senior developers. This meant quick iterations, early alignment on implementation questions, and fewer surprises during review cycles.
Action
Translating design into scalable components Working from Figma files and the established design system, I built interactive UI components with Next.js and MUI. I focused on getting both the visual details and the underlying logic right — hover states, transitions, content behavior at different breakpoints — so the components felt polished and consistent.
Prioritizing accessibility from the start Rather than treating accessibility as a late-stage fix, I integrated WCAG compliance into my development workflow from the beginning. This included semantic HTML structure, proper ARIA attributes, keyboard navigation support, and sufficient color contrast — essential for a public health platform that needs to reach the widest possible audience.
Ensuring cross-device reliability I systematically tested and refined components across screen sizes, making sure layouts adapted cleanly and interactive elements remained usable on mobile, tablet, and desktop. For a government health resource, broken layouts or hard-to-tap buttons aren't just a UX issue — they're a trust issue.
Collaborating within an agile workflow Using GitLab for version control and Jira for task management, I worked in close feedback loops with designers and senior developers. This meant quick iterations, early alignment on implementation questions, and fewer surprises during review cycles.
Action
Translating design into scalable components Working from Figma files and the established design system, I built interactive UI components with Next.js and MUI. I focused on getting both the visual details and the underlying logic right — hover states, transitions, content behavior at different breakpoints — so the components felt polished and consistent.
Prioritizing accessibility from the start Rather than treating accessibility as a late-stage fix, I integrated WCAG compliance into my development workflow from the beginning. This included semantic HTML structure, proper ARIA attributes, keyboard navigation support, and sufficient color contrast — essential for a public health platform that needs to reach the widest possible audience.
Ensuring cross-device reliability I systematically tested and refined components across screen sizes, making sure layouts adapted cleanly and interactive elements remained usable on mobile, tablet, and desktop. For a government health resource, broken layouts or hard-to-tap buttons aren't just a UX issue — they're a trust issue.
Collaborating within an agile workflow Using GitLab for version control and Jira for task management, I worked in close feedback loops with designers and senior developers. This meant quick iterations, early alignment on implementation questions, and fewer surprises during review cycles.
Result
The platform launched successfully as the official Long COVID information resource of the German Federal Ministry of Health:
Fully accessible — built to WCAG standards, ensuring the platform serves users with diverse abilities and needs.
Responsive across all devices — reliable and usable whether accessed on a phone in a doctor's waiting room or a desktop at home.
Consistent with the design vision — close collaboration with designers ensured the implemented UI matched the intended experience without compromises.
Delivered on schedule — the agile workflow and structured collaboration enabled the team to ship a high-quality product within the project timeline.
Beyond the deliverable, this project strengthened my ability to work at the intersection of design and development — building components that don't just look right, but behave right for real users in real contexts.
Result
The platform launched successfully as the official Long COVID information resource of the German Federal Ministry of Health:
Fully accessible — built to WCAG standards, ensuring the platform serves users with diverse abilities and needs.
Responsive across all devices — reliable and usable whether accessed on a phone in a doctor's waiting room or a desktop at home.
Consistent with the design vision — close collaboration with designers ensured the implemented UI matched the intended experience without compromises.
Delivered on schedule — the agile workflow and structured collaboration enabled the team to ship a high-quality product within the project timeline.
Beyond the deliverable, this project strengthened my ability to work at the intersection of design and development — building components that don't just look right, but behave right for real users in real contexts.
Result
The platform launched successfully as the official Long COVID information resource of the German Federal Ministry of Health:
Fully accessible — built to WCAG standards, ensuring the platform serves users with diverse abilities and needs.
Responsive across all devices — reliable and usable whether accessed on a phone in a doctor's waiting room or a desktop at home.
Consistent with the design vision — close collaboration with designers ensured the implemented UI matched the intended experience without compromises.
Delivered on schedule — the agile workflow and structured collaboration enabled the team to ship a high-quality product within the project timeline.
Beyond the deliverable, this project strengthened my ability to work at the intersection of design and development — building components that don't just look right, but behave right for real users in real contexts.
