Case study · HP · Visual Design
HP Setup & Onboarding
Using visual design to make a long, complex printer setup feel simple and transparent for SMB admins.
Company
HP · HP+ Smart printers
My role
Product Designer on a team of designers
Timeline
3 weeks of daily work sessions
Scope
Visual design of the beta 2 setup & onboarding (OOBE) for SMB admins
01
Context
The problem
After buying a new printer for their company, SMB admins go through a digital setup and onboarding experience. That experience was complex and unexpected for many users, but visual design could simplify it and ease the way.
This case study focuses on the visual design of the beta 2 release of printer setup and onboarding for SMB admins.
Design objective
Use visual design to overcome the complexity and length of the interaction flow.
02
Timeline
We worked in daily sessions over three weeks.
Week 1 · Diverge
Align on scope and the existing experience. Define desired improvements. Research patterns and best practices outside of printers. Explore high-level visual and interaction ideas.
Week 2 · Narrow
Narrow down visual and interaction concepts. Discuss pattern alignment with the portal team. Align with development teams on direction.
Week 3 · Refine
Define the final visual concept. Define breakpoints and the mobile experience. Review internally.
03
Needs & principles
User needs
As an IT admin, I want to be able to:
01
Set up with understanding
Quickly set up my company’s new HP+ Smart printer while clearly understanding the purpose of each step.
02
Breeze through repeats
Move efficiently through the steps when I’m setting up my second or third printer.
Design principles
Admins might be setting up their first HP printer ever, or one of many, and their roles range from generalist IT to office manager. The system has to support all of them.
01
Supports multiple scenarios
Provide detail where people commonly get confused, while letting experienced users sail through.
02
Business appropriate
Feel professional for a business environment, with room for fun and delight. It doesn’t have to be boring!
03
Straightforward & simple
Customers are busy. Setup needs to be simple, logical, and easy to understand.
04
Trustworthy & transparent
Development constraints and marketing offers made the flow longer than expected. Steppers, checklists, and intro screens tell people how long it takes and where they are.
05
Relevant & contextual
IT admins expect dense, professional interfaces that are still easy to use. Show what’s relevant to their status and skip consumer-targeted content.
Requirements
User
Multiple user journeys
Support office managers, with alternate paths for people who aren’t responsible for things like billing.
User
Easy to navigate
Navigation in each workflow is clear, linear, and moves people in one direction.
User
Easy to digest
Information is filtered to what’s most relevant at each step.
User
Efficient overall
The whole experience is efficient, simple, and easy to understand.
Technical & design
Simplify the complex setup
Set time expectations up front and show where people are and how many steps are left.
Technical & design
Embrace Veneer
Use existing design system patterns as much as possible to save development effort and meet timelines.
Technical & design
Be flexible
Accommodate breaks, skipped optional steps, and alternate paths.
04
Exploration
Explorations
We let our creativity flow without constraints to generate as many ideas as possible.
Refining our focus
We refined our concepts through discussion and dot voting, then focused on a top three.
Three concepts: mild, medium, spicy
05
Concepts
Concept 1 · Mild: stepper
A stepper on its own, with each step representing a group of screens the user moves through.
Concept 2 · Medium: stepper & printer avatar
A checklist with every step listed, and a printer avatar that progressively builds up as setup moves along.
Inspired by character creation in video games.
Concept 3 · Spicy: progressive accordion
A one-page accordion, with each step revealed as the user progresses.
Inspired by Typeform.
Scoring the concepts
We scored each concept against our requirements. Concept 2 was the only one to meet every requirement.
| Requirement | 1 · Mild | 2 · Medium | 3 · Spicy |
|---|---|---|---|
| User requirements | |||
| Provide for multiple user journeys | Meets | Meets | Meets |
| Easy to navigate | Doesn’t meet | Meets | Meets |
| Information is easy to digest | Doesn’t meet | Meets | Meets |
| Efficient, simple, and easy to understand | Doesn’t meet | Meets | Meets |
| Design & technical requirements | |||
| Simplify the complex OOBE experience | Meets | Meets | Meets |
| Embrace Veneer and development timelines | Meets* | Meets* | Doesn’t meet |
| Be flexible | Doesn’t meet | Meets | Meets |
*The development team needs to be able to support any kind of stepper or progress indicator.