Portfolio Creator Avatar

About

About

Projects

Projects

Resume

Portfolio Creator Avatar

Available for work

Redesign

Document Module Redesign

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 ensure full responsiveness

  • Optimized the Figma file by restructuring the page layout and eliminating redundant frames

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, meaning core elements like the 'upload' 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.

Challenge

Messy, unintuitive, and interruptive

01

Messy Figma layers

The legacy design files contained multiple layers of redundant frames, which made selecting the right components extremely difficult. Designers often had to click through frames to arrive at the desired layer.

The legacy design files contained multiple layers of redundant frames, which made selecting the right components extremely difficult. Designers often had to click through frames to arrive at the desired layer.

02

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 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.

03

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.

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.

Design solutions

Removed unnecessary frames

Besides improving the end-user experience, a key goal was to make the Figma file easy for other designers to navigate. I simplified the file hierarchy and ensured all layers were named. I simplified the hierarchy of the file and made sure to name all the layers.

Besides improving the end-user experience, a key goal was to make the Figma file easy for other designers to navigate. I simplified the file hierarchy and ensured all layers were named. I simplified the hierarchy of the file and made sure to name all the layers.

A template that improved the workflow for designers

When designers copied components from other screens, it’s common to not select the root layer, causing the new screen to have redundant layers, and the situation could get worse for subsequent screens.


To solve this problem, I extracted the most fundamental screens for different user flows in the document feature and created a ‘template’ section. Future designers can now make changes based on these templates without carrying over any ‘dirty frames’. It also saves them from manually searching through the Figma file to find the screens they need.

When designers copied components from other screens, it’s common to not select the root layer, causing the new screen to have redundant layers, and the situation could get worse for subsequent screens.


To solve this problem, I extracted the most fundamental screens for different user flows in the document feature and created a ‘template’ section. Future designers can now make changes based on these templates without carrying over any ‘dirty frames’. It also saves them from manually searching through the Figma file to find the screens they need.

Reduce interruption with dialogs

Since the process of uploading documents is relatively simple, a single dialog box is sufficient to contain all necessary information. After discussing with the PM, I moved the upload flow from a dedicated page to a dialog. This update allows users to remain on their current screen and maintain context, which is particularly valuable when they are using the Booking and Shipment features.

Since the process of uploading documents is relatively simple, a single dialog box is sufficient to contain all necessary information. After discussing with the PM, I moved the upload flow from a dedicated page to a dialog. This update allows users to remain on their current screen and maintain context, which is particularly valuable when they are using the Booking and Shipment features.

A linear reading order

While moving the information to a dialog, I also changed the two-column layout. Now the user can read from the top to the bottom and easily locate the instruction at the top of each section.

While moving the information to a dialog, I also changed the two-column layout. Now the user can read from the top to the bottom and easily locate the instruction at the top of each section.

More challenge

Poor feedback experience

Midway through the project, 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.

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.

More to Explore

Fixing Gaps in User Flow

Fixing Gaps in User Flow

New UX Writing Guideline

New UX Writing Guideline

Let’s connect!

Like the projects you see? Send me an email or find me through the links below. Can’t wait to create design together :)

Email: janet.wan.ting.lo@gmail.com

LinkedIn

Medium

Let’s connect!

Like the projects you see? Send me an email or find me through the links below. Can’t wait to create design together :)

Email: janet.wan.ting.lo@gmail.com