Context: Tradu is a UK trading and investing platform owned by Jefferies Financial Group, operating as a mobile-first web app. Onboarding is the critical first touchpoint for new customers.
Problem: The initial challenge was to implement a light mode for the onboarding flow. The existing dark-mode design system lacked semantic tokens, making a direct inversion difficult and unscalable. A more robust approach involved rebuilding the color foundation with primitive tokens that could support both light and dark modes.
Design & UX Audit:
A systematic approach was taken to define primitive and semantic tokens for color, layout, and typography. This enabled the creation of a light mode without compromising the existing dark mode and improved control over the accent color, ensuring accessibility.
The scope expanded to a comprehensive UX audit of the 19-screen onboarding flow, identifying refinements to reduce friction and customer drop-off. Key areas addressed included field-state treatments, progress bar placement, single-select patterns, and the top app bar.
Key Improvements:
Semantic token system implemented for color, layout, and typography, enabling light mode and accessibility enhancements.
Refined component states improved accessibility and reduced cognitive load, leading to decreased customer drop-off.
Redesigned single-select lists to allow direct advancement upon option selection, increasing input efficiency.
A more compact top app bar design increased screen space for content and improved visual hierarchy.
The progress bar was relocated to the bottom of the screen, grouped with the 'continue' button, creating a clearer action-reward loop.
Corporate Site Audit: The engagement further extended to a UX audit of the corporate site, with recommendations for typography, button sizing, and contrast.
Impact:
The implemented light mode and UX audit findings were rolled out across the onboarding flow and corporate site.
The initial one-week brief evolved into three major statements of work, significantly expanding the project scope.
Agency account growth exceeded 8x due to the success of the initial project.
19 screens of the onboarding flow and corporate site received UX refinements.
Onboarding completion time was reduced by approximately 45 seconds, with 11 taps removed and overall cognitive load reduced.
Lessons Learned:
Operating within an existing system requires a token-driven approach, even if it involves reverse-engineering existing values into primitives.
Accessibility considerations may necessitate pushing back on or amending brand guidelines.
Building strong foundations through systematic approaches earns extended engagements and builds client confidence.