IRA Account portal
You’ve just been hired by a B2B2C fintech startup. You are their first UX hire and one of the first 15 employees. They show you their product, a white-labeled IRA account portal developed in seed round.
We know we need a redesign.
Considering our stage, technical limitations, and fundraising needs, how do we create a product vision that will evolve with us?
NOTE: All logos and branding shown in these designs are placeholders. Any similarities to existing businesses, by name or design, are purely coincidental.
Outcomes
Here’s what we accomplished.
22+ Million invested.
Fortune 500 companies joining the sales pipeline.
Top 10 call volume causes addressed.
Improved WCAG Conformance.
Seamless white labeling for B2B2C.
Scaled performance and new features via external APIs.
Business cost reduction with new user prompts.
Problems to Solve
Initial thoughts for the redesign.
User Experience: Onboarding, workflows, navigation, and terminology cause confusion. As a result, customer care gets avoidable calls from confused accountholders.
Visual Design: The white-labeled design implements branding in a way that causes WCAG compliance issues with some brand colors and logos. Icons/graphics aren’t contextually supportive or visually consistent.
Competitive Analysis: The portal lacks industry-standard features such as payment processing via linked bank accounts, ID verification alternatives to security questions, and analytics such as rate of return.
Performance: There are code bottlenecks— this portal can’t handle load as the company scales and the number of accounts in production grows.
The Design Process
From research, to deliverables, to refinement.
The Design Process
Collect initial requirements from the business.
Conduct user research and competitive analysis (combining qualitative and quantitative methodologies).
Deliver generative analysis (summary, personas, journey maps).
Information architecture (site map and testing new navigation).
Deliver designs (low to high fidelity, testing, review, and refinement).
Define Minimum Viable Product and provide UX support throughout development and continuous release.
The Designs
Problems Solved:
Missing data reduced: a completion score encourages users to complete optional steps.
Drop-off rate reduced: a progress bar informs users of where they are in the enrollment process.
Increased assets under management: a prompt in enrollment encourages users to set up a contribution schedule (autopay).
Enrollment Process
Problems Solved:
Lower call volume: Viewing pending transactions on the overview reduced panic when a $0 balance appears in the account.
Fewer IRS mistakes: A contribution progress bar shows the annual legal limit, $6,000 — and sets this visually as a goal to maximizing savings.
Happy client companies: Addition of commonly requested features such as rate of return and projected account value.
More streamlined development: The modular dashboard can evolve, with new cards for new features, without requiring a rework of the user interface.
Overview
Problems Solved:
Better adoption of add-on services, and happy marketing teams: The resources tab advertises client company financial advisors, managed accounts, and more. Two of these cards can be pinned onto the overview dashboard.
More support for user financial literacy: Articles and videos can empower users to save and manage their investments effectively.
Resources
Problems Solved:
Easier access to important tax information: A card displays annual money movement totals.
More motivation to save: A card prompts users to set up a contribution schedule and displays the autopay prominently on the user interface.
Less confusion about transactions: Changing the design from the former portal, transactions are separated into two tabs: Contributions and Distributions (Money in and out) and Sales and Purchases (money moving within the portfolio).
Transactions
Fund Details
Problems Solved:
Better adherence to compliance: Fact sheet and prospectus documents are prominently displayed.
Less user hesitancy: Clear information on fund performance supports informed decision-making.
Happy client companies: Clients expect improved analytics about portfolio performance and customizing strategy.
White Labeling
The new portal keeps brand color and logo separate from key UI elements. The visual redesign improved WCAG conformance. In the background, branding doesn’t interact with fields, titles, etc. The redesign enabled greater logo variability amongst clients.
Comparison Gallery
Former Portal vs. New Design
Former Portal - start of enrollment
New Design - start of enrollment
Former Portal - Choosing account type
New Design - Choosing account type
Former Portal - Login screen
New Design - Login screen
Former Portal - Overview tab
New Design - Overview Tab
Former Portal - Changing investment strategy
New Design - Changing investment strategy
Former Portal - Transactions tab
Former Portal - Investments tab
Former Portal - Changing beneficiaries
New portal - Changing beneficiaries
Challenges
Roadblocks and how we overcame them.
Here are some of our roadblocks and how we managed them:
We didn’t ‘own’ the users: as a white-labeled product, the end users are clients of our client companies. This posed challenges for user research. For qualitative research, we spoke to people from target demographics but did not reach out to current users.
Big Roadmap Change: Company priorities shifted quickly in 2020 and I needed to get the designs development-ready far sooner than anticipated. This meant building out hundreds of screens and rushing through internal reviews. Some designs needed more in-depth technical reviews. We overcame this by embedding design into Scrum teams and including designers in refinement sessions. (During development I was building a UX team)
Development Timeline and Changing Minimum Viable Product: The timeline to launch was very tight. We had to work quickly to slash the expected MVP. I was very active in this process —we worked out compromises with developers to retain the improved UX given limitations. We made a plan for continuous enhancement for post-launch utilizing MoSCoW prioritization.
Defining Minimum Viable Product
Utilizing MoSCoW Prioritization (‘Must Haves’, ‘Should Haves’, ‘Could Haves’, and ‘Won’t Haves’)
Cut from scope if it’s:
Not core functionality
A feature enhancement that isn’t urgent or essential.
Makes the client company happy but isn’t essential and hasn’t been requested by users. These are important, but come later.
‘Could Haves’ and ‘Won’t Haves’
Kept in from scope if it’s:
Core functionality that existed in the former version before the redesign.
Will lower call volume which will be essential for organizational scaling.
Supported by user research showing major business value.
‘Should Haves’ and ‘Must Haves’
Reflection
My takeaways and self-evaluation.
Missions accomplished: These designs were highly effective at raising capital and attracting industry attention. With an early-stage startup, you need to look at the design from a bird’s eye and a detailed view. To do this, I needed to develop subject matter expertise — thoroughly understanding the company’s product, industry positioning, and backend processes from top to bottom. Far beyond what’s shown here, these designs gave the bigger picture, captured the minute details, and supported Product and Development with getting MVP past the finish line.
Room for improvement: Financial products have a LOT of complexity. Internal reviews had to move quickly because this project was shifted up in the roadmap. Some of these complexities weren’t included in the designs until they were discussed in refinement or presented in sprint reviews. In the future, I’d address this with intentional structure around reviews, such as defining roles/responsibilities, splitting up review work, and better coordination across departments.