Complete

HP Inc.

A journey to the single source of truth

A massive corporation with silos upon silos of teams working on different interfaces for different forms of media: products, web stores, native applications, VR, AR, learning tools, and even different websites for countries and regions. A UI audit yielded an overwhelming amount of discrepancies. A design system needed to be created to unify the company under a single system across all media.

 

A difficult journey

Large and robust design systems are no easy feat, but are critical for unifying a brand across media, increasing design and development speed, and reducing labor costs. Different teams had different systems, but no single source of truth existed. This needed to change if HP wanted to continue innovating.

Image

An atomic foundation

The team needed to start small and build up. Principles from the atomic design methodology were used to categorize system elements. The categorization helped the overall organization and kept designers and developers sane. The team systemized everything from dropdown containers and label padding to interactive product heroes and video sliders. By getting dirty in the details, future edits would be simpler and faster.

Interactive documentation

The final design system will be a living website for team members to reference. UI kits, guidelines, and other online resources will be included to make it a one-stop shop for all design and development needs. Using Axure, the documentation website was crafted and a high-fidelity prototype wired together to make collaboration with other departments easier before officially developing the online resource.

Iterative design

Things are always moving at HP, so pages needed to be designed while constructing the design system. Components were being designed, developed, and tested on live pages and added to the system as we went. The metaphorical "building it while flying". I took this opportunity to explore and create new interactive experiences for the system.

Elevated interactions

The accessories section of product pages never seemed to receive the same elevated treatment as the rest of the page. I played around and created a new accessories experience that was accepted into the system for assets with a flat perspective.

Prototype exploration

Sometimes the floor opened to just explore. I jumped at these opportunities. The exact design may not make the cut sometimes, but it would help inspire the greater team working on specific pages to try a new direction.

Other projects