Role
UX Designer
Scope
Native Desktop App
Native Mobile App
Native Mobile App
Timeline
Nov 2022 - Ongoing
Launched Jun 2023
Launched Jun 2023
Link to Product
Background
HP WorkScan was one of many projects I jumped into mid-development — and unfortunately holds the title of being the most difficult and frustrating. Taking over as the main UX designer for this project, I had to get a product in disarray ready for the rapidly approaching launch date.
SECTION 1
Challenges
Unclear Direction
Previous project managers failed to lay a clear foundation for the software, which led to wasted effort for both the internal design team and the external development team.
A microcosm of this chaos is the removal of the Straighten tool. Miscommunication between the managers and the developers meant this straightforward feature would need to be delayed for a post-launch update.
I frequently created prototypes and various states in Figma to portray detailed functionalities of several tools to help out in any way I could.
A microcosm of this chaos is the removal of the Straighten tool. Miscommunication between the managers and the developers meant this straightforward feature would need to be delayed for a post-launch update.
I frequently created prototypes and various states in Figma to portray detailed functionalities of several tools to help out in any way I could.
Unorganized Files
For the first 5 months I worked on this projects, we were without a dedicated project manager. This made keeping up with the constant build updates and UX reviews into a nightmare, so I took it upon myself to organize the project boards into a comprehensible hierarchy.
The biggest issue was the Figma file, which failed to use standard practices like color styles and grid systems. Outdated screens and important assets would be scattered amongst each other in various pages of the file, and there was little rhyme or reason to how the flows were organized.
Below is the one of three flows from that came about from the cleanup process I led in June 2023.
The biggest issue was the Figma file, which failed to use standard practices like color styles and grid systems. Outdated screens and important assets would be scattered amongst each other in various pages of the file, and there was little rhyme or reason to how the flows were organized.
Below is the one of three flows from that came about from the cleanup process I led in June 2023.
SECTION 2
Iterations
Despite all of the hiccups along the way, our UX team and QA team persevered to make improvements to the product.
Low to High Fidelity
Once the basic wireframing was complete, a fresh coat of paint was overlayed in accordance with HP's visual guidelines.
Smaller UI Assets
To mitigate the jarring transition between the full-sized UI and the small version of the UI, we decided to use the small version of the UI at all window sizes.
Connection Flow Revamp
To reduce the risk of the user choosing an incompatible connection method, we added a new first step in which the user selects their scanner model.
SECTION 3
Design Patterns
Defining the Rules
Multiple designers have worked on this project over the years without a style guide, so it was up to me to unify the scattershot approach into something the developers could code before launch.
One such case was organizing the warning/error messages into comprehensible groups.
One such case was organizing the warning/error messages into comprehensible groups.
Toast Messages
Used for success/fail notifications that the user does not need to interact with. Clicking anywhere removes the toast message.
Pop-ups
Used for errors that require user input. Blue header indicates a warning. Red header indicates an error or a destructive warning.
Error Tips
Used for non-fatal errors regarding specific tools. Blue tips are used for brief explanations of tools. Tips should automatically close after 5 seconds.
SECTION 4
Mobile App
Work-in-Progress
To compliment the portable nature of the hardware, we are looking to launch a mobile app from which the users will have access to most of the features available on the desktop version.
Below are some preliminary screens of the mobile app. These screens are not representative of the final product.
Below are some preliminary screens of the mobile app. These screens are not representative of the final product.
As it is not possible to form a wired connection from a mobile device to the scanner, users are limited to using only WiFi compatible scanner models for this app. This was taken into consideration during the design process, notably the connection flow.
SECTION 5
Launch
Wired and WiFi
Due to a troubled development cycle, the upper management decided to split the launch of the 5 scanner models into 2 waves.
The first launch occurred in June 2023, and consisted of our USB scanner models (HP PS100 and HP PS200). Effectively, this was done to give ourselves and the developers more time to work on the WiFi related features. The WiFi scanner models (HP PS100W, HP PS150, and HP200W), are slated to release in Q4 2023.
The first launch occurred in June 2023, and consisted of our USB scanner models (HP PS100 and HP PS200). Effectively, this was done to give ourselves and the developers more time to work on the WiFi related features. The WiFi scanner models (HP PS100W, HP PS150, and HP200W), are slated to release in Q4 2023.
Post-Launch Support
A software update will accompany the release of the WiFi scanner models, as we look to optimize and add in features that were originally planned for the initial launch.
We are continuing to work in sprints, clearing out tasks in 2-week bursts and reviewing new builds for functionality and optimization.
We are continuing to work in sprints, clearing out tasks in 2-week bursts and reviewing new builds for functionality and optimization.
