top of page

Re-Imagining the Journey for Protection Pathways

Re-Imagining the Journey for Protection Pathways

Protection Pathways

123achevron_edited_edited_edited.jpg

Re-Imagining the Journey for Protection Pathways

123achevron_edited_edited_edited.jpg

Synaptic Software provides software service for financial advisors. Initially is undergoing a migration process from their current platform to salesforce. This requires me as UX/ UI Designer to understand the existing flaws in the design, analyse, ideate and prototype. 

TIMELINE

3 and half months

TYPE

Fintech, Webservice

TOOLS

Miro , Figma

CONTRIBUTOR

Callum / Product Manager,

Amy/ Researcher

Sharon/ Researcher + PM

Mike / Developer

MY CONTRIBUTION

Research

Analyse

Wireframe

Interface Design

​

456Chec_edited.jpg

Challenge

  1. How to create an experience for the adviser to create quotes from an hour to minutes.

  2. How to allow the adviser to suggest the best quote matches their budget and expectation?

  3. How to create an interface where the adviser can have control of what they want to do?

  4. How to increase engagement between advisors and software

Problem

1. Void Result

2. Manual Commission handling

3. Error Handling

4. Going through results one by one to find the best quote

5. Created 4 - 5 quote to get to the end best quote

6. Critical illness table in convenient and inefficient

​​

LESSON LEARNED

  • Organising and documenting as much as possible designs, sketches, brainstormed ideas, mindmaps etc.

  • Prioritising the key feature for MVP.

  • Creating design for professionals is different from creating for customers for commercial use.

  •  Understanding the psychology and the mental model of the advisers were a new learning curve for me

  • It was not always easy to get hold of adviser for Usability evaluation 

​

​

Solution

1. Messaging and Error handling.

2. Add option for the adviser to handle commission 

3. Error Messaging and pop up.

4. Advance Filter to narrow down the result.

5. Allow user to copy the benefit and change the detail as required without going through the whole process

123achevron_edited.jpg

Design Process

Untitled 25.jpg

Understand

  • Understand the problem

  • Organisation Objectives

Usability

Testing

  • 5 Financial Advisor

  • User Validation

  • 5 Financial Advisor

Ideate

  • Storyboarding

  • Userflow

  • Low fidelity Design

  • High fidelity Design

Prototype

  • UI Mockup in Figma

Analyse

  • Analyse user insight

  • Create Empathy map

  • Create Affinity map

  • Organise Problems

  • Competitor Analysis

Design

HandOver

  • Checklist

  • Run through

  • Comparision

  • Update

QA

  • Checklist

  • Run through

  • Comparision

  • Update

Understand

UNDERSTANDING THE PROBLEM

  1. Difficult to workaround

  2. Low Findability 

  3. Inconsistency

  4. User Journey

  5. Inefficiency

Business Needs

  1. Increase engagement and the licencing 

  2. Rebrand and redesign onto salesforce platform

  3. Complete before rebranding of the company. 

123achevron_edited.jpg

COMPETITOR ANALYSIS

Before diving into changing the design or understanding users benchmarking the competitors, their market and the design solution is as important. Various competitors such as iPipline, iress, direct life, underwriteme etc were analysed. The good and the bad design designs were benched marked and considered for the future "Synaptic's Pathways Protection Software".

Single Life Benefit

Joint Life Benefit

Comparison

Filtering

Commission handling

Underwriting

E-Apply

Research

Untitled 25.jpg

financial advisor

​

Webinar with SimplyBiz

Analyse

EMPATHY MAP & AFFINITY MAPPING

After understanding the business goal,  the next step was to understand the user / adviser who were using synaptic's Webline software as well as the adviser who was using other software. In order to do so, the interview was conducted with a total of 6 advisers. 

Screenshot 2022-06-27 at 17.36.04.png
123achevron_edited_edited.jpg

USER JOURNEY MAPPING

The third step after user research was to draw user journey for a record to understand the user goal, actions, Touchpoint, Painpoint, their feelings and the opportunity to resolve any issue. The User Journey was divided into Happy and Sad path, Sad path gave us a good lead where the main point was situated. 

Screenshot 2022-06-27 at 17.37.37.png
Screenshot 2022-06-27 at 17.37.41.png
Untitled 23.jpg

