%20(1).png){kind=small}
.png)
Quick facts
My Role
Freelance Sr. UX Designer
Duration
6 weeks
(Mar-Apr 2023)
Team Members
Account Manager
Creative Director
Sr. Art Director
UX Designer
Data Architect
Developers
Toolbox
Sketch
Jira
Confluence
Zeplin
Deliverables
Brand Strategy
Visual Design
Mockups
Client
HLK Agency
Background
&Partners is a new financial services firm that was founded by three former Wells Fargo Wealth Advisor executives with 30+ years of experience each. They had the vision to build a different and better venture for Financial Advisors (FAs) - one that offers more freedom, flexibility, and choice.
The Ask
&Partners' leadership needed to establish their brand and visual style as well as flows and screens for their customer intake process. One of their main tools was the Financial Advisor Recruiting Portal which acts as a collection point for key information from candidates (i.e. Financial Advisors) who are interested in joining the company. This separate, secure destination asks FAs to fill out a series of mandatory forms and answer questions to calculate how much equity they would qualify for based on their experience and portfolio size. It was my team's job to divide and conquer while still coming together to collaborate when needed.
Establishing a brand
Beginning with the name, we needed to identify the logo and color palette for the brand. The financial space is heavily occupied so after conducting long hours of research and competitive analysis, we were able to land on a unique and distinct brand.
Color Palette
%20(1).png)
Making the complex simple
After creating the look and feel, I began designing the portal journey. I began with a simple Welcome Page that consisted of an introductory message and a login CTA. I wanted to eliminate excess noise from the page since the following pages contain much more text and actions. Following the sign-in page, the user is brought to the attestation which was provided by the client and required for the portal. One key feature that I implemented on this page was a progress bar to inform the user at the beginning of how many steps are in the process.
After the FA confirms the attestation and continues, the user is brought to an overview of the necessary forms. Since the Pro Forma was a key component of the portal, I created a tooltip that calls out when the tool will be accessible. The user can acknowledge the tooltip and begin filling out the different sections. Additionally, the status bar quickly shows whether a section has been 'Not Started', 'In Progress', or 'Complete'.
.png)
Tackling the Pro Forma
Upon completing the required minimum information, the Pro Forma button turns green and becomes enabled with another tooltip informing the user that it is ready to view. As mentioned previously, the Pro Forma is one of the main features of the portal. This powerful tool provides advisors with a 10-year illustration of their finances and helps them create business plans and make financial forecasts. &Partners knew that this piece of their site could make or break their business so they needed it to be as clean, straightforward, and user-friendly as possible. &Partners provided me with a template for how the Pro Forma needed to be structured, the required line items, and the form logic. From here, I created an intuitive Pro Forma that captured the client's needs and allowed the user to see all the necessary information without overwhelming them.
Client provided Pro Forma Data
My Pro Forma design
Maintaining consistency
I contributed to and updated the &Partners style guide with new components and styles like row highlights, hover states, links, colors, and more. This ensured that moving forward, the company had consistency across its sites.
%20(1).png)
Launch
&Partners Financial Advisors Portal successfully rolled out in June 2023! Success metrics are in work to understand how users are adopting the tool and will be reported once collected. I'm so happy to have created a tool that helps professionals in the fintech space to have greater control over their financial future.
.png)