Product Analysis

• Role: Lead Product Designer, Onboarding
• 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.