a communication designer, illustrator, and synaethete in Vancouver.
The Sceens - Perspective PSD Mockup - by Tranmautritamddd.jpg

Copilot

Copilot: Client Portal

 
The Sceens - Perspective PSD Mockup - by Tranmautritamddd.jpg

 

The project

A B2B feature Client Portal of a investment management SaaS platform Copilot for investors to inspect their investments performance and be engaged in the management.

 

My role

I joint Cassia when they already have a solid idea in mind of what they want to achieve. With the product team, I conducted competitive research and identified major design gaps. I was also able to concept the user flow, built wireframes, and developed interactive prototypes.

Besides contributing to the UX design, I redesigned the platform’s UI and some branding materials.

 

Process

1. Identify opportunity space > 2. Define core features > 3. Competitive and comparative research > 4. User flow > 5. Prototyping > 6. Usability tests > 7. Refine prototypes > 8. UI redesign and other tasks > 9. Reflection

 


1. Identify opportunity space

  • Client doesn’t know how investments are doing without having to ask the advisor.
  • Client wants to show an interested party how investments are doing. Wants to track progress towards a goal (for financial planning)
  • Advisor can add value & branding to management experience: show holistic look at net worth.
  • Advisor can show due diligence in how assets are being managed within risk expectations

 

The challenge:

How might we keep the clients highly informed of their investments and enhances their communication with advisors?

 

2. Define core feature:

  • Home/Dashboard, Accounts, Financial Planning + triggered alerts for advisors.
  • View/print reports, retake risk questionnaire

Satellite features:

  • Notifications from advisor
 
 
visual brief.png
 

 

3. Competitive and comparative research

We faced a  major difficulty that we lacked sufficient fund to pay and use the other investment management tools in the market. However we surpassed this difficulty by evaluating other relevant softwares, such as Google Analytics, Yahoo! Finance, and online banking platforms.

 
research.png

Building the framework

By conducting the research, I was able to get deeper insights of the industry and user scenario. We synthesized the strengths and weaknesses of other platforms and utilized the analysis to inform our key considerations for both UX and UI.

 

4. User flow

Based on a thorough understanding of the platform, I sketched out core user flows which helped visually communicating within the product team and other stakeholders.

 
IMG_5971.JPG
IMG_5972.JPG

 

5. Prototyping

6. Usability test

Upon defining the user flow, I used Sketch and quickly built Invision prototypes and with the product team conducted user tests. After analyzing the user test results, we revisited and improved the flows.

 
Screen Shot 2018-04-25 at 12.20.44 PM.png
Screen Shot 2018-04-25 at 12.20.53 PM.png

 

7. Refine prototypes 

I developed rapid storyboards of detailed user flows (in total of 30) and captioned them to facilitate the dev team to build MVPs.

 
30 flows.png
 

Major design outcomes

 

1). Clients: View investment performance

On the main dashboard of the client portal, the client could view:

  • His/her risk alignment
  • Account information
  • From the face icon see how healthy is the portfolio performance.
  • The client’s risk tolerance and current portfolio risk, which indicates the quality of the advisor’s management.
  • A printable investment performance report
 
Screen Shot 2018-04-25 at 1.28.30 PM.png
 

2). Clients: Take risk assessment

If the client feels s/he could tolerate more risks, s/he can take the risk assessment from the portal. The result will be sent to the advisor so the advisor could rebalance the portfolio.

 
risk assessment.png
 

3). Advisors: In-app notifications

The advisors could grant accesses for the clients for the client portal directly from the platform.
They could also communicate about risk assessments and other inquiries in this effective method.

 
advisor notification.png
 

4). Advisors: Customize reports

The advisor could make use of the comprehensive report generated by copilot and add their own branding value into it. The customized report will be reflected on the client’s side on the portal.

 
report custimization.png
 

8. UI redesign and other tasks

I cleaned up the key UI attributes to deliver a better information hierarchy and alignment. I went through iterations and tests and incorporated the redesign into advisor’s view.

 
Screen Shot 2018-04-25 at 1.40.41 PM.png
Screen Shot 2018-04-25 at 1.38.50 PM.png
ui after.png
 

Other tasks

I also worked on digital onboarding brochures, case study documents, redesign of business cards, and additional design for other features.

 
 

9. Reflection

  1. I wish there were client personas developed before the decisions to key features. After the feature has been developed, a question was raised that since the clients are in general wealthy investors, they usually wouldn’t have time for a heavy load of information. Personas would be able to help us to simplify the system and bring more clarity and direction to information architecture.
     
  2. I would apply rapid user-testing methods instead of regular user testing because of the amount and complexity of the different tasks. This would greatly improve the efficiency of our workflow around project managing, designing, and developing.

 

Duration: 2017.1 – 2017.4
Client: Cassia Research. Inc
Programme supervisor: Haig Armen
UX & UI: Leslie Mu
Completed in: Cassia, ECU Living Labs

 

 

 

Want to learn more? Let's get connected!