Financial Dashboard
1 month PROJECT
XYZ Wealth* is a personal finance platform that is in the early stages of development. The business goal of the website is to provide a match service for financial advisors to attract new clients and to create a social community that promotes financial literacy and growth.
The client is a startup company who partnered with Springboard UX/UI bootcamp to provide students with hands-on experience in exchange for design work. My team was the second UX/UI student team involved with the project.
Our challenge was to build upon the first team’s progress and determine what areas of the project needed to be prioritized in order to achieve an MVP for launch.
* Actual product name is concealed per client NDA.
The Client Dashboard is a key feature of the website that had not yet been designed, so we focused exclusively on constructing that section. The dashboard is where the client can link financial accounts, access an overview of their transactions and investments, set financial goals and budgets, and interact with their financial advisor.
I was partnered with one other Springboard student, Kelly Choe. We chose to work in tandem and split all tasks evenly so that we could both gain experience in each phase of the project. This included scope definition, project management, client communications, information architecture, wireframing, prototyping, and conducting medium-fidelity usability testing. We each took responsibility for three red routes of the dashboard and offered support and critique of each others work.
The purpose of the product is to connect users with financial professionals so there are two distinct target demographics for this website: Clients and Advisors. Since my team was working on the Client Dashboard, we were only concerned with the client persona which was developed by the previous team.
Their research determined that this target market would be geared towards millennial women, ages 28-48.
Grace Ng is a fashion merchandiser who wants to save for her business but also enjoy her life now. She gets overwhelmed by financial terminology and finds it difficult to manage multiple accounts. Grace wants someone to help her be accountable and provide financial mentorship but she feels discouraged by wealth management firms that aren’t friendly. Grace wants to feel valued as a client.
When the project was passed to my team, a number of wireframes and user flows had been drafted for the home page, community section, user onboarding, dashboard landing pages, and advisor match.
However, the functionality of the main hubs of the site (the client and advisor dashboards) had not been completely addressed.
I performed a site audit and created an information architecture map to give us a bird’s eye view of the project status. This also helped us identify priorities so that we could align with the client’s expectations.
The client chose a modified version of Option 2. We would focus on building out the main red routes for the client dashboard and conduct usability testing to validate our ideas.
The presentation of our site audit helped the client understand that we still had a lot of construction to do on the key features of the website and that early testing would ensure we were aligned with the needs of her users.
We determined that these pages were the priority in order to create a minimum viable product:
Initially, the client wanted us to start working on the UI and brand platform for the pages that had already been drafted (green blocks on map), but we felt that this step was premature since the key features of the website still needed to be built and none of the existing designs had been tested with users.
We advised the client of the importance of early usability testing and pointed out some errors in the onboarding wireflows that justified user feedback to help support our claim. Then, we proposed two potential project plans that took into consideration the client’s desire to achieve a high fidelity deliverable:
My partner and I each took responsibility for three of the six red routes. I chose to build out the goals, accounts, and budgets pages as well as all the secondary wireflows that existed within each section. Kelly focused on the dashboard landing page, subscriptions page, and investment portfolio section.
Financial goal setting is a important step towards becoming financially secure.
The purpose of this page is to help a user become more accountable in achieving their goals.
The Goals Page directly supports the platform’s mission of supporting financial literacy and growth through accountability and community support. The Goal Sharing feature additionally supports business growth through the onboarding of new platform users.
When designing the Goals Page, I thought about e-commerce sites and how they break down information into product listing and detail pages. This model inspired the architecture since we anticipated a user creating multiple short- and long-term goals.
As I dug deeper into the Goal Creation Wireflows, I realized that I wasn’t dealing with a one-size-fits-all solution and learned that each goal could have multiple routes depending on its type and whether or not it would be shared with someone else.
Linking financial accounts to the platform is essential for its performance.
The purpose of this page is to import real-time data for an accurate overview of a user’s financial health.
At first, the Accounts Page seemed like it would be pretty straightforward in terms of design. I thought that I would just need to create a user flow for adding an account and the landing page to contain the data. However, this didn’t address how we might capture data such as market value or account for assets that had already been paid off. These items were needed to accurately calculate a user’s net worth.
Also, the client expressed concern about how we would accommodate users who didn’t feel comfortable linking their financial information.
Identifying key areas of spending helps a user understand how expenses are allocated and where they can be reduced.
The purpose of this page is to categorize expenditures and to link goals to budget modifications.
Initially the Budgets Page confused me because I didn’t connect with the proprietary names* of each of the four budget categories. I wondered if users would too. This inspired me to add a brief description within the hero section of the design. The top three spending areas below it offer further clarity by serving as an example of the category's expenditures.
The client wanted to make sure that a user could create a goal from this page to modify their budget. Since "Building a Budgets" was one of the ten goal types, I simply linked that wire flow back to this page.
*These names have been modified in the case study per client NDA.
My team tested with six users for approximately 45 minutes per session across three days. All of the test participants were women and existing clients of the IDP client.
Each session began with three questions about each user’s experience in using financial platforms, their comfort level in accessing sensitive information online, and assessing their confidence level in financial management. During the session, the users were asked to complete 18 tasks with approximately 3-5 tasks per section of the client dashboard (Accounts, Subscriptions, Goals, Budgets, and Investments).
My partner and I took turns interviewing and taking notes.
Testing revealed three critical issues.
One of them had to do with small, random errors in our prototype that confused the user or prevented them from being able to complete certain tasks. We updated the prototype with our iterations so that it would flow smoothly for the development team.
The other two issues are detailed below:
Most of the users struggled to find the main call to action buttons on the page because the wireframe contained a lot of elements that were visually competing for hierarchy. However, once the users identified where the button was located on one page, they had the mental model to find it on the other pages.
Originally, I didn’t factor in how to design the Empty State pages that would help a first time user engage with a task so I used a landing page that already contained a goal for the prototype. This appeared to distract the users during the test session.
First, I increased the button height, text size and added a plus icon as a visual cue. The plus icon was used in other areas of the site so it would help a user quickly identify a call to action.
Then, I neutralized all the elements within the wireframe so that the elements would just focus on content rather than design.
Finally, I redesigned the empty states of the landing pages so that they offered more of an onboarding experience. I thought that this approach would help a user ease into a task with more confidence by addressing the “why” as well as the “how to.”
All of our users struggled with completing the tasks in the Investment pages. We determined that there were three possible reasons why:
Since we could not validate exactly where the problem occurred, my team chose to focus on providing visual learning cues to improve the design of the Investment and Budget sections.
Unfamiliarity of financial terminology was something each user expressed difficulty with in the feedback sessions so this seemed like an obvious area to address with more learning tools within the page.
To resolve this, we created tool tips that will hover over financial terms on the Investment and Budget pages to provide further explanation of terminology.
I also increased the text size and simplified the language of the explanation of each budget quadrant within the top portion of the page since a few users commented that they didn’t even see the small text.
My partner addressed some of the navigational issues in the Investment section to further troubleshoot some of the usability issues that occurred there.
The goal for this assignment was to help solve a real world problem within the constraint of four weeks.
Auditing the site to understand its history and mapping out the architecture helped us determine the key features needed to achieve MVP. It also helped my team and the client align on expectations.
The Client Dashboard is one of two main hubs of the website. Our biggest challenge in its design was deciding how to present and simplify content that people have difficulty understanding.
Medium-fidelity usability testing helped us validate that our user flows were pretty intuitive but critical issues with the call to actions and the inability to complete some of the financial tasks told us that we had to address some bigger concerns such as being more sensitive to a new users limited financial literacy and not visually overwhelming them with information.
Additionally, the test sessions provided some evaluative feedback to help us understand the users’ attitudes and beliefs about managing all their finances through this platform:
Although we completed a good amount of work on the Client Dashboard section of the website, we left the client with a list of items that we did not have time to address and updated the information architecture map for the handoff. We also recommended that the next UX/UI team to work on the high-fidelity mockups for these pages pay particular attention to the critical areas that we iterated on when doing further testing to ensure we resolved those issues.
