Pacific Trustrees

Subsection - Vault | New Feature

Pacific Trustrees

Subsection - Vault | New Feature

Pacific Trustrees

Subsection - Vault | New Feature

Pacific Trustrees

Subsection - Vault | New Feature

Overview

Introduction

Pacific Trustees is a company similar to a safekeeper, but for money and other valuables. They handle trusts, which are legal agreements where someone puts assets aside for others, like children or grandchildren. Pacific Trustees makes sure the assets are managed properly and distributed according to the trust's instructions. They also act as trustees for investments and estates.

Team & Timeline

Ahmad Rafiuddin

Design Lead

My Role

UIUX Designer

Amirul Naim

Project Manager

Hakam Raza

Backend Developer

Norshaffan Mohd

Frontend Developer

Whole Project: January 2024 - June 2024

Whole Project: January 2024 - May 2024

Whole Project: January 2024 - May 2024

Whole Project: January 2024 - May 2024

Vault: 2 weeks

Admin Dashboard: 2 weeks

Admin Dashboard: 2 weeks

Admin Dashboard: 2 weeks

Client Meeting

Problem

Problem

Summary of the discussion between our team, 3 points were highlighted:

As per discussed together with client, here are 2 main problems:

Outdated UI

Their website isn't clear or user-friendly for users. It is confusing, making it hard for potential clients to understand Pacific Trustees' services.

Business Model

Current product lacks a clear direction, making it difficult to achieve optimal results and understand the services they offered.

Outdated UI

Their website isn't clear or user-friendly for users. It is confusing, making it hard for potential clients to understand Pacific Trustees' services.

Business Model

Current product lacks a clear direction, making it difficult to achieve optimal results and understand the services they offered.

Solution

Pacific Trustees' website will undergo a complete redesign to create a modern, user-friendly experience. This refresh will focus on clear communication of services and the benefits of choosing Pacific Trustees. New features are planned such as "vault" and some others.

As this is a huge product with 3 different sub product, we decided to revamp the whole thing. A complete brand refresh, alongside the development of a new and improved UI and UX. Most importantly, the project proposes a strategic shift in the business model by integrating all three products – AdnexioEDU, AdnexioHR, and AdnexioJobs into a unified all-in-one portal solution called Adnexio.

As this is a huge product with 3 different sub product, we decided to revamp the whole thing. A complete brand refresh, alongside the development of a new and improved UI and UX. Most importantly, the project proposes a strategic shift in the business model by integrating all three products – AdnexioEDU, AdnexioHR, and AdnexioJobs into a unified all-in-one portal solution called Adnexio.

Design Process

Research

Understanding the core product

Understanding the current website and their existing features, information architecture is the first step in most redesign project. Then we can start with laying out new solutions. Vault is a newly added feature after our discussion with Pacific Trustees themselves and agreed to implement in the project.

Core features

Trust Services

Individual Trusts

Corporate Trusts

Islamic Wills (Wasiat)

Ancillary Services

Company Secretarial Services

Registered Office

Accounting Services

New Feature

Vault

New Feature

Vault

Vault is a feature that allow client secure access documents or account information directly within the website. Its more like a digital safe that stores important documents such as vehicle grants, assets and liability related whitepaper etc.

Whats in the Vault feature ?

Personal Particulars

Testamentary Matters

Trusts

Safe Deposit Boxes

Bank Accounts

Immovable Properties

Insurance Policies

Investment in Public Listed Companies

Non-Listed Companies/Partnerships/Sole Proprietorships

Unit Trusts

Asset Management

Motor Vehicles

Other Assets

Liabilities

Guarantees

Special Instruction/Notes

Net Worth Valuation

Figma | PACT

Dean Studio

Design System

Style guide and Components

Style guide for the whole project, with a mixture of custom style guide made for certain subsections.

Figma | PACTONLINE

Dean Studio

https://

figma.com

/dean/pactonline

Modal

-Form-

Content

Hint text here...

Content

Hint text here...

Content

Hint text here...

Content

Hint text here...

Form title

Form title

Close

Save

Typography

Helvetica

-Desktop-

-Font size-

-Line height-

Caption (Regular)

12

18

Subtitle 2 (Bold)

