Sanghoon Hwang | HP WorkScan

Overview

Challenge

The project required untangling a chaotic development process, reconstructing lost documentation, and establishing a cohesive design system for a previously disorganized product.

Goals

Standardize the design language of the software.
Finalize the functionalities of various editing tools.
Incorporate responsive design.
Create a native mobile app to parallel the desktop app.

Purpose

Provide users with a seamless way to scan documents and photos anytime, anywhere, across desktop and mobile.

SECTION 1

Challenges

Unclear Direction

Previous project managers failed to lay a clear foundation for the software, which led to tons of wasted hours 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.

Unorganized Files

For the first 5 months I worked on this projects, we were without a dedicated project manager. This made reviewing the constant build updates a nightmare, so I took it upon myself to organize the project boards and communicate with the engineers.

However, the biggest issue was the Figma file, which failed to implement a design system. 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 user flows were organized.

I made a thorough pass through the design file to reorganize the assets, screens, and logic into a digestible format, seen below:

SECTION 2

Iterations

Despite all of the hiccups along the way, I continued to work with our QA team to make improvements to the product. Below, I detail some of the changes that were made to the software across the many months I spent on this project.

Low to High Fidelity

Once the basic wireframing was complete, a fresh coat of paint was overlayed in accordance with HP's visual guidelines.

Responsive Design

The original design was not designed to be scalable, which caused all sorts of problems once the software window size was decreased. By decreasing the side panel size, amongst other changes, I ensured that the software will be usable at all sizes.

Connection Flow Revamp

To eliminate the risk of the user choosing an incompatible connection method, we reworked the device connection flow by adding 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.

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/notice. 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. The tip can point in all 4 directions.

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. Of course, a mobile device does not have the same capabilities as a desktop. This led me to consider all of the flows in a new way, optimizing the interactions and flows to ensure the users would be able to easily navigate the menus condensed into a mobile format.

Below are some preliminary screens of the mobile app. These screens are not representative of the final product.

SECTION 5

Takeaways

Launch

Due to a troubled development cycle, 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), launched later in late 2024.

A software update accompanied the release of the WiFi scanner models, as we continued to optimize and iron out issues present in the build. We are continuing to work in sprints, clearing out tasks in 2-week bursts and reviewing new builds for functionality and optimization.

Lessons Learned

This project showed me how troubled a project can be behind the scenes. With changes in personnel in all departments (UX, engineers, project managers), I learned to make important decisions on the fly, finding a balance between stakeholder demand, user experience, and developer bandwidth.

In summary, here are some key takeaways and improvements that will help me in the future.

Respect the previous designer's work, but acknowledge that their contributions are not set in stone. It is okay to dismantle existing assets and screens if they are fundamentally harming the project. I tore apart the existing Figma file to make the entire flow more digestible for engineers.
A shaky foundation for a project is bound to derail it. If that foundation isn't there when you join a project, then build it yourself. If I were to rejoin this project from the point I did, I would immediately create a fleshed-out style guide to standardize the design language for this project. As it currently stands, there are still some parts of the app that have not been fixed from its original state.
Ensure that your designs are scalable from the very beginning or there will be a lot of retroactive fixes and wasted time for everyone involved. For example, the side panel being too large for the minimum window size meant everything to do with the side panel (where majority of the features live) had to be reworked.