Quality AI feedback suggestions for dieticians

The Problem - No design system. No consistency. Lots of headaches.

The web platform had grown fast — but without much design oversight. Every team implemented UI elements however they saw fit, leading to messy inconsistencies and lots of duplicated work. Common patterns weren’t reused, and components were often built from scratch again and again. It was clear: the app needed a design system.

The Goal

To bring order to the chaos: create a reusable component library and a design system that provides clear guidelines and specifications — making the UI more consistent, scalable, and efficient for developers and designers alike.

My role

To bring order to the chaos: create a reusable component library and a design system that provides clear guidelines and specifications — making the UI more consistent, scalable, and efficient for developers and designers alike.

Where we started

We kicked things off by auditing the entire platform:

• What components already exist (and how many versions of each)?

• Which pages were being migrated next?

• Which components would be needed soonest?


We then held an in-person workshop to get alignment across the front-end & design team. We discussed how to define our components, how to document them, and how to structure the system in a way that matched our web-app’s design system — for a more unified product experience.

Designing the system

Then came the detail work. I focused on each component one by one, making sure every variation and edge case was covered — from dropdowns to date pickers. For each component, I explored:


• Visual design and accessibility

• All possible states (hover, focus, disabled, error, etc.)

• Usage guidelines and do’s/don’ts

• Best practices based on Material Design and our own platform needs

The outcome

As the platform is gradually being migrated, the new components are rolled out as part of that process. Instead of rebuilding elements from scratch, teams can now rely on a growing library of well-documented, flexible components — reducing development time and improving UX consistency.