Live UI: HP App-assisted Printer Setup
Team
Company | Institution
Category
Type
Project description
The HP Live UI: App-Assisted Printer Setup is the UX design for an app assisted and guided set-up experience for HP printers as part of the larger HP Smart App. The app-assisted printer setup instructions were developed to guide users, step-by-step, in loading paper, installing ink, and additional tasks by utilizing detailed 2D animations and translated instructions—a big improvement over printed instructions which only provide static illustrations. This new UX provides a robust instructional experience, eliminating ambiguity and potential frustration for users during printer setup. It also presents the OS-detected language, so users don't have to search for their particular text translation.
What opportunity was the project addressing?
The HP Live UI: App-Assisted Printer Setup solution delivers a setup experience that is easier for users to understand and environmentally responsible to execute. All who purchase a printer must install ink, load paper, and perform additional hardware steps to finish setup. This applies to personal, small office/home office, and micro-business printers. Static, printed illustrations have been a user pain-point when completing the complex steps of setup. Now, by moving hardware setup steps into the app with animations and supporting text, in only the applicable language, user satisfaction during usability studies and real-world reviews has greatly improved.
Who were you designing for?
This solution is designed for all users of HP home and small business printers. This HP Live UI: App-Assisted Printer Setup solution provides users with detailed 2D animations, with accompanying text, that walks them through each step of setup at their own pace. The animations are looping, giving users an opportunity to re-watch and move ahead at their own pace. The HP Smart App detects the operating system language and shows the appropriate translated text.
What was the impact?
This solution often surprises users in testing, with frequent feedback being that the printer setup surpassed their expectations regarding how easy it was, particularly the hardware setup instructions. This is attributed to the simple design and ease-of-use—users quickly understand how to swipe through the steps and use the animations to guide them in completing each action. Short text and clear headlines support each graphic, but don’t weigh down the design with excessive words. The animations loop, letting users progress at their own pace, and show multiple views and close-ups of key interactions. The solution is more dynamic than printed instructions and provides a richer instructional experience.
Additionally, it is more environmentally sustainable to include hardware setup instructions in the HP Smart App rather than in print, packed into the printer box. With this solution, products can use less paper for instructions, especially considering worldwide SKUs with up to 25 languages. In the app, HP can also provide a more equitable solution between regions.
Describe your design process applied to the project?
This solution was designed in one year, which included designs, user testing, and development time. Since then, the solution has been continually improved, based on testing and updated visual styles in the HP Smart App. The animations are Lottie files, which allow a smaller file size while showing longer instructional sequences. The design process took on a holistic approach that looked at the end-to-end user experience journey and identified key areas for improvement and impact.
This app-assisted hardware setup solution was designed by a small team of internal interaction, visual, and content designers and implemented by internal developers. The success of this solution led the team to apply it not only to future HP products, but also to past HP products that could benefit from the success of the new solution.
What opportunity was the project addressing?
The HP Live UI: App-Assisted Printer Setup solution delivers a setup experience that is easier for users to understand and environmentally responsible to execute. All who purchase a printer must install ink, load paper, and perform additional hardware steps to finish setup. This applies to personal, small office/home office, and micro-business printers. Static, printed illustrations have been a user pain-point when completing the complex steps of setup. Now, by moving hardware setup steps into the app with animations and supporting text, in only the applicable language, user satisfaction during usability studies and real-world reviews has greatly improved.
Who were you designing for?
This solution is designed for all users of HP home and small business printers. This HP Live UI: App-Assisted Printer Setup solution provides users with detailed 2D animations, with accompanying text, that walks them through each step of setup at their own pace. The animations are looping, giving users an opportunity to re-watch and move ahead at their own pace. The HP Smart App detects the operating system language and shows the appropriate translated text.
What was the impact?
This solution often surprises users in testing, with frequent feedback being that the printer setup surpassed their expectations regarding how easy it was, particularly the hardware setup instructions. This is attributed to the simple design and ease-of-use—users quickly understand how to swipe through the steps and use the animations to guide them in completing each action. Short text and clear headlines support each graphic, but don’t weigh down the design with excessive words. The animations loop, letting users progress at their own pace, and show multiple views and close-ups of key interactions. The solution is more dynamic than printed instructions and provides a richer instructional experience.
Additionally, it is more environmentally sustainable to include hardware setup instructions in the HP Smart App rather than in print, packed into the printer box. With this solution, products can use less paper for instructions, especially considering worldwide SKUs with up to 25 languages. In the app, HP can also provide a more equitable solution between regions.
Describe your design process applied to the project?
This solution was designed in one year, which included designs, user testing, and development time. Since then, the solution has been continually improved, based on testing and updated visual styles in the HP Smart App. The animations are Lottie files, which allow a smaller file size while showing longer instructional sequences. The design process took on a holistic approach that looked at the end-to-end user experience journey and identified key areas for improvement and impact.
This app-assisted hardware setup solution was designed by a small team of internal interaction, visual, and content designers and implemented by internal developers. The success of this solution led the team to apply it not only to future HP products, but also to past HP products that could benefit from the success of the new solution.
