Skip to content
Work06 / 09

Hewlett Packard

Web design for HP's VR backpack

Exploratory web design for Hewlett Packard, with audience research, a local design system and section-by-section visuals.

Role
Visual DesignResearchPrototyping
Skills
Web DesignVisual DesignAudience ResearchDesign Systems
Hewlett Packard hero

Overview

Hewlett Packard set the benchmark for the office industry, supplying printers, desktops and much more. Their goal now was to introduce this new venture related to VR. The audience and customer experience was completely different from the traditional use case. The goal was to branch this new innovative experience from the core foundation.

Research & Planning

I had an understanding of the visual direction we needed to go, but a project roadmap needed to be set. We needed to narrow down the exact audience, experience and layout of the website. Also, focus on the timeline we had to work with. Spelling out the goals, objectives and best practices for each touchpoint along the creative workflow. But understanding the motive behind each decision will help me understand the process and prepare for pivots and changes.

Hewlett Packard — Research & Planning
Hewlett Packard — Research & Planning

Ideate

Once the roadmap was set, and we narrowed down the exact user we are trying to solve for, I wanted to expand on their wants and needs. Also, how would they funnel down the website and land on the VR backpack portal.

  • All details about VR
  • Release date
  • Interactive features
  • How to use the VR backpack
Hewlett Packard — Ideate
Hewlett Packard — Ideate

Design System

There was already a current design system for Hewlett Packard, but we didn't want to use the entire global library. I had to build a local library that only fit this VR backpack experience. Colors, typography and spacing needed to be branched from the global system but adjusted for this experience.

Hewlett Packard — Design System
Hewlett Packard — Design System
Hewlett Packard — Design System

Creative Direction

I was given access to their asset library which held all the pictures and graphics that I needed to start.

Hewlett Packard — Creative Direction
Hewlett Packard — Creative Direction
Hewlett Packard — Creative Direction

Visual Exploration

Pointing back to the original needs of the user and making sure the layout highlights the features of the VR backpack. I started exploring different ways we can bring this vision to life section by section.

I started with a moodboard and took any inspiration I could find and built basic layout blocks and concepts.

To build confidence about using the product and giving perception on what the VR backpack can do for you, I created unique interactive banners that could highlight and lead the user to the next section to find out more.

Hewlett Packard — Visual Exploration
Hewlett Packard — Visual Exploration
Hewlett Packard — Visual Exploration
Hewlett Packard — Visual Exploration
Hewlett Packard — Visual Exploration
Hewlett Packard — Visual Exploration
Hewlett Packard — Visual Exploration
Hewlett Packard — Visual Exploration

Final Design

Starting with the center experience where the user would find all the details needed to move forward with a purchase. Adding a dropdown section only for VR helps gain user confidence.

Other screens where more details about the VR backpack could be shown which would lead to the product catalog page. This would be the end of the funnel for the user and the decision to purchase the product.

Hewlett Packard — Final Design
Hewlett Packard — Final Design
Hewlett Packard — Final Design
Hewlett Packard — Final Design
Hewlett Packard — Final Design
Hewlett Packard — Final Design
Hewlett Packard — Final Design
Hewlett Packard — Final Design
Hewlett Packard — Final Design