Enter Password

  • Navigation

  • Cross-Platform

  • Fintech

  • Leadership

  • Strategy

  • Design System

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

Who are Thredd?

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.

What's The Problem?

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.

The Solution

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

Strategy & Approach

Uncovering Needs & Learning from The Best

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.

Co-Creating Principles

Decision Based Design Principles

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.

Design Foundations

Typography, Colour and The Itty Bits

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.

Dev Handover

Tokenising the Design System

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.

Accessibility

Accessibility By Design, By People..For People

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

Defining Processes That Last

Anti-Design By Committee Committee

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.

Payments Product Design Framework

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.

Outcomes & Reflections

Looking Back

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!

“It’s refreshing to be in such a forward looking company, one that cares about accessibility”

Dominic Esposito, Product Manager

“You have made my life so much easier, thank you!”

Marius Bartoz, Developer