Case Study
BH Design System
Baker Hughes is a major player in energy technology industry. The company develops and deploys the most advanced technologies to serve the energy & industrial companies looking for more efficient and reliable solutions.
This central BH UI Toolkit plays a vital role in building almost all its digital products faster, helping design and development teams across the organization.
Role
Design System Lead
UX Designer
Tools used
Project year
2021 - 2025 (Multiple versions)
Objectives
To streamline the process, build, improve, and maintain a scalable central component library that supports all BH products while ensuring consistency across the organisation.
Problem
The overall component design and code were rigid, inconsistent documentation, and difficult for project teams to adopt and reuse.
Challenges
- The earlier version of Design System had a long list of backlog in Github
- Project teams had already started adopting the basic version
- Technical resource constraints
- Third party library dependency constraints
Approach
As there were a few project teams who already adopted the design system and facing challenges, I decided to fix them first rather starting with a new one. I started understanding and analysing the existing overall architecture in the design and code. This 👇🏼 is the process I took to set a rythm to fix the existing issues.
Federated model
When I started collaborating with multiple project teams, their varying needs and priorities made it challenging to deliver solutions within a short timeframe. While parallelly streamlining the overall process, I initiated a Federated model, involving a few designers and developers from teams who are already adopting the first version of design system.
To manage multiple incoming change requests, I established a steering committee and led discussions to align priorities and decision-making.
With this approach, I was able to identify key priorities and significantly reduce the backlog. I also ensured teams were regularly informed about new releases and updates, which helped build trust and credibility across teams.
Set miles
Once the backlog tickets are on track, I started to focuss on revisiting the existing design system components. I developed a roadmap outlining key milestones, clearly showing the current state and the target goals.
Architecture
Considering the scalabality of this design system, catering to multiple projects linked with various internal organizations (sub-brands), I decided to take 3-Tire architecture with Atomic design approach.
Atomic Design
I reviewed all existing components against the Atomic Design framework to ensure they were structured for scalability. As this was an early version of the system, many components had significant room for improvement in
- Tokenization
- Structure & Prop Management
- Accessibility compliant
- Performance improvements
- Micro-interaction
- Clear documentation
Setting the foundation
The colour palletes were upgraded and made sure this is scalable and can cater to multiple project needs. The colours covered the tint and shades of brand colour, greys, alerts, data visualization and fundations.
Also, the typography was set to support the responsive screens and clear visual hierarchy.
Component creation
As per the brand standards and styles, started building components that are responsive and compatible with Accessibility. Although some base components already existed, I upgraded them rather than removing them to avoid disrupting project teams that were already using them. I also introduced additional components with flexible props and functionality, enabling teams to reuse them and accelerate development.
Documentation
Zeroheight is the tool used for documenting the Design system and was used by most of the devs and designers to refer for more details on the components. For every sprint, I updated the corresponding component with "Dos" and "Don'ts" which helped the devs and designers from other project teams to adopt the system with consistency.
I also kept all teams informed about the latest versions and updates through release notes shared via email and documented in GitHub for reference.
Result
⬆ 210% Increase in adoption rate across reagions
⬆ 310% Increase in number of components in library
🔻 98% Reduction in the backlog list
🔻 80% Reduction in turn around time
Let's work together to make a difference.
Happy to connect ☕️
phone
