HTB
Design System

HTB
Design System

HTB
Design System

A system built to connect all HTB products under one hood

Built a system to connect all HTB products under one hood with four other product designers

Built a system to connect all HTB products under one hood with four other product designers

Back to home

Back to Hack The Box

HTB Design System

Worked alongside four product designers to create a centralized system that seamlessly connects all HTB products

Year

2023 — Present

Challenge

Hack The Box has grown rapidly, expanding their product portfolio to meet diverse customer needs. However, this growth has resulted in a fragmented user experience across our products, as each was developed independently without a unified design approach. This inconsistency hinders our ability to provide a seamless and cohesive brand experience, leading to potential customer confusion and decreased user engagement.

Goal

The primary goal was to develop a comprehensive design system that integrates our existing products under a single, cohesive visual and functional framework. This system should enhance user experience, improve brand consistency, and streamline product development processes. By achieving this goal, we aim to increase customer satisfaction, enhance our brand identity, and improve operational efficiency.

My Role

As a Lead Product Designer, my role involves leading the development and implementation of a comprehensive design system to unify our existing products alongside a team of four other designers.


I create components in Figma, document them in Confluence and collaborate with developers to see its fruition in Storybook, ensuring the system is scalable and adaptable across various platforms. I collaborate with cross-functional teams to integrate the design system into existing products, working closely with product managers and engineers for effective implementation.

Team

1 × head of design

1 × lead product designer

3 × product designers

3 × engineers

Results

Delivered over 100 components in the span of 2 years and developed a three-phase, year long strategy for the system

Collaborated with a team of 4 other designers and 3 developers to execute and maintain the system

Substantial increase in design and development efficiency when using the design system