Serv-U

Refactoring legacy UI for a secure file sharing & transfer platform.

Web Design

01 Background

Serv-U is secure file transfer & sharing platform.

There were 15+ unique page redesigns, each with 1-5 states & interactions and varying access levels (guest vs admin).

The UI components and icons used in this project were from a corporate design library.

Original UI

Before designing, I had data points from previous research to make various decisions, such as:

• Changing the legacy page name 'Web Client' into a more intuitive name, 'My Storage'

• Simplifying the multi-step file request wizard into a single, simplified form

• Eliminating 'grid view' for 'My Storage' page for v1, as it's less frequently used

02 Design

03 Validation

Once we launch Serv-U GA (General Availability) to customers at the end of Q3 2021, we plan to conduct 2-5 user sessions to shape vNext feature requirements.

04 Challenges

1. Complex interactions

The upload interaction was challenging as it had many interactions. For example, a single upload functionality had multiple states:

Happy path

• Upload file by browsing or drag + drop

• Upload multiple files

• Upload progress

• Upload complete & toast message for success

Errors

• No file selected

• File limitation error

• Cancel uploads (error handling)

• Upload incomplete & toast message for error

Edge cases

• How would empty page look like?

• How to handle duplicate files (replace or remove)?

2. Scope limitation

Some mockups had to be simplified to fit project scope.

05 Further Explorations

We also want to refactor the Serv-U mobile app. Here’s the proposed navigation:

06 Process

Some initial sketches

Demoing the file preview feature with duck-themed images 🐤