Enter Password
Thredd
Payments Product Design Framework
My Role
Lead Product Designer:
Oversight & Execution of Research & Mapping, UI Design & DesignOps.
The Team
Product Designers, Marketing, Developers, Exec Sponsors.
Deliverables
Ecosystem map, Design System, Implementation Guidelines & Processes
Timeframe
2 months | 2024
Thredd is a global payments processor, who have supported the rise of fintech challengers and technology leaders, many of whom have become unicorns worth over US$1billion.
Thredd had grown organically over a decade. The customer Journey had 8 touchpoints, including acquisitions and homegrown products. Rapid expansion meant that:
Development inefficiencies needed to be addressed.
Experience across products needed to be unified.
Accessibility was now mandatory.
This framework created a rolled out a consistent visual language across the products through a comprehensive design system. Results & outcomes included:
Rolled out a consistent visual language across 8 products through a comprehensive design system.
Developed processes and guidelines to maintain adherence at scale.
Minimum WCAG 2.2 Level AA was met across products. Overall, we saw a 50% reduction in development time
Mapping the Ecosystem
We mapped the entire product ecosystem with stakeholders in a series of workshops. The team then set about a design audit- We used Atomic Design principles as a basis to map, at a high level, what was being used where.
Understanding Stakeholder Needs
We met with exec sponsors, content, engineering, product, marketing, and other key stakeholders in the business to understand their particular needs, what was going well and what wasn’t.
Learning From Industry Leaders
I researched similar companies, such as Stripe and Visa, as well as Atlassian, Microsoft and Google to understand how they approach design frameworks and what designers & developers need from a design system.
Problem
The team was scaling, and I wanted to establish design principles that would actually help in every day work. Rather than just visual guidelines, I wanted to establish consistency in how we treated our users.
Strategy
I ran a workshop with the design team, where we compared principles from other organisations, and discussed what roadblocks we faced day to day in decision making.
Problem
The existing colour scheme wasn’t comprehensive enough, creating sharp contrast and unpleasant look and feel across products. The original typography wasn’t web safe, and iconography was all custom built, adding to development time.
Strategy
Typography was chosen to be legible at small weights and sizes, and align with our brand font. We developed a colour scheme based on our brand colours. An off the shelf icon set was selected which aligned with our brand’s sharp imagery.
Results
Time to develop a new icon was slashed - It used to necessitate engaging a designer, then passing to devs which took approx 1 day all in all. We got this down to < hour.
Problem
We had 8 product lines to cover, and potentially many more. Future acquisitions meant that our current needs would quickly grow.
Strategy
To ensure coverage, we opted for a comprehensive off the shelf design system which we customised. I set up a custom component creation process in collaboration with engineering. I worked with a Front End Architect to define some customisation guidelines for acquired products. We introduced design tokens as the single source of truth for all visual variables.
Problem
Accessibility is a hard sell at the best of times. However, our customers were demanding compliance. This helped to drive the adoption of accessibility within the Engineering team.
Strategy
Using POUR as a guiding principle, I created guidelines for both designers and developers. This included plugins used to check designs before handover, and embedding accessibility into QA procedures. Guidelines covered:
Structure
Text
Keyboard navigation
Images and video
Colours and contrast
Problem
Brand guardianship is one part of the puzzle in ensuring consistent, accessible design. How to ensure design system adherence without constant oversight?
Strategy
I established a cross functional group including content, marketing, engineering and product representatives. Each was responsible for a function relevant to their area. We met monthly, each given tasks to take away.
This comprehensive, accessible design system resulted in 50% reduction in front end development time and harmonised design of 8 products. Supplier accessibility requirements were being met, preventing sales cycle friction.
What Went Well
I’m really proud that I managed to convince the business to adopt accessibility- I did so using their language, potentially losing sales. Most importantly, we made peoples' jobs easier to do.
Could Go Better
There was an early hiccup with marketing, they assumed they’d need to rebrand the website. Once they saw that we were just extending the brand, they got on board. I’ve learned my lesson!