2020

2020

2020

WEB

WEB

WEB

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

Project Kickoff and 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
  • 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
  • Wireframes — Homepage

    HP Printables Wireframe: Homepage
  • 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
  • Wireframes — Homepage

  • Logged Out vs Logged In

  • Printable Page

  • Share and Printed

Design 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
Visual elements: CMYK and Halftone dots
Visual elements: CMYK and Halftone dots
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.

Final 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.

HP Printables website running in a laptop

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.

Results and 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:

  • I’ve had nothing but good interactions with Vini. He took time up front to make sure he understood the objectives, he took direction really well, didn’t have an ego about the designs, and was really quick to turn things around when needed. I would happily work with him again!

    Chad Q. Martin

    Principal Designer at HP

  • Can’t express enough my gratitude to the work that you have done on this project. Developing the Netflix of printables! We wanted an improved customer experience, a solution that’s scalable and ready for the future. And you did it. Amazing job!

    Stefan

    Head of Software & Solution Marketing at HP

  • Congrats to the entire team who worked on this challenging product […] Special thanks to Martim Sisson and Alysson Lopes for their leadership on this project, along with Vinicius Ramos for his great design work - our first design work for any HP project ever. HP has high expectations for success of Printables and love the work we’ve done.

    James Patriquin

    VP of Client Services at ArcTouch

  • I’ve had nothing but good interactions with Vini. He took time up front to make sure he understood the objectives, he took direction really well, didn’t have an ego about the designs, and was really quick to turn things around when needed. I would happily work with him again!

    Chad Q. Martin

    Principal Designer at HP

  • Can’t express enough my gratitude to the work that you have done on this project. Developing the Netflix of printables! We wanted an improved customer experience, a solution that’s scalable and ready for the future. And you did it. Amazing job!

    Stefan

    Head of Software & Solution Marketing at HP

  • Congrats to the entire team who worked on this challenging product […] Special thanks to Martim Sisson and Alysson Lopes for their leadership on this project, along with Vinicius Ramos for his great design work - our first design work for any HP project ever. HP has high expectations for success of Printables and love the work we’ve done.

    James Patriquin

    VP of Client Services at ArcTouch

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.

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.

made with 🤍 in Brazil

made with 🤍 in Brazil

made with 🤍 in Brazil

made with 🤍 in Brazil