Context
The entry point for every new Tradu customer
Tradu is a UK trading and investing platform owned by Jefferies Financial Group. Their product is a mobile-first web app, and onboarding is the entry point for every new customer.
When I joined the project, Alex Toomey and Lisa Pink had been working with Tradu on the broader design system and corporate site. My focus was the onboarding flow itself, with Lisa providing project management.
Problem
Adding light mode to an existing system
The brief was to design a light mode for the onboarding flow. The existing dark-mode design system used colour values directly rather than abstracted into primitive tokens, which meant a light mode could either be built ad-hoc by inverting values screen by screen, or by rebuilding the colour foundation as primitives that both modes could derive from. The first option would have been faster but would not have scaled. The second would extend as the system grew.
Design & UX audit
The design system, refined and extended
The initial brief was to implement light mode for onboarding. Tradu were impressed with the work delivered and extended the brief to cover a broader UX audit of the product onboarding and the corporate site.
I established a token-based approach to the design system, allowing for a smooth adoption of a light mode without compromising the existing dark mode. Then, in conducting the UX audit, I walked through the designs systematically, identifying refinements that would improve usability and reduce friction across onboarding and the corporate site.
Light mode
Light mode
I rebuilt the colour foundation as a set of primitive tokens, working back from the existing dark mode to identify the values in use and abstract them into a base scale from black to white, alongside primitive tokens for the brand accents. The existing dark mode was then mapped to these primitives, and a light mode was derived as the inverse: surfaces moved from dark tones to light tones, text from light to dark, and so on. The systematic approach meant the light mode was internally consistent rather than the result of value-by-value judgement calls. The work covered the full onboarding flow, ultimately converting 19 screens and 46 component states from dark to light mode.
The primitive token scale, showing dark-mode and light-mode tokens derived as inversions from the same base.
Two specific decisions sat on top of the systematic inversion.
The first concerned Tangerine, Tradu’s primary accent colour. The brand guidelines specified a slightly darker shade of Tangerine for use in light mode, intended to support accessibility. The alternative shade still passed AA contrast against white text, but only by a narrow margin, and the result was a less visually consistent system across modes. I recommended retaining the standard Tangerine in both modes, with black text used over it consistently to meet AA contrast. The accessibility outcome was stronger and the system stayed unified across modes.
Comparison of the standard Tangerine shade and the lighter Tangerine shade specified for light mode, showing both passing AA contrast against black text but the lighter shade only marginally.
The second concerned selected states. A direct dark-to-light inversion left selected states under-distinguished from default states in light mode. Rather than copy the dark-mode treatment, I proposed using Tangerine to mark selection across radio buttons, multi-select buttons, and text fields. The accent did clearer work in light mode than the equivalent dark-mode treatment, where the dark surrounds had given a subtle indicator enough definition.
Selected states in light mode shown twice over, first using black as the indicator and then using Tangerine, across radio buttons, multi-select buttons, and text fields. Tangerine produces clearer visual separation in the lighter environment.
Form-state distinction
Form-state distinction
Field states across the flow had been treated inconsistently between modes, with default, selected, filled, and disabled states using visual treatments that did not always read as distinct. I redesigned the state set so each was unambiguous in both light and dark mode. The changes were defined as system tokens so they propagated across the flow.
Field states in dark and light mode, showing the four treatments (default, selected, filled, disabled) redesigned to be unambiguously distinct from each other.
Progress bar relocation
Progress bar relocation
The progress bar sat inside the top app bar, competing with navigation controls and adding visual complexity to the area users looked to for orientation. I explored several alternative positions and treatments, ultimately recommending the progress bar be placed alongside the primary action button at the bottom of the screen. The change simplified the top app bar and grouped the progress signal with the action that advanced it.
Progress bar variants explored, with compact top-of-screen treatments to placements grouped with the primary action button at the bottom.
Single-select pattern
Single-select pattern
The existing single-select lists used radio buttons that required a confirmation tap on a separate button. This added an unnecessary tap on every single-select question in the onboarding flow. I recommended a pattern where tapping the option itself advanced the flow, removing the confirmation step. The change removed an unnecessary step on a long flow.
The existing single-select pattern using radio buttons and a confirmation tap, compared with a proposed pattern where tapping the option itself advances the flow.
Top app bar actions
Top app bar actions
Concerns had been raised about the visibility of top app bar actions. I researched comparable patterns on Android Material 3 and iOS, then proposed a Tradu top app bar that drew from Material 3 conventions for icon spacing and sizing while remaining within the existing system. The result improved action visibility without breaking platform conventions.
Three top app bar treatments compared: the existing design, an action backgrounds variant, and a Material 3-inspired variant with revised icon spacing and sizing.
Corporate site
The corporate site
The engagement expanded further with a UX audit of the corporate site. The work surfaced a set of refinements to typography, button sizing, and contrast across sections. The deliverable was a Figma file with annotations indicating recommended changes against the existing designs, alongside variant explorations for several sections.
Final recommendations from a UX audit of the corporate site.
Impact
Implemented and extended
The light mode work was implemented across the onboarding flow. The audit recommendations followed in subsequent releases. The Tradu product team referenced the Figma file directly during implementation, using it as the source of truth for the changes.
What began as a one-week brief for light mode expanded across formal statements of work into the full UX audit and the corporate site engagement. The team’s confidence in the work drove the expansion, with each phase building on the previous one.
Lessons learned
Operating inside an existing system
- Token-driven thinking applies in both directions. The foundation work I had developed at GSK started from primitive tokens upwards. Tradu’s existing dark mode had to be reverse-engineered into primitives that could then support light mode. The same systematic approach worked, but applied backwards: identifying the values in use, abstracting them, and re-deriving the original from the abstraction.
- Accessibility decisions sometimes require pushing back on brand guidelines. The Tangerine recommendation went against the brand specification for light mode. The brand team had specified the alternative shade in good faith, but the accessibility outcome was stronger when the standard Tangerine was retained with black text. The lesson is about being willing to make that call constructively, rather than treating brand guidelines as absolute.
- Strong foundations earn an extended engagement. The original brief was one week of work on light mode for onboarding. The engagement extended through formal statements of work into a full UX audit of onboarding and the corporate site. Each expansion was a function of the systematic approach holding up at the previous stage.