Wise rebrand colour tokens
Designing bold and 100% accessible colour tokens for Wise’s award-winning global rebrand.
Wise (formerly TransferWise) is an international account used by 16 million people. As part of a global rebrand I overhauled the foundational colour library and designed a new token set to be used everywhere in product.
The rebrand increased brand awareness, achieving a 35% uplift in multi-product adoption. Colour pairings on all themes passed both WCAG and APCA contrast requirements.
The existing colours lacked brand impact and contrast
The product looked dated and lacked visual impact.
Most Fintech brands were blue; Wise was lost in a sea of sameness.
Key colours failed basic contrast tests.
The users:
Wise end users — managing money across borders.
Internal designers and engineers — using the system to build the product.
The external design community — to excite, inspire, and recruit.
My role:
I was the Lead Designer and project owner. The team included another design system designer, a brand designer, and 7 developers across iOS, Android and web. We also collaborated with creative agency Ragged Edge, 4 other rebrand work-streams, design ops, leadership, brand teams, and 70+ product teams.
Auditing screens & concepts to create a roadmap
Creative agency Ragged Edge set the visual direction and shared high-level concepts. The challenge was to translate these to the real product and create a scaleable colour system. I audited the concepts against existing libraries and screens to map out the work and create a plan for the team.
Balancing hierarchy, accessibility, and brand distinctiveness
First, we defined content colours that made bright green buttons pop. Neutrals with a hint of green worked better than overly green colours.
After that, we defined colours for surfaces, borders, interactivity, theming, and more. We then stress-tested colours in our component library, top trafficked screens, and code.
Advanced contrast tests and colourblindness simulations
Our strategy was to test, iterate, repeat until every colour pairing on every theme excelled WCAG and APCA requirements. We significantly increased contrast scores, and ran colourblindness simulations too. To find out more, read my full case study on colour accessibility.
A key business requirement was that the visual changes must not negatively impact the usability of our core money transfer product. So I also A/B tested the old vs new colours in prototypes for key flows. Results showed that better colour contrast ratios increased task completion times for all participants.
Supporting the build and rolling out to teams
Working with our engineers to support the implementation, I created detailed documentation mapping old vs new tokens, and a full component library spec showing how colours tokens were applied to components across all themes. I also led the colour QA on all three platforms, and supported product teams across the wider organisation with advice on how to implement the updates in their journeys.
The results:
The rebrand increased brand awareness resulting in a 35% increase in multi-product adoption for the Wise account
We achieved an overall QX score of 83.07%, with scores for appearance, trust, loyalty, and usability all increasing.
We launched an 100% accessible palette across multiple colour themes
The design system was globally adopted across all Wise platforms and experiences
My case study got over 1 million hits and was shared by Smashing Magazine founder Vitaly Freidman
Awards and recognition:
We won Best Adoption at the Zeroheight Design System Awards 2023 for enabling all Wise teams to adopt the rebrand styles.
We were highly commended in the categories for best App Design, Rebrand, and In-house team at the Design Week 2023 Awards.
We were shortlisted for the D&AD category for branding design systems.
The rebrand was named Armin Vit at Brand New’s Best Project of 2023