18

27

Body 2 (Regular)

18

27

Subtitle 1 (Bold)

14

21

Body 1 (Regular)

Standard size

14

21

H6 Headline (Bold)

20

30

H5 Headline (Bold)

30

45

H4 Headline (Bold)

36

54

H3 Headline (Bold)

40

60

H2 Headline (Bold)

56

84

Font size

Placeholder

Label

14pt

14pt

Input text

34

Input Text

Input Text

34

-Guideline-

Text fields

-Field size-

Standard

Input Text

34

Font: Body 1

-Style-

Visible label outline

Label

Hint text here...

Label

Input te

Label

Input text

Label

Value

Label

Input text

Error message here

Label Outside (Left)

Label

Hint text here...

Label

Input text

Error message here

Label

Input te

Label

Value

label inside field

Label

Input te

Input text

Disabled label/value

Input text

Error message here

Visible label outline

Other

Other

Input text

Other

Input text

Other

Input te

Button

-Size-

-Styling-

Standard

Font: Body2

46

Button

Small

Font: Body1

34

Button

Fill

Default

Disabled

Hover

Fill (light)

Default

Disabled

Hover

Hover

Default

Hover

Disabled

Design System

Ideation

Experiment - Sketches - Wireframes - Hi-fi

There is no wireframes or low-fi crafted because we are using existing structure. I work closely with our developers to see which components can or cant be used. This will give me a clear vision of what should be done and quickly adjust according to the requirements.

Figma | PACTONLINE

Dean Studio

https://

figma.com

/dean/pactonline

Design File

Final Design

Vault

Idea Breakdown

Few iterations, discussions and experimenting, this is what we came up with.

Figma | PACTONLINE

Dean Studio

https://

figma.com

/dean/pactonline

1

2

3

5

4

2

3

4

5

1

2

3

5

4

2

3

4

5

1

2

3

5

4

2

3

4

5

4

1

2

3

5

4

1

2

3

5

Upskill Dashboard

New Table

Old Table

Comparison between before and after the redesign.

  1. Change the CTA “Add New” from bottom left corner of the table to top right corner aligning with the title. This is to emphasize the CTA more so that user will add such data for their keepsake. This change also give user a clear cut instruction on what the CTA actually does.

  1. New table header with more modern look such as font weight, color and sort/filter option.

  1. New sideway scroll bar to make the table more modern.

  1. Table pagination for user to navigate through should they have many data entry.

  1. Introducing sidebar navigation for a better user experience where user can easily navigate through all the sub pages and sections for data entry.

New Table

Old Table

New Table

Old Table

Figma | PACTONLINE

Dean Studio

https://

figma.com

/dean/pactonline

6

7

6

7

7

6

6

7

6

7

7

6

6

7

6

7

7

6

6

7

6

7

7

6

New Modal

Old Modal

Old Modal

New Modal

Old Modal

Popup model comparison before and after redesign.

  1. Dotted line “upload file” box instead of just a CTA to upload documents. The decision to make this change is to make the modal more appealing and clear instruction. Also mentioning the size cap is also important.

  1. Making the uploaded document box as “wrap” to the next line. Compared to the old design, it is actually “overflow” and user need to side scroll/drag in order to view the overflow components.

New Modal

Old Modal

Figma | PACTONLINE

Dean Studio

https://

figma.com

/dean/pactonline

8

8

8

8

8

8

8

8

  1. With the addition of Vault, we need to consider how do user navigate to and from between these 2 pages “My Will” and “My Vault”. Therefore, the new nav bar.

Wrap Up

What Next ?

The UI definitely can be improved more to be even better, but as for now we can settle down with the current design. For future reference, i did have a few more sketches that can be implemented though need to wait for the next client meetup and receive their feedback first.

Teamwork, Communications, Critical Thinking, Problem Solving.

mr.hasnuddinn@gmail.com

+60126813743

© 2024 Dean Studio

mr.hasnuddinn@gmail.com

+60126813743

© 2024 Dean Studio

mr.hasnuddinn@gmail.com

+60126813743

© 2024 Dean Studio

mr.hasnuddinn@gmail.com

+60126813743

© 2024 Dean Studio