ORGANISING PROBLEM

1:  HMW avoid void result?

2: HMW prevent user from unrealistic expectation?

3. HMW approach commission handling?

4. HMW customise the result to user's preferrence? 

5. HMW allow the user to be confident about their selection of cover option?

6.HMW prevent manually confirmation of Critical Illness cover?

Ideate

Untitled 25.jpg
456Chec_edited.jpg

MIND MAPPING

456Chec_edited.jpg
456Chec_edited.jpg
456Chec_edited.jpg

STORYBOARD

After identifying the issues in the system Storyboard was created in order to represent the design solution by telling a story how the user involved in the system would be able to interact with it. Presented to the Product team (Product manager, Software product specialist, business analyst, salesforce analyst, product support consultant)

456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
Screenshot 2022-06-27 at 17.44.09.png
Screenshot 2022-06-27 at 17.44.09.png

USERFLOW

456Chec_edited_edited_edited.jpg

ORGANISING PROBLEM

1. Could not get a result every time. > Solution (Error handling)

2. Unrealistic expectation.  > Solution (Error handling)

3. Difficulties in commission handling. > Solution (Add option for the adviser to handle commission)

4. Be able to narrow the result.>Solution (Advance Filter)

5. Have to do 4-6 quotes before getting the best one.> Solution (Comparision tool)

6. Critical Illness Cover table still in pdf format was in convenient and time-consuming to use > Solution (Designing the Critical Illness Cover table (a pdf) to a dynamic table)

456Chec_edited_edited_edited.jpg

USERFLOW MVP

456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
image (5).png

LOW FIDELITY WIREFRAME

456Chec_edited_edited.jpg
456Chec_edited_edited.jpg

Product support Consultant and Product Manager worked together to come up with the following wireframe. Which was presented to the salesforce dev team, API team, Product analyst etc.

Screenshot 2022-06-27 at 17.56.10.png
456Chec_edited_edited.jpg
Screenshot 2022-06-27 at 17.56.10.png
Screenshot 2022-06-27 at 17.56.19.png
Screenshot 2022-06-27 at 17.56.19.png
456Chec_edited_edited.jpg
Screenshot 2022-06-27 at 17.56.19.png

HIGH FIDELITY WIREFRAME

456Chec_edited_edited.jpg
image (6).png
image (7).png
456Chec_edited_edited.jpg
image (8).png
image (9).png
456Chec_edited_edited.jpg
image (11).png
image (13).png

Design System

Thumbnail.png

Prototype

Frame 14.png
Frame 13.png
Untitled 23.jpg
Untitled 23.jpg
Untitled 23.jpg
Group 21.png
Untitled 23.jpg
Group 118.png
Untitled 23.jpg
Untitled 23.jpg
Untitled 23.jpg
One.png
Two.png
Untitled 23_edited.jpg

User Evaluation

Untitled 25.jpg

The first step to conduct was to prepare what needed to be asked in the usability test (The task). Hence, I created the following user journey that I expect the user to go through. With the help of the team we prepared total of 5 task,  questionnaire (SUPR-Q) and follow up qualitative interview for  a deeper insight of user’s experience and what they thought of the new design. 

456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
image (16).png
456Chec_edited_edited.jpg

Iteration

1.  Using filter was distracting. 

2. Users were not able to see the result page while making changes to the advance filter

3. Users took a while to figure out the mechanism of drag and drop of the advance filter and Product list.

 

The consistency in the design throughout the web service was the core of this project. Hence, the user were finding using the new software easy since they were able to use their understanding of using the product from another service here. Hence, use of less cognitive workload. 

456Chec_edited_edited.jpg

Although the idea behind having the drag and drop was to allow the user the flexibility of using the Product list and the Advance filter together it made the user overly confused. After analysing how they were using the software and the interview having both were not a prority. 

456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
456Chec_edited_edited.jpg
Untitled 23.jpg
Untitled 23.jpg

Final Design

BEFORE

Untitled 23.jpg
Two.png
Untitled 23.jpg

AFTER

1.png

Design handover

Pro Handover.jpg

QA Test

check.png

What would I do better

1. Complete QA Test with the developer.

2. Make changes based on the differences.

3. Perform Usability testing on the actually working software

ESG

A professional design Project

bottom of page