HP Design System

 

intro

A design system is a centralized living document that houses all of a brand's guidelines and resources. HP's digital team did not have one. HP's digital team needed one. Creating a design system takes effort from everyone on the team, from designers to developers to stakeholders to brand, thus making it hard to gather all the right pieces of information. This is what we set out to do.

This project is still ongoing.

credits

team - nickki nguyen, celedonio llabres, meghan cannizzaro, jason guerra, spencer choi
year - 2017-2018

 

problem

HP did not have a consistent design system and designers and developers were pulling resources from different places, which contributed to the inconsistencies across the site. There was no centralized system for designers and developers to access resources. We also needed a hub to send out to agencies to quickly be aligned with our brand and guidelines since we have so many product lines and brands within brands. We also wanted to create more visibility within the broader design community.  

 

role

A few of us on the team was tasked to outline the specific needs of our design system, determine the audience for the system and come up with a living, breathing live site so that anyone can have access to the latest and greatest guidelines. My specific role was to come up with a flexible template that can house a wide range of resources, from icon assets to modular components to general guidelines. 

 
designsystem.jpg
 
 

ui kit

Another component to this project was creating a UI Kit for the team. I gathered as many UI elements existing on hp.com in one document and organized them by categories. Here are some screenshots of the document (since this is for internal use only). 

 
 
Screenshot_12.png
Screenshot_2.png
 
 

mobile-first web design guidelines

Before we got to breaking down and analyzing the specifics of our digital site, we first came up with a broader, more conceptual guideline that described HP's mobile-first approach for the web. The digital design team has been championing the "Mobile-first" approach and we were asked to create a guideline to start a communication and educational plan for other digital teams in the org. Meghan, our UX lead, headed the project and me and a few team members collaborated on a doc that listed out general concepts, strategies, principles and approaches accompanied by specific examples existing on our site today. We then got a copywriter to edit the text and structure it in a way that was easier to break down and read. I worked on the template of the document since the first phase of this project was to send out the guideline as a PDF to those closely involved with the digital campaign execution in the top 5 markets. This includes World Wide stakeholders and other digital teams. Below is a preview of the guide. The whole document is for internal use only.

 
template_example.jpg