Role

Product Designer

Team

1 Product Designer

1 Developer

1 User Researcher

Duration

8 weeks

Tools

Figma

Draw.io

> Project Context

During my first internship, I worked at FutureVault Inc., a tech startup that aims to provide solutions in financial services and wealth management. They provide a digital safety deposit box for clients to store critical documents, data, and information.


As a UX/UI designer, I had the chance to work on various design projects from creating graphic assets, making powerpoints for clients, improving the UI of existing features, and also designing a whole new feature that is now being implemented into the web app. 

The problem

Advisors are having difficulty requesting their clients to upload necessary documents into their vault. There were currently no solutions to do this efficiently within the application, and clients without a FutureVault account had to register for one to do so.

The objective

Design a product feature that allows users to request files in a specific folder, and a page for recipients to upload them without an account.

01 Empathize

To give us a better understanding of who the users are and their pain points, I looked through feature request forms and the user researcher's findings. These findings derived from competitive analysis and multiple user interviews. After, I created a user persona to have a better grasp of what the users' needs, goals, and experiences are.

> Discovered Pain Points

01 Mandatory Account

When users are asking someone to upload files into a vault, the uploader MUST have a FutureVault account to do so. 

02 External Sites

Users have resorted to external sites to notify someone of file requests, such as emailing or calling.

03 Manual Work

Users must manually move all the uploaded files into the desired folder location within the vault.

> Persona

02 Define

There are two separate experiences users can go through during the file upload request: one being the requester's experience and the other being the file uploader's experience. Hence, two user flows were created for this project. Since we had a strict timeline, we had to decide what to show as the minimum viable product (MVP) to clients.

> User Flow - Requester

User task: Use the file request feature and ask others to upload their files within a specific folder of the user's vault.  

> User Flow - File Uploader

User task: Use the received file upload link and upload their files in the dropbox.  

03 Design

> First Wireframes for Both Experiences

> Focused Digital Wireframes - Requester

The requester is able to access this feature by right-clicking the folder they wanted the uploaded files to go to. A pop-up form would then appear for easy request-making! This addresses their pain points of always manually moving the uploaded files into their folders, as well as easily sending notifications to the people they request from.

> Focused Digital Wireframes - File Uploader

The file uploader is able to upload their files into the requester's vault by clicking on a link sent to their email. They would be brought to a page that asks for their name and email as verification. After, they can upload the requested file and send it. This addresses their pain point of needing to create a FutureVault account.

04 Test and Refine

I conducted two rounds of usability studies, one on co-workers and one on stakeholders. The first study helped me realize the features I missed (due to my lack of understanding) and helped finalize the user flow diagram. The second study used an iteration of the high-fidelity prototype to further reveal what needed to be refined or changed again. 

> Usability Study: Round 1 Findings

> Usability Study: Round 2 Findings

> Refined Wireframes for Both Experiences

> Design System

> Focused Digital Wireframes - Requester

The prototype was refined with the findings in mind. This includes the option to have a password on the request page, requesting multiple files, sending personalized messages in reminders, and naming requests. In addition, there is also an option to send generic links for file upload, where the file uploader can upload any files they want in the vault; there is no specific file being requested. Users can also add unknown contacts that uploaded files on the FutureVault application.

> Focused Digital Wireframes - File Uploader

To access certain request dropbox, an access password must be entered. Additionally, the file uploader is able to upload specific files in each request for easier management.

05 Takeaways

> Impact

After a few client calls where this mock-up was shown, users were excited about this upcoming feature. They expressed that this will make it easier to request files from others, and were impressed by our solution 

> What I Learned

While designing this product feature, I was surprised at the amount of thought needed for a seemingly small feature. The user flow diagram clearly showed just how messy this can get, as the edge cases were revealed during meetings slowly. 

> Next Steps

Thank you for your time looking through my contributions to the product feature design of the FutureVault web app

If you would like to get in touch, feel free to reach out.