About Beamery:
-
B2B enterprise scale-up in HR tech, 300+ employees
-
AI-powered talent platform for Fortune-500 companies
The team:
- The team was built from scratch.
- The majority of foundational work was conducted with 3 engineers and myself as a designer / product owner.
- After validating the ROI of the system, the team has progressively expanded to include an Engineering Manager, QA, more frontend engineers and a dedicated designer (reporting to me).
The problem:
-
Over 8 years of fast-paced development the product has acquired a lot of design & tech debt. That legacy hindered continuous growth and scaling, but also negatively impacted designer & developer experience.
-
Accessibility has always been an afterthought, leading to significant issues throughout the UI.
-
All of these factors were causing customer pain and increasing the churn / renewal risks. This has created a sense of urgency.
Main goals:
-
Unlock fast-paced product development
-
Make Beamery compliant with accessibility requirements
-
Enable scaling the business internationally
The approach:
The essence of the approach was in reducing the time to “market” and maximizing the value to the business. To support that, I and my team:
-
Started with a “pilot” programme
To fast-track the development of the system and bring it into customer's hands as soon as possible, we've partnered with a delivery team to help them redesign a page of their products.
We've analysed the upcoming projects through the lens of urgency vs impact vs scope vs effort, to pick the one that would:
-
allow us to build the majority of table stakes components;
-
be visible enough to get customer feedback, but not too critical;
-
be scheduled for release soon, so that we have a natural forcing function.
-
Parallelised design & development
To ensure that engineering isn't blocked by overloaded design, we utilised the approach headless components from Adobe Spectrum. This library provided engineers with all necessary technical foundations without style constraints and bought enough time for design to finish their part.
-
Streamlined the documentation
To provide customers with documentation, but reduce the time investment, we automated the generation of essential docs and interactive examples directly from code.
- Tied to strategic initiatives
To gain essential buy-in from senior stakeholders, we tied its development to strategic company goals: accessibility compliance, performance and internationalisation. This allowed to de-risk the investment into the system and clearly communicate its value to the business.
Outcomes:
-
The first pilot implementation allowed us to build enough foundations to unblock several teams to redesign their products using the new system.
-
We've successfully passed the voluntary accessibility assessment, validating the practical value of the design system for the company's strategic goals.
-
After 2 years since the inception, the design system has saved Beamery’s product teams 33,845 hours of time, which is equivalent to £5m in savings.
-
The design system was brought to a strong state of maturity, with 55 components and patterns, over 70% adoption, full multi-lingual support and 100% accessibility pass.
-
Engineers and designers have become highly engaged with the system: over 80 contributions, 200+ support tickets, CSAT: 87.5% and NPS: 38.
Learnings:
-
When developing a system, you must take into account the unique circumstances of your company and optimise for them — not for some golden standards.
-
Start small, move incrementally — this has been the essence of our approach. It doesn’t mean cutting the corners and shipping a scrappy solution. It means:
-
Create a vision of what you want to achieve and do a due diligence of discovery required.
-
Develop a strategy for getting to that vision.
-
Take the first step that will allow you to have an impact.
-