The Digital Vault

This project partnered with a global financial service firm based in the US. The problem is the company’s financial advisors and their clients exchange documents via fax, email, in person, and postal mail. This causes a lot of friction in the customer experience and creates security breaches to the firm. The Digital Vault is a cloud storage and document sharing solution utilized by both the company's internal software and client facing website.

enrollment, 1st time visitors

home / overview landing page

all files landing page

Customer-side designed for mobile, tablet, and desktop. Advisor-side designed for desktop only.

My role

Focused on the customer-side online experience providing competitive analysis, storyboarding, user flows, wireframing, prototyping, and visual design. Another team member and I worked closely together to ensure a cohesive experience across all devices (mobile, tablet, desktop).

Storyboards

Scenario #1: Vault Initiation Workflow

1. Add to vault
The Financial Advisor, Mr. Duncan, needs to share a document with his client Mrs. Smith.

2. Drag and Drop
Mr. Duncan drags and drops the file from his desktop to the Digital Vault (advisor side).

3. Sharing a document
Mr. Duncan shares the document with Mrs. Smith in the docs folder located within the Digital Vault.

4. Client notified
Mrs. Smith is notified according to her account settings, such as: text, email, and/or alert notifications that a document has been received online (client side)

5. Client login
Mrs. Smith logs online (client side) and notices an alert stating that a document has been uploaded by her Financial Advisor Mr. Duncan. She clicks the alert link, which leads her to the vault.

6. Terms Acceptance
If this is Mrs. Smith's first time visiting the vault, she will be prompted with a terms and conditions policy of the Digital Vault. She may either 1. accept the terms and proceed or 2. cancel and exit.

7. Dropbox Integration
Once Mrs. Smith accepts the terms, she will be presented with an option to integrate her Digital Vault with her personal Dropbox account. She may either 1. accept the integration and input her credentials, then proceed to view the document or 2. deny the integration and proceed.

8. Document View
Once Mrs. Smith accepts or denies the Dropbox integration option, she will then view the document within the Digital Vault.

Scenario #2: Document Collaboration Workflow

1. Add to vault
The client, Mrs. Smith, needs to share a document with her Financial Advisor Mr. Duncan.

2. Drag and drop upload
Mrs. Smith drags and drops the file from her desktop into the (client side) Digital Vault shared folder. She may have many folders and files saved on her Digital Vault; however, the shared folder is the only folder sccessed mutually by she and Mr. Duncan.

3. Viewing and adding an annotation
Mrs. Smith may view, annotate, and add additional commentary to the document within the Digital Vault.

4. Sharing a document
Mrs. Smith shares the document with Mr. Duncan, but also has the option to share with a third party.

5. Financial Advisor notified
Mr. Duncan is notified via (advisor side) that a document has been uploaded by his client Mrs. Smith.

6. Document preview
Mr. Duncan previews the document and either accepts or reject it (rejected documents are quarantined, accepted documents may be viewed)

7. Document download
Upon accepting to view the document, Mr. Duncan chooses to download the document locally.

8. Edit download
Once the document is downloaded locally, Mr. Duncan may edit the document as he wishes.O

9. Re-upload to shared client folder
Once Mr. Duncan has completed editing the document, he re-uploads the document to Mrs. Smith and his shared folder found in the (advisor side) Digital Vault.

10. Client notifed
Mrs. Smith is alerted regarding the recently uploaded document via text or email (push) notification.

Scenario #3: Sharing with a third party workflow

1. Send document to third party
The client, Mrs. SMith, needs to share a document with her husband Mr. Smith, who does not have a (client side) account.

2. Sharing a document
Mrs. Smith locates the document in the Digital Vault (client side) and chooses to share the document with a third party. She inputs her husband's email, which giants him permission to view the document.

3. Third party notified
The Mr. Smith is notified of the shared document via email. He clicks the link in the email to view the document.

4. Directed to document viewer
Upon clicking the link, Mr. Smith will be directed to Dropbox (if integrated, or viewing through client side), where he may sign in and view the documents.

5. Document viewing
Once Mr. Smith is logged into Dropbox (or viewing through client side).

Scenario #4: Editing document with Office 365 ^TM

1. Opening document
The client, Mrs. Smith, opens a document in the Digital Vault (client side) and chooses to use Office 365 to edit it. The vault will prompt Mrs. Smith, that Office 365 would like access to the file and she may 1. accept to edit or 2. deny and return back to the Digital Vault (advisor side notifiedd).

2. View and edit download
Once opened with Office 365 Mrs. Smith can edit the document in the microsoft web application. After Ms. Smith is done editing the document she may either: 1. save and return to the Digital Vault (client side) 2. save a new version of the document 3. share the document with third parties 4. print the document

3. Save and return to the Digital Vault
After completing her changes, Mrs. SMith choose the option to "save and return to digital vault"

4. Shared folder(s) updated
Both the Digital Vault (client and advisor side) will be updated accordingly with the edited file.

Scenario #5: Editing document locally

1. Document download
The client, Mrs. Smith, downloads an existing document from the Digital Vault (client side) and saves the document locally.

2. View and edit download
Once the document is downloaded locally, Mrs. Smith may edit the document, using her preferred document editor.

3. Drag and drop upload
Mrs. Smith re-uploads the edited document to the Digital Vault (client side) shared folder or her integrated Dropbox shared folder.

4. Shared folder(s) updated
Both the Digital Vault (client and advisor side) and Mr. Smith's integrated Dropbox will be updated accordingly with the edited file.

Key interactions

The Digital Vault is not intended to be an everyday tool, rather one that fulfills focused individual events. The most critical interactions of The Digital Vault are sharing, uploading, moving, viewing and commenting.

Thanks for visiting. Questions or thoughts? drop me a note.

Back to home page or view Leading product design at Codecov