HealthTech · Digital design system
Building a scalable design system with Jude’s team, creating shared foundations and reusable components for its website and ecommerce experience.
Jude spent its first year trading with a simple website and branding created at startup speed. Strong sales helped the team secure funding for a full rebrand and a more considered digital ecosystem.
An agency developed the new identity. I joined as the sole designer to translate it into a responsive design system and ecommerce experience, working with the Head of Product and engineering team. A junior designer joined later as the work expanded.
Jude already had a distinctive brand identity. The next task was to make it work across real interfaces: responsive type, purposeful colour, consistent spacing, components and interaction states. Without that layer, every new page would need to interpret the brand again.
Working closely with the Head of Product and the Jude team, I built the design system from scratch while the product and ecommerce experience continued to evolve.
I converted the brand palette into usable colour scales and semantic roles, then defined a responsive type hierarchy. The aim was to keep Jude recognisable across screens while giving the team precise styles to design with.
I defined grids, containers, breakpoints and spacing rules for desktop, tablet and mobile. These decisions gave the team a common way to compose pages, while leaving enough room for the brand to feel energetic and expressive.
Buttons, links, forms and other controls needed to work beyond their default appearance. I created reusable variants and interaction states so designers could show behaviour clearly and build new journeys from established patterns.
I organised the Figma files around foundations, reusable interface components and marketing patterns. Clear naming and a consistent setup made the system easier to find, maintain and extend as more people contributed to the digital experience.
I expanded the library into cards, dropdowns, form controls and other patterns that could support richer journeys. Each component was built to be consistent enough to reuse and flexible enough for the different needs of Jude’s site.
I audited the existing navigation and looked at how other brands balanced shopping, education, credibility and guidance. The review raised practical questions about the prominence of Reviews, the unclear “Get started” action, and where a referral offer belonged.
Desktop and mobile options tested clearer Shop and Learn groupings, product-led previews, a more explicit quiz prompt and space for the referral offer. I refined the menus to show useful detail without making them feel crowded.
The direction makes products easier to scan on desktop and uses compact, expandable sections on mobile. The quiz stays visible as a helpful route for someone who does not yet know what to buy.
A simplified comparison of the questions raised in the navigation audit and the final direction—not a reproduction of the earlier site.
Later in the engagement, I used the foundations and components to design key ecommerce pages. That work tested whether the library could do its most important job: support real customer journeys, not just look complete in Figma.
The result of my ten months was a shared digital foundation, a more organised way of working, and commerce designs shaped by the same rules. I’ll add more visual examples of the responsive layouts, component states, library and ecommerce pages as the project documentation develops.
Colour, type, layout and interaction rules brought the brand into a consistent digital experience.
Tokens, components and organised files gave the team a clearer starting point for new work.
Key ecommerce pages put the shared foundations into real customer journeys.
