eMoney Advisor Client Site Redesign

Overview

eMoney Advisor provides a suite of financial products to help financial advisors and their clients talk about money. One of the most important tools in the advisor’s belt is the “Client Site”, a white-labeled financial dashboard that the advisors provide to their clients.

With money being a sensitive subject, and the client site not having been updated in a while, the new eMoney client site home page needed to display relevant information, look aesthetically pleasing, and more importantly, it needed to communicate a client’s financial health.

In this project, I helped bring a fresh new look to the client site home page.

Goals

To redesign the client site homepage by enhancing the experience, setting it up for scalability and bringing in a fresh look and feel, all whilst preserving familiarity in the user interface.

New look + enhanced experience

Enhance the experience and add a fresh new look.

Scalable for future improvements

Establish patterns that can be built upon.

Preserve Familiarity

Preserve familiarity in the user interface.

My Role

For this project, I led the UI/UX design of everything that surrounds the homepage. Since we where in the initial stages of developing a component library we had room to experiment with the UI.

Research

To validate whether redesigning the client site home page was needed we conducted usability studies on the existing site. We tested the following aspects:

  • Content Hierarchy
    Participants were asked to stack sections or cards on the client site based on their importance. We later used the results to help shape the order in which content/modules are displayed on the homepage and what new cards we would add.
  • Navigation
    Participants were asked to navigate within cards or find certain values.

Sketching

Before jumping into wireframing I start sketching and whiteboarding with the team and stakeholders. I started with this initial concept and gathered some feedback.

After getting the feedback I quickly pivoted layout and design direction to a card-based dashboard with a left-hand side that would contain the collapsable aggregated accounts card.

Wireframing

Considering what we learned from our initial research, I started wireframing some initial concepts.

Prototyping

I created some clickable prototypes in InVision which we used for testing and later to visually aid the creation of Jira stories for the development team.

Testing

We used unmoderated tests and A/B testing via UserZoom to determine which design alternatives were better understood by clients.

Design Solution

The new emoney advisor-client site serves up the most important content to the users. A new sticky accordion structure on the accounts card lets users always have control over what they see without losing context. It repurposes existing data to personalize the experience and it surfaces new cards to match new client site sections.

Repurposing data to enhance the experience

We already had images of user accounts in the organizer section of the client site. By reusing them and presenting them next to the names this gave the client site a more personalized touch.

We also had net worth and investments historical data, we decided to surface it decoratively as the backdrop for these cards.

New accordion in accounts card

We needed to make sure the accounts card scaled for the average number of accounts per clients

We ran a query and determined that the average number of accounts per client was 14, so we decided to proceed with an accordion style. Making this card an accordion allowed it to scale, making the accordions sticky meant users could choose to see what mattered to them.

New goals section means new card for the homepage

To allow clients more visibility into their recently added goals section, we decided to create a goals card which summarizes goal progress. We decided to limit the number of goals displayed to 3 since the average amount of goals per end-investor is 2.5 (Via Query).

Spending card details

What spending card is complete without recent transactions? We decided to include 5 of the most recent transactions. We also made the overall budget part of the spending card since they are closely related.

Tradeoffs

Although I received a few comments early on by stakeholders about the importance of keeping all of the content ‘above the fold’ we decided that there was more scalability in a design that encouraged scrolling.

Results

The product was announced at our yearly summit and was generally well-received from advisors and end-investors. Two years in, we’ve gone from 120K to 200K+ monthly unique visitors.

Lessons Learned

Never underestimate the importance of data states/cases.

Each card had a family, it entailed a loading state, an empty data state, and an error state. Not to mention the countless page alternatives depending on the integration (plugin) the user had… But that’s the beauty of incremental improvements while working in agile sprints!