How a SaaS dashboard redesign led to $2 million in net new revenue - eMoney Advisor

Team
Me, product owner, developers
Role
UX Designer
Deliverables
UX, Discovery, Research, Strategy, Wire-framing Prototyping
Timeline
3 Months

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's 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.

My Role

For this project, I led the UI/UX design of everything that surrounds the homepage. Since we were 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 wire-framing I start sketching and white-boarding with the team and stakeholders.

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

Wire-framing

Before jumping into wire-framing I start sketching and white-boarding with the team and stakeholders. I started with this initial concept and gathered some feedback.

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. Reusing them and presenting them next to the names gives 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 client. 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 and making the accordions sticky meant users could choose to see what mattered to them.

The new goals section means a new card for the homepage

To allow clients more visibility into their recently added goals section, we decided to create a goals card that 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 from 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

>$2M in net new ARR. The product was announced at our yearly summit and was generally well-received by advisors and end investors. We've also doubled 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!

What some people are saying about me

"I managed Frankelly for several years at IKEA. During this time, he consistently demonstrated initiative and dedication as a Senior Product UX Designer, particularly in his efforts to understand customer needs and align them with business objectives"

A portrait of Justin Davis, smiling and wearing a purple button shirt and glasses with an off-focused forest setting in the background

Todd Kelly

Director of UX and Product Design @ IKEA

"His empathy and desire to understand the users resulted in intuitive and desirable interfaces that were quickly adopted by stakeholders. If I were to build my Product Team today, no doubt, Frankelly would be the first designer I would ask to come on board!"

Galina Sidarenka pictured here wearing a navy blue button shirt and smiling

Galina Sidarenka

Staff Product Manager @ CNN Business

"I had the great pleasure of being on the same team as Frankelly at eMoney. I found that his designs always addressed the various stakeholders' requests, while ultimately keeping the user in the forefront."

A portrait of Caroline Byler, smiling and wearing glasses in front of a white background

Caroline Byler

Product Manager @ Envestnet

"Frankelly lives and breathes the user experience. He has an amazing talent for taking a challenging and cumbersome experience and turning it into something simple and enjoyable for all users."​

A portrait of Holly Cusack, smiling in front of a blurry background

Holly Cusack

AVP, Application Development @ Lincoln Financial Group

"His passion for bringing joyful user experiences to everyone is what separates him from other designers. His keen ability to perform interviews and usability tests with users will lead to comfortable, well-designed user experiences."

A portrait of Brandon Au wearing a black sweater with a white undershirt, glasses and smiling in front of a beige background

Brandon Au

Software Engineer @ OpenGov

"He is also a very wonderful person to work with. He is personable, collaborative, and supportive of all his teammates. He is eager to learn from others and has an excellent understanding of how to best partner with User Research."

A portrait of Justin Davis, smiling and wearing a purple button shirt and glasses with an off-focused forest setting in the background

Justin Davis

Senior User Experience Researcher @ Fidelity Investments

"Working with Frankelly has been a true pleasure. He is super easy to work with, dedicated, hardworking, and shows a true eye for design. He always strives to create solutions that are both visually striking, but also simple and intuitive."

A portrait of Justin Davis, smiling and wearing a purple button shirt and glasses with an off-focused forest setting in the background

Belcky Bayard

Front-End Web Developer @ Vistar Media

"Frankelly is a true team player and collaborator, he fostered a positive work environment and encouraged collaboration among all team members. His positive attitude and dedication to his craft made him a pleasure to work with."

A portrait of Justin Davis, smiling and wearing a purple button shirt and glasses with an off-focused forest setting in the background

Bryan Mey

Senior Software Engineer @ Villanova Tech

Want to chat with me?

I'm always open for new projects, collaborations, talking shop or
just a friendly hello 😊

Schedule a meeting