UCD & KPI focused Design |
Visual design | Web App | Dashboard |
About the company:
Finimize is an online platform delivering financial advice as well as directly enabling its users to invest their money in carefully selected placements.
There are 2 touchpoints:
• The newsletter and more recently their iOS app are the main sources for educational content.
• The Finimize web app is where the action is: users can log in and access their personal dashboard and manage their investments.
The mission here is to design a hi-fidelity visual of the dashboard for the Finimize web app that:
- Aligns with the business's vision
- Offers the best user experience
- Embraces the brand guidelines
Evaluating the task
First off let's start by evaluating the elements we have for this mission. Below is the given persona which I illustrated in order to better visualise the situation.
Then Jason is supposed to land on his custom dashboard with a clear call-to-action which is the purpose of the task. The first question that pops to my mind by reading this last sentence is:
"Which CTA? As in what is the intended action that would best serve Finimize’s interests and ultimately Jason’s too?
Missing info/Challenge to overcome:
- Ideal CTA (Call-to-action)
- Dashboard content (i.e. tracked metrics)
- Granularity offered (Y, M, W, D?)
- Missing style guide elements (Typeface, hexcodes, assets)
- In & Out navigation available from this view
Brainstorming & Overcoming missing info challenge
1. In my understanding, what is the mission of Finimize?
Guide and educate people towards smart ways to grow their dormant savings money.
2. So what it is exactly that I’m designing?
A wallet-type of dashboard displaying assets under management and margins of improvements.
3. What is the desired CTA?
I would assume the CTA falls under Finimize’s mission to encourage people to safely invest portions of their savings meaning it is leaning towards incentivising users to invest more through the platform.
At this point I’m assuming that Finimize’s business model is probably similar to that of Coinbase in a sense that it resolves around commissions per placement?
4. What psychological triggers am I going to pull to achieve the desired CTA?
Capitalize on frustration/FOMO to achieve desired CTA
e.g. By investing XX% more in YY you would have earned £ ZZ. Invest now?
5. Quick thoughts on the CTA
- CTA must match the brand’s colours.
- 1 CTA/Investment suggestion over 1 overall “Invest now” CTA to make it more comprehensive and place more control within user’s hands.
6. Dashboard content?
- Module 1: Total assets under management (Invested + Cash Savings)
- Module 2: Investment allocation
- Module 3: Invested assets (1 component/investment opportunity)
7. Choice of visualization elements?
- Pie chart for module 2
- Bar & Line charts for module 3
How many levels of granulation? Last 365 d / Last 90 / Last 30 d / Last Week / Last Day
I’ll use the Coibase granularity levels: 1H / 1D / 1W / 1M / 1Y / ALL
9. Bridge the missing style guide issue
I used “WhatTheFont” to find the closest looking typeface for the design
- Bold font: best match is “Kobern Black”
- Regular font: best match is “Acorde Regular”
But both are paid fonts, and after some extra research, it was found that “Avenir” is the right one.
Next I used the eyedropper to pick up the colour palette’s hexcodes
Quick Sketches to visualise the look of the dashboard
Given the short amount of time available for the mission which aimed at producing hi-fidelity visuals, there was no time for wireframes and those low definition sketches served as a basis.
UI design in Sketch
Version 1: Bar charts view for data visualisation
Reasons behind design choices:
The reason for choosing the “Look Backward” approach to serve the CTA:
- Look forward financial predictions suffer from data inaccuracy which may impacts trust
- CTA associated with “Look Forward” is “You should” vs “You could have” for “Look Backward” which removes the pressure to take action and turns it into a logical deliberate choice based on factual irrefutable data rather than a “forced one”.
Version 2: Alternative way of displaying the information using line graphs
Reasons behind design choices:
A segmentation elements has been used to show different visualization options for the data. The bar chart offers a snapshot of the total assets at a present temporality while the line graph offers a more comprehensive look at the evolution over a given period of time up until present time.