Hotjar's Design System
For the past year and a half, I've had the pleasure of working on the revitalization of Hotjar's design system.
When I joined the team, the design system was already created and consumed but left unattended for quite some time. This fact led to inconsistencies and inefficiencies across our products and processes.
My primary focus has been on breathing new life into the system and implementing the necessary tools and processes to simplify the lives of both designers and developers.
Product Design & Design Ops
2023
Hotjar is an insights platform that offers valuable information on user behavior and feedback. It enables users to understand behavior patterns, optimize user experience, and make informed decisions.
Our design system revitalization journey starts with some key stages aimed at understand the status and the usage of the system, and decide next steps to enhance efficiency and collaboration, streamline design and development and ultimately improve the user experience. Let's explore them:
1. Research and analysis: Conducted a research project to assess the current status of the design system. This involved understanding user pain points, needs and expectations and identifying gaps in the system.
2. Clean-up and optimization: Understood and prioritized tasks in the endless old design system backlog.
3. Establishment of processes: Introduced structured processes, guidelines and workflows for maintaining and updating the design system.
4. Long term goals: Created a roadmap aligning the design system with the company's goals and objectives.
One of the critical decisions we made for the successful evolution of our design system was the implementation of a governance model. Initially, the design system was maintained by a small team consisting of one designer and one engineer, operating in a centralized manner. This setup had some challenges, as it could sometimes result in delays and bottlenecks.
To address this, we opted for a hybrid model that combined elements of both centralization and federation. The central design system team retained ownership and primary responsibility for maintaining the system. However, we also actively encouraged and facilitated contributions from product teams across the company.
In essence, we established a fixed central team while opening avenues for external team members to participate and contribute to the system's growth and refinement.
To ensure success with our hybrid governance model and to give teams more autonomy, we created a set of rules and processes to contribute to the design system.
Everyone at Hotjar is encouraged to contribute to the Design System. If someone finds issues in the design, code, or documentation, or has ideas for additions or changes, they are welcome to contribute.
A general principle guides the addition of components: "Once is an isolated requirement, two is a coincidence, three is a pattern." If only one team expresses a need, it may be an isolated requirement. If two teams require the same component, it could be a coincidence. However, when three or more teams express a current or anticipated need for a specific component, it's time to add it to the Design System.
Option 1: Open a request to the Design System team
Everyone can submit a request to the team responsible for the design system. The team reviews the request and decides if it should be included in their backlog. If accepted, the team prioritizes and works on the request based on their capacity.
Option 2: Do it yourself
Contributors should bring the topic to the office hours or communicate the desired changes. If approved by the centralized team, contributors can proceed with the changes. The central design system team reviews and accepts the changes upon completion, and then publishes them.
Previously, accessibility wasn't a focal point for Hotjar. However, as part of our work to revitalize the Design System, we've made significant steps in prioritizing accessibility.
The updates on the design system now take into account the diverse needs of all users, fostering inclusivity and enhancing usability across Hotjar's products.
Moreover, we're actively influencing how product teams integrate accessibility considerations into their workflows.
We've integrated metrics into our design system to track the usage and adoption of components across projects over time.
These metrics help us measure production component usage, optimizing our codebase and driving adoption of the design system. Analyzing this data provides valuable insights that inform our next steps.
Explore Hotjar's Design system in Figma