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.
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.
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.
To validate whether redesigning the client site home page was needed we conducted usability studies on the existing site. We tested the following aspects:
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.
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.
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.
We used unmoderated tests and A/B testing via UserZoom to determine which design alternatives were better understood by clients.
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.
>$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.
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!
"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!"
"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."
"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."
"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."
"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."
"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."
"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."
I'm always open for new projects, collaborations, talking shop or
just a friendly hello 😊