HP eCommerce: From Components to Global Consistency

  • Design System
  • UX/UI
  • Agile
  • Storybook
  • Documentation
  • CSS
  • HTML

My Role:

From Migration to Foundation Building

I joined the Design System team to support the migration from the legacy Adobe XD library to Figma and to help implement components in both Figma and Storybook. Early on, I identified the lack of design tokens as a key challenge, especially with each region working with its own template team. I proposed introducing tokens and led the first implementation, starting with color.

I also worked on simplifying component props, introducing variables, and improving the structure in Figma to ensure a scalable, consistent system across all regions.

HP eCommerce design system components
HP store components: product tiles, product detail page, care packs and accordion

Storybook:

Where designers and developers stay aligned through shared documentation.

As a team, one of our main challenges was the lack of a single source of truth.

With the removal of Zeroheight, Figma became our only documentation space limiting how we communicated with developers.

We saw an opportunity to turn Storybook into our shared knowledge hub: adding our eCommerce focused branding, documenting components clearly in both design and code, and making it a reliable reference for the entire team.

HP Storybook prototype with eCommerce branding

From Color to Code

Aligning Through Tokens

When I joined the team, there was very little understanding or context around design tokens. Once the idea was introduced, it significantly streamlined the collaboration with development especially when working with CSS styles.

Tokens are now helping us align the design and development language, and are playing a key role in the migration to the new brand color palette.

HP color tokens documentation
More projects