Case Study:
Design Systems
In the reimagining of HackerOne's design system, my role was to guide and support the talented team as we developed a unified UI toolkit. This collaborative effort led to a streamlined process for both design and development, nurturing a space for innovation. Together, we cultivated a scalable design language that improved user experience and engineering workflows. My contribution was part of a collective push towards elevating product design, reflecting a shared vision for quality and strategic growth.
The Problem
At HackerOne, we encountered a crucial challenge: our design system was fragmented, leading to inconsistencies across our platform's user interface. Designers and developers faced a maze of legacy components and disjointed workflows, which hindered productivity and stifled innovation. The existing components lacked the cohesion necessary for a seamless user experience, and the documentation was scattered and incomplete. Our mission was to address these pain points by crafting a unified design language that was not only visually consistent but also deeply integrated with our engineering processes, enabling us to deliver a more intuitive and powerful cybersecurity platform.
My Role
As Head of Design at HackerOne, I guided the revamp of HackerOne's design system, enhancing UI consistency and speeding up engineering processes, reflecting our team's shared drive for innovation.
The Team
Head of Design - Sr. Design Manager - Product Designers - Researchers
Methodologies and Techniques
Participatory Design - Task Analysis - Competitive Analysis User Journeys - Usability Testing
Tools
Figma - Photoshop
Building components
In our pursuit of a unified design language at HackerOne, the focus was on constructing a comprehensive set of components that functioned cohesively rather than as isolated elements from disparate libraries. This endeavor was key to elevating both the aesthetic appeal and operational efficiency of the platform.
Alert, Banner, and Toast Integration: Merging Alert, Banner, and Toast into a seamless trio showcased our commitment to consistency and functionality, enhancing the user's navigation experience and message comprehension
Alert Guidelines: By establishing detailed guidelines for Alerts, we provided clarity on their individual usage, ensuring designers could implement them with precision and confidence
Toast and Progress Bar Combination: Showcasing the Toast component with an integrated Progress Bar illustrated our system's extensibility, offering a dynamic way to display transient content and progress simultaneously
Card Component Creation: The new Card component was designed from the ground up to resonate with our vision for a unified system, striking a balance between familiarity and innovation
Card Panel Consistency: The Card's structure, inspired by the existing Sheet component, reflects our drive for structural harmony and intuitive design language
Modal Dialogues: Introducing the Modal component emphasized our system's versatility, providing a focused space for user interaction without leaving the current context
Popover Component: The Popover, a derivative of the Card, extended our component library further, offering a lightweight, contextual overlay for additional content
Fostering Collaboration
At the heart of the HackerOne design system was a commitment to shared ownership and collaborative spirit. We embraced a governance model that drew on the RACI framework, ensuring that while the design system team held accountability, designers and engineers actively contributed insights and expertise. This participatory approach was crystallized in our governance documentation, which served as both a guide and a testament to our inclusive methodology. By inviting cross-functional engagement, we cultivated a culture where every contribution was valued, driving the design system forward with collective intelligence and concerted efforts
Accountability as a flywheel
To ensure our design system at HackerOne met its objectives of consistency and speed, we established a robust framework of accountability. Regular UMUX surveys and in-depth analysis of adoption metrics informed our progress. From these insights, we crafted targeted improvement strategies, fine-tuning our system to better serve our designers and engineers. This cyclical process of evaluation and enhancement—our 'accountability flywheel'—continuously propelled the development and refinement of our UI components, code, and documentation.
Conclusion
Throughout the HackerOne design system case study, a clear narrative of evolution emerges. The process began with consolidating fragmented components into a streamlined, cohesive toolkit, fostering innovation and collaboration. By implementing a RACI-based governance model and leveraging regular UMUX feedback loops, we ensured the design system's alignment with user needs and engineering efficiency. The continuous cycle of feedback and refinement, our 'accountability flywheel,' was pivotal in propelling the system forward, reflecting a shared dedication to advancing our design capabilities and reinforcing the value of teamwork.
The Results
Design consistency up by 15% since design system revamp.
Engineer deployment speed increased by 10% quarter over quarter.
User satisfaction improved by 8% after new UI rollout.
Reuse of UI components grew by 20% across products.