Booking Portal
Document Module Enhancement
Duration
Nov 2025 - Feb 2026
Skills
UI Design, UX Design
Company
OEC Group
Team
1 Designer · 2 System analyst (SA) · 1 Front-end developer
My Contribution
Collaborated with the System Analysts in defining and documenting the current user flow
Redesigned the UI to meet the latest design guidelines and improved readability
Rewrote the system feedback to provide more guidance and established a reusable template for writing
Intro
A legacy feature that needed a redesign
The Document module was a legacy feature that hadn't been fully updated since the team first rolled out the design guideline in 2024. The team only had the bandwidth for a visual refresh, so the user flow were plagued with usability issues and felt inconsistent with the rest of the site as the design continued to evolve.
This project focused on fixing those problems and updating the module to be fully compliant with our current design guidelines.
Problem
There were several issues…
Unintuitive reading path
The old design split the screen into two sections, forcing users to move their eye from the top left, down to the bottom left, and then across to the top right.
This conflicted with common reading patterns, and made the instructions in the empty state hard to locate, leaving the users confused.
The component library didn't support the use case
Back in 2024, our component library didn't include a dedicated file uploader component. As a result, the upload experience was built as a temporary solution, which brought several usability issues.
For example, although only the ‘+ Choose Document’ button appeared interactive, the entire drop zone was actually clickable, creating a mismatch between the visual affordance and the actual interaction.
Interruptive flow
When users click on the ‘Upload’ button, they would be guided to a new page where they can search for the booking number and upload files to the corresponding booking. When the users were already in the Document feature, this wouldn’t cause much of an issue. However if they were originally in the Booking or Shipment feature, they’d still be redirected to a new page and it was difficult to return to where they were. This interrupted the flow and caused them to lose context.
Poor feedback experience
Me and the SA noticed that there could be many reasons that make the upload process fails. Yet we didn’t provide enough clues for the user to identify the causes as well as how to solve the problems. Under some scenarios, the system would even just show a ‘?’ to the user.
Design solution
Building a reusable component
While designing the new file uploader, I treated it as a design system component instead of a one-off feature. Knowing it would be added to our component library, I designed it to be flexible enough for different product contexts. It supports responsive layouts across various container sizes and accommodates different validation flows.
Reduce interruption with dialogs
A linear reading order
Collaborated with the development team while writing the messages
To improve the feedback experience, I first worked with the front-end to understand where each error message came from. Knowing whether it was triggered by the frontend, or returned from the backend allowed me to write the right messages and determined the detail I needed to provide. I then went on to choose the UI component that best carried the message.
Validation
Since this is a change request I initiated, I held several design walkthroughs within the design team and externally with the system analysts. I’m glad that the alignment process went well and my proposal has positively impacted the team as well as product.
Design team
The template works and we decided to have a template section for each design file, keeping only the key screens of the user flow. After finishing a design change, we will also update the template to ensure it remains up to date and clean.
Product
By proactively asking for feedback from the SA and the developer. I was able to keep feasibility and constraints in mind from the start. The development is currently underway, and the new design is set to launch in late April.