Senior Product Designer with clients across automotive, engineering, pharma and media.

dribbble

github

Alan Long  • Peerlist

<h3>Product Analysis</h3><ul><li>Role: Lead Product Designer, Onboarding</li><li>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.</li><li>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.</li><li>Design &amp; UX Audit: <ul><li>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.</li><li>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.</li><li>Key Improvements:<ul><li>Semantic token system implemented for color, layout, and typography, enabling light mode and accessibility enhancements.</li><li>Refined component states improved accessibility and reduced cognitive load, leading to decreased customer drop-off.</li><li>Redesigned single-select lists to allow direct advancement upon option selection, increasing input efficiency.</li><li>A more compact top app bar design increased screen space for content and improved visual hierarchy.</li><li>The progress bar was relocated to the bottom of the screen, grouped with the 'continue' button, creating a clearer action-reward loop.</li></ul></li><li>Corporate Site Audit: The engagement further extended to a UX audit of the corporate site, with recommendations for typography, button sizing, and contrast.</li></ul></li><li>Impact:<ul><li>The implemented light mode and UX audit findings were rolled out across the onboarding flow and corporate site.</li><li>The initial one-week brief evolved into three major statements of work, significantly expanding the project scope.</li><li>Agency account growth exceeded 8x due to the success of the initial project.</li><li>19 screens of the onboarding flow and corporate site received UX refinements.</li><li>Onboarding completion time was reduced by approximately 45 seconds, with 11 taps removed and overall cognitive load reduced.</li></ul></li><li>Lessons Learned:<ul><li>Operating within an existing system requires a token-driven approach, even if it involves reverse-engineering existing values into primitives.</li><li>Accessibility considerations may necessitate pushing back on or amending brand guidelines.</li><li>Building strong foundations through systematic approaches earns extended engagements and builds client confidence.</li></ul></li></ul>

Jefferies Trading app onboarding

Exploring how a new AtkinsRéalis brand could live online through design sprints, user testing and accessibility work.

AtkinsRéalis Rebrand

Google Exec Circle was a weekly webinar series launched as a response to the COVID-19 pandemic, produced by Cheerful Twentyfirst. It ran throughout the first half of 2021 and brought together some of Google UK's key business partners.

Google Exec Circle

Shipped GSK's first company-wide design system:<ul><li>Core design system, a company-wide design system</li><li>Adopted by 5/5 product teams</li><li>500+ tokens enable colour and density modes</li><li>Solved brand accessibilityissues. Designed and built it in Figma.</li></ul>

GSK Core Design System

Overhauled Mercedes-Benz's media planning platform used to allocate ad spend. Strong test-market reception; now rolling out across Europe.<ul><li>Near-abandoned platform became the team's default, with 40–50 daily users.</li><li>Tripled time-on-tool (under 10 to over 30 minutes).</li><li>~80% reduction in settings per scenario, with visualisations now updating live.</li><li>Improved IA; 15 discrete tools became 3 stages that mirror the planning process.</li></ul>

Mercedes-Benz Media Decision Engine

Designed the WSJ CEO Council virtual event platform and led the front-end development to a tight deadline. Worked alongside Gramercy Tech's developers on implementation and presented directly to WSJ stakeholders throughout. The platform's design and codebase was adopted across future WSJ Leadership Institute events.