Originally, when users were prompted to set up their printers they would have to go through a web-based experience either on a computer or mobile device. With the introduction of the HP All-in-One printer remote app, the business requested to create an app experience for printer set up. I had worked closely on the web experience, so I was chosen to do all of the interaction design for the app experience on both iOS and Android.
I created some initial flow diagrams, then worked with the app developers to vet them so I could be sure I accounted for any differences between the web and app experiences. One major issue I discovered was around getting the printer on to the same network as the mobile device so they could talk to each other. For Android devices, this was simple, but for iOS there were additional steps involved. The end result was two different experiences that needed to be designed so both mobile operating systems could be supported. I then created my usual wireframes and prototypes to help get sign off from stakeholders and the development team.
Mobile Out of Box Printer Setup Flow Diagram for iOS
The flow diagram I created to document the experience of setting up the printer on an iOS device. I worked with the app development team to identify the "happy" flow, then any possible variants so I could account for those as well. This step was crucial before any design work was to start so any red flags could be raised.
Mobile Out of Box Printer Setup Wireframes
After getting the flow diagrams nailed down and approved, I created wireframes of the UI. I had to make sure that I accounted for the differences in the two operating systems, especially on the screen where users had to connect their printer to their device to get them on the same network. For iOS, this required the additional steps of going in to the device Settings area to connect the device to the printer via Bluetooth before getting both on the same wifi network.
Mobile Out of Box Printer Setup Prototype
After making sure I had wireframes for every screen, I created a working prototype to replicate the experience before any development work had begun. This was important so I could get a feel for the experience of using the app to set up a printer. It also helped the developers because it gave them a reference for the UI behaviors.
More HP Work
HP Instant Ink Mobile Enrollment
Recreating the Instant Ink enrollment process for the HP All-in-One Remote app.
HP All-in-One Remote App Printer Setup
Designing the printer setup flor for Android and iOS devices in the HP All-in-One Remote app.
Instant Ink Usability Testing & Analytics
An overview of the usability testing and analtyics for Instant Ink.