Alva · Design system and product design

Alva is a London-based health startup. They’re are on a mission to improve menopause for all women. Giving women the answers and support they need and deserve. In early stages of product development I was brought on to set up the foundations of their design system. Over 11 days I worked with Phil — co-founder and CTO to define and implement an accessibility-first design system.

I had 11 days total to play with. Day 0 I had limited knowledge of Alva and the work. By day 11 we had the foundations of a design system built and documented. With the limited time it was important to have a plan for how those days would be spent. And to track progress against.

The 11 days were across 4 weeks. I broke the work down into 4 weekly milestones.

Gather context and a deep understanding of Alva, the product, and near term strategy. Then a first design audit across the product and marketing materials. Understanding what is currently in place.

Get the fundamentals in place. Collate what is there into a few solid basics. Mainly looking at typography, colour usage, spacing system, grid, and buttons.

Take the fundamentals further to other components. A deep dive into forms and inputs — which formed (pun intended) a big chunk of their consultation product.

Apply design system learnings to Alva's consultation product. Stress test the design system and feedback learnings limitations from application to the product.

Alva is all about supporting women going through their menopause. Women typically go through menopause between 45–55 years old. With the average age in the UK being 51.

This isn't your typical consumer product audience. Even more important than the typical age is common symptoms associated with menopause. Which can be debilitating symptoms like sleeping problems, anxiety, mood swings, headaches, low mood or depression. It becomes vital that we deeply understand this context and build our design system around that.

Accessibility was a core focus with the design system. Not a bolt-on. Our colour palette contained a combination of primary, neutral, status and background colours. All core combinations needed to pass AA colour contrast guidelines at a minimum.

I put in place an accessibility checklist. A list of items for design and engineering to check before releasing a feature or product. It covered fundamental things like colour contrast of elements, testing the tab order of pages, and checking that dynamic type sizes are supported gracefully.

After 11 days we documented and implemented the first version of Alva’s design system. This wasn't the end goal though — the design system was built knowing that it will need to be evolved as Alva evolves. We also released the first version of Alva's menopause consultation product. Built from our design system work.