Data Viz Theming
B2B SaaS
White-Label
FinTech
Investor Portal
Responsive
My Role
Senior Support Product Designer for Investor Portal product | Contract via product | Remote | London, United Kingdom
My Impact
Signed off MVP for build 🛠️
Sold to 3 pilot MVP customers💰
Budgets extended 🐥



Scroll to explore
Data Viz Theming
B2B SaaS
White-Label
FinTech
Investor Portal
Responsive
My Role
Senior Support Product Designer for Investor Portal product | Contract via product | Remote | London, United Kingdom
My Impact
Signed off MVP for build 🛠️
Sold to 3 pilot MVP customers💰
Budgets extended 🐥



Scroll to explore
Data Viz Theming
B2B SaaS
White-Label
FinTech
Investor Portal
Responsive
My Role
Senior Support Product Designer for Investor Portal product | Contract via product | Remote | London, United Kingdom
My Impact
Signed off MVP for build 🛠️
Sold to 3 pilot MVP customers💰
Budgets extended 🐥



Scroll to explore
The Situation
The Situation
The Situation
Large 🌐 multinational
💶 finance company with internal 🦾 FinTech startup
Large 🌐 multinational 💶 finance company with internal 🦾 FinTech startup
Large 🌐 multinational
💶 finance company with internal 🦾 FinTech startup
countries
investors
managed
assets
serviced
countries
investors
managed
assets
serviced
countries
investors managed
assets serviced
Working on a white label, responsive investor portal
I was contracted to help their lead designer finish MVP, starting with the component library
Working on a white label, responsive investor portal
I was contracted to help their lead designer finish MVP, starting with the component library
Working on a white label, responsive investor portal
I was contracted to help their lead designer finish MVP, starting with the component library
The Target
The Target
The Target
The Conflict
The Conflict
The Conflict
🧗♂️
I realised that when we have 5+ lines on the line chart, the design is difficult to read
I realised that when we have 5+ lines on the line chart, the design is difficult to read
I realised that when we have 5+ lines on the line chart, the design is difficult to read
The Work I Did
The Work I Did
The Work I Did
I started on a research journey…
I started on a research journey…
I started on a research journey…
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board. Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board. Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board. Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board. Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
1
fill style
the 'vapour' fill makes it visually too busy when 5+ lines 🫣

Try vapour for the top total line only? 🙂↔️

Or no vapour for total, but just the other lines?? 😒

Or how about lines only, with no vapour at all? 😕

…and save vapour for simple situations such as mobile dash?
🫡 good solution for now. Lets park it and continue

2
colour direction
Intuitively, makes sense to use each brands white-label theme colours right? 😃

Well 🤥 for one pilot brand, accessibility testing made the 3rd & 4th colours indistinguishable

PIVOT!
Back to the drawing board
Time for some theory 🤓 and research a new direction
3
exemplar research
How do other products deal with this?

Standout example…

4
knock back!
Discovering the idea of 'knock back'
What if we could have our cake 🍰 and eat it too?
Vapour on hover would illuminate with user direction! 🤩
And we can just use the one primary brand colour! 🫨
But without hover, how does mobile work?
Make the legend a toggle 🕹️
5
present
Presented 📽️ these prototypes 🎁 to the team before refining, and finally updating the design system
The Result
The Result
The Result
Approval for
production ready MVP components
Approval for
production ready MVP components
Approval for
production ready MVP components
Target 🎯 sell to at least one pilot customer
pilot MVP customers ✅
Target 🎯 sell to at least one pilot customer
pilot MVP customers ✅
Target 🎯 sell to at least one pilot customer
pilot MVP customers ✅
Director sign off to commence build 🛠️ phase
Director sign off to commence build 🛠️ phase
Director sign off to commence build 🛠️ phase
Budget increased 📈 to extend my contract and postpone onboarding of cheaper full-time intermediate designer
Budget increased 📈 to extend my contract and postpone onboarding of cheaper full-time intermediate designer
Budget increased 📈 to extend my contract
Let's here it from them…
Let's here it from them…
Let's here it from them…
“
“
i'm learning something every time I talk to him, because he's always learning interesting things that I want to know about
👨🎨
Lead Designer
Client Side
“
“
I enjoyed every design discussion we've had. You are a role model for UX designers, embodying the mindset and principles of HCD in everyday practice and navigating uncertainties and complexities with ease. Your deep thinking on each design problem in the engagement has opened up many opportunities for better solutions.
👩🎨
Head of Design
Agency Side
“
i'm learning something every time I talk to him, because he's always learning interesting things that I want to know about
👨🎨
Lead Designer
Client Side
“
I enjoyed every design discussion we've had. You are a role model for UX designers, embodying the mindset and principles of HCD in everyday practice and navigating uncertainties and complexities with ease. Your deep thinking on each design problem in the engagement has opened up many opportunities for better solutions.
👩🎨
Head of Design
Agency Side
“
i'm learning something every time I talk to him, because he's always learning interesting things that I want to know about
👨🎨
Lead Designer
Client Side
“
I enjoyed every design discussion we've had. You are a role model for UX designers, embodying the mindset and principles of HCD in everyday practice and navigating uncertainties and complexities with ease. Your deep thinking on each design problem in the engagement has opened up many opportunities for better solutions.
👩🎨
Head of Design
Agency Side
Get in touch
Let me know if you would like to have a chat


Get in touch
Let me know if you would like to have a chat


Get in touch
Let me know if you would like to have a chat

