top of page
Project
HP.com Digital Design System
CLIENT/BRAND
HP
ROLE
Creative Lead, Digital Experience
deliverables
Web Design, Design Systems, Product Marketing
overview
I helped lead the creation and implementation of a new digital design system for HP.com.
HP.com was the ninth domain ever registered. As a brand, HP embodies reinvention. They create technology that helps everyone, everywhere by engineering experiences that amaze.
As a creative lead on the digital experience team, I helped apply the spirit of reinvention to HP.com's: look & feel, tone, UX, content strategy and brand storytelling. The result was a design system that drove conversion and overall engagement amongst consumers.
THE CHALLENGE
HP.com needed a design system that could scale globally and increase engagement.
new BUILDING BLOCKS
To address consistency, efficiency and scalability issues, we established: new responsive typography styles, revised color palettes and refined button elements. Then, building off of existing UX data, we developed a new library of web components and modules.
TYPEFACE & WEIGHTS
HP Simplified Regular
HP Simplified Light
HP Simplified Light Italic
HEADING TYPOGRAPHY
Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.
PRIMARY COLOR PALETTE
HP Blue
BODY TYPOGRAPHY
Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any...
DESIGN SYSTEM
1
HP Blue
HP Blue Web Accessible
Button Hover
Black
CAPTIONS
Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any...
BREADCRUMBS
HOMEPAGE > PAGE > PRINTERS > HP TANGO
UTILITY BUTTONS
Shark
Medium Grey
Light Grey
Thunderstorm
Concrete
Cloud
Fog
White
CTAS/BUTTON STYLES
LEARN MORE
LEARN MORE
LEARN MORE
LEARN MORE
LEARN MORE
LEARN MORE
HERO MODULE
TITLE & TEXT COMPONENT
ADDITIONAL MODULES
COMPONENTS
2
NEW CONTENT GUIDELINES
With the new building blocks and components in place, we needed to develop a set of guidelines that the larger organization could follow when creating content for any new HP.com web pages, including campaigns.
DESIGN APPLICATION
With the new design system in place, we developed product pages that increased sales and engagement, globally.
Partnering with regional stakeholders, I lead the integration of our new system on HP.com with their latest printers like: HP OfficeJet Pro, Tango, Sprocket, Instant Ink and other print campaigns that collectively spanned across 65 countries.
After launch, our team consistently tracked engagement, clicks and scrolls. What we discovered was that the new HP.com design system was a success.
HP Digital Experience Team:
It takes a village, so a big shout out to my HP Team!
Global Creative Director - Lisa Charlebois
Global UX Director - Meghan Cannizzarro
Global Creative Operations - Cole Craghead
Associate Global Creative Director, PCs - Michelle Nam
Associate Global Creative Director, Production - Kim Ponto
Senior Designer - Peyton Leng
Senior Designer - Ethan Walpole
2
PHOTO ASSET LIBRARY
....
bottom of page