2020WEB

HP Printables

Redesigned the Print, Play & Learn website to create an engaging platform for printable content, allowing users to easily find and print materials such as games, coloring pages, holiday cards, children’s exercises, and more.

HP Printables running in a laptop
List of Printable files showing the hover effect
HP Logo - Decorative element
HP Printables website running on an iPhone
Printables Partners example
Difference between a single page printable file and a multi-page printable file in the UI.

Discovery

At the project’s inception, I had a call with HP’s Principal Designer to get acquainted and discuss the project vision, tools, stages, and timeline. Following this, we conducted several online workshops with other HP decision-makers to better understand the scope of functionalities, learnings from the product being replaced, requirements, target audience, and product expectations.

I then developed wireframes, which were refined through several rounds of feedback between myself, Chad, and the company’s stakeholders. Once the wireframes were approved, I began working on the visual design.

Wireframes: Homepage

HP Printables Wireframe: Homepage
HP Printables Wireframe: Homepage detail
HP Printables Wireframe: Homepage variants

Wireframes: Logged Out vs Logged In

HP Printables Wireframe: Homepage with login option
HP Printables Wireframe: Homepage logged in
HP Printables Wireframe: Homepage with Ads

Wireframes: Printable Page

HP Printables Wireframe: Printable file page
HP Printables Wireframe: Printable File Details
HP Printables Wireframe: Details

Wireframes: Share and Printed

HP Printables Wireframe: Share sheet
HP Printables Wireframe: Printed

Challenges

One of the main challenges was integrating the rigid and serious HP Design System into a fun and colorful platform. To achieve this, we added colorful overlay elements and played with CMYK colors within HP’s palette, ensuring a playful interface that remained consistent with the existing design system. We also used halftone dots to create textures and utilized the angle of the HP logo to rotate elements within the interface.

HP Logo showing the 35º rotation
Visual elements: CMYK and Halftone dots

The development process involved close collaboration with the HP team and frequent iterations to balance the project’s playful aspects with the constraints of the design system. By utilizing existing components, the platform was rapidly released, ensuring a seamless experience for HP users.

Deliverables

As part of the final deliverables, I created prototypes for mobile, tablets, and desktops. These prototypes were presented to HP stakeholders, approved, and handed over to the developers to facilitate understanding of the product’s functionalities, transitions, and interactions.

Additionally, screens and prototypes representing phase 2 of the product were presented, including integration with HP+ (HP’s subscription and rewards system), a user sign-up system, and spaces for advertisements and promotions.

Impact

The HP Printables platform was successfully launched, earning praise from HP executives and users. It seamlessly integrated with HP’s existing websites, respecting the design system and creating a user-friendly, engaging platform. The platform is still active and prominently featured on the main page of the HP printer app.

Additionally, the project became a standout case study for ArcTouch. Following its success, HP went on to engage ArcTouch on additional contracts and projects.

Special thanks to Eduardo Tanaka for connecting me with this project through ArcTouch, and to Chad Martin for his invaluable guidance and productive conversations throughout the project.

NEXT PROJECT

Vibecheck

arctouch.com