Role
Principal UI/UX Designer
User Interviewer
Design Scope
UI/UX Design
Interaction Design
UX Research
Timeline
July 2024 – January 2025
My Role
Principal Designer owning end-to-end UI/UX across research, interaction design, and the component system to create the product's first AI experience for automating the workflows of financial advisors:
I explored interface design directions that balance AI interface design practices against consistency with the legacy design system
I created an AI interface that a traditional user base of financial advisors could easily adopt and navigate.
Evolve the tool beyond a simple chatbot (how do we make advisors use this instead of ChatGPT?)
I worked alongside the UX team, project management, and engineering, partnering closely to align the build with the product roadmap.
Documented every new component I created for the shared design library.
The Problem
The standard for how financial advisors manage client relationships is higher than ever — but their days are consumed by work that has nothing to do with those relationships. Financial research, keeping up with market events, and meeting management are the biggest time sinks in an advisor’s week, and every hour spent there is an hour not spent with a client.
Automating that busywork with AI so advisors can focus on relationships is an obvious opportunity. The hard part is how. What does an AI experience built into a financial product have to do — and look like — for a traditional advisor base, some of whom have never used AI, to see its value and adopt it on day one?
Our results
⏳
15hr/week saved
15 hours saved per week on portfolio building task times through dynamic chart generation
📊
20hr/month saved
20 hours saved per month on investment research through AI chat tool
🏆
Industry Award Design Recognition
2025 Wealth Management Industry Award Winner in AI Automation for over 5,000 RIA’s
Our features
Feature 1:
Chat Interface
The chat interface had to feel immediately familiar to those with experience using AI tools, while also not overwhelming users who have never used a tool like this in their workflows. My designs borrowed conventions of consumer AI tools to eliminate any learning curve, with advisor-centric prompt cards and previous chat history so users aren't stranded on just a sparse chat interface.
AI Chat landing page
side panel
1
AI chat starting prompt cards
2
side panel of past chats
Design Direction Exploration
That familiarity was a deliberate position, not a default. Diverging too far from our legacy design system would have alienated a traditional, sometimes AI-wary user base; staying too close would have failed to signal this genuinely new feature. I explored a range of directions from conservative to modern, and landed where the interface reads as a natural extension of the product the advisor already trusts — while still clearly announcing its AI capability.
spectrum of conservative to more modern design directions for the chat interface
Feature 2:
Chart Generation
Advisors love charts, but creating them takes time. AI automations allow advisors to generate custom data visualizations from simple inputs, dramatically decreasing average task times. To integrate this capability into the flow of the chat tool’s conversation thread, I followed existing AI tool design conventions of displaying rich inline content such as graphs to reduce unfamiliarity and friction.
data visualizations generated
by the AI tool
1
inline data visualizations
2
deep links to pertinent native YCharts tools
Design Decision:
Dynamic or Static Data Outputs
Advisors need to create many charts for their proposals and reports, but creating them takes significant amounts of time. AI automations allow advisors to generate custom data visualizations from natural language, dramatically decreasing average report building times. When choosing between the AI tool outputting dynamic data visualizations that advisors could tweak or static images, I chose to design the interface for outputting rich editable data to increase early adoption. Allowing advisors to fine-tune the visualizations generated by the AI tool posed risks of the visualizations breaking downstream, but feedback showed advisors prefer to tweak the visualizations on their own. So weighing in the risks, I pushed for the dynamic visualizations to increase early adoption — the main priority of this tool’s rollout.
dynamic AI-generated data visualizations allow advisors to fine-tune them for their reports
Feature 3: Connective Tissue of the YCharts Product Suite
Besides automating tasks for advisors, the AI chat tool seeks to connect and streamline the workflows of advisors as they navigate across their suite of tools, consolidating tasks that typically traverse multiple workflows into a single, streamlined experience.
AI outputs inline links to native stock pages for deeper advisor research
links to relevant news sources from product's newswire
buttons to view AI-generated visualizations in corresponding tools for advisors to dig deeper or edit
dropdown of sources used in outputs from our databases
User Testing Interface Designs
To pressure-test the interface direction, I ran user testing sessions with advisors across a range of AI familiarity. The prompt-card approach with the most familiar interface designs held up, including those more skeptical of using AI in their workflow. Notable user expectations included wanting interconnectivity between the AI tool and the existing product tools, which ties back into the decision of giving advisors agency over the AI-generated data visualizations.
user feedback taken from target users regarding interface designs
user personas
We developed user personas of the financial advisors that use our product, ensuring the needs and goals of those we’re designing for are consistent. We used these documents to ask leading questions like "How would an analyst like Rachel use this?" and "How would this benefit Clint in sales?".
Rachel persona: research/analytical user
Clint persona: client facing sales user
Applications of Color + Design System
Refreshed Color + Design System
To create a visual identity that signifies its AI capabilities, I created a gradient system leveraging existing colors in our design library. The product was a selection of bright, clean gradients that communicates an inviting and intelligent experience.
After researching other AI interfaces, it was necessary to add more modern design elements to the component library to populate the AI interface. I introduced rounded corners, cards with drop shadows, and branded AI icons all leveraging the established design components.
applications of color system
New Motion Design System
The new AI chat tool introduced new animations and new motion design rules that were applied to keep the animations consistent throughout.
regenerating AI prompt cards
scroll down button to bottom of AI response
AI loading skeleton
AI response generation
some animation design patterns
Takeaways
Recognition
🏆
In the 11th Annual Wealth Management Industry Awards, our AI Chat tool was recognized for our use of AI Technology to automate the workflows of wealth managers among several leading players in the industry. We received the finalist award in the AI Technology — Workflow Automation category among our top competitors.