Thredd Product Design System
Complete product design system for Thredd
2022
Project Details:
Role: Product Designer - Thredd
Duration: 1 year 10 months
Team: Product Designers, Developers, Product Managers
Tools Used: Figma, Storybook
Project Overview
Thredd is a leading issuer processing partner for fintech banks, powering billions of transactions annually across 44 countries. In January 2023, following Thredd’s rebrand from Global Processing Services, I was tasked as Lead Product Designer with creating and maintaining a Figma-based product design system, ensuring consistency across the new brand identity.
Create a product design system for the new Thredd Branding. Produce a set of standards to manage design at scale, provide all guidelines such as style guide, component library, colours, typography, iconography, visual elements. The goal is o provide the guidelines for visual consistency across products, channels and departments, the guidelines should provide developers with all the information needed for them to use the style guide when developing front end of products.
Competitor Analysis
Due to product design systems being a common practice now for large companies trying to scale there brand and products it made sense to start off with analysing competitors/large businesses product design systems for inspiration. I researched and explored insights from the following popular product design systems - Atlassian, Shopify, Ant Design, Salesforce, Uber, GOV.uk, Googles material design, IBM, Apple, and Microsoft fluent. The research allowed me to understand the best practices of design systems, how to structure the system, elements/components to include an how to display the guides best for developers understand and implement into code.
Another key insight I discovered from research is a industry standard method for creating design systems which is called Atomic design.
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
Atoms
Molecules
Organisms
Templates
Pages
I used the atomic design system methodology when building out the Thredd product design system because its a structured process for creating design systems that are modular, reusable, and scalable. By breaking down designs into smaller parts, atomic design ensures consistency in branding and increases efficiency in collaboration, also resulting in improved employee satisfaction.
Product Design System Guides
How To Guide
Typography
Colours
Iconography
Buttons
Drop Shadows
Alerts
Media
Multi Select Inputs
Headers
Handover Process - Development & Product
Product Design System Style Guide Handover for Thredd
1. Preparation
Before I hand over the design system, I make sure everything is in place and polished. This includes finalizing all UI components (buttons, typography, icons, etc.), reusable elements (modals, cards, inputs), and layout structures (spacing, grids). I double-check that everything aligns with the design principles and that accessibility concerns have been addressed. Once all that’s set, I ensure all files are ready for easy export and sharing.
2. Documentation for Developers and Product Teams
I always provide a comprehensive handoff document so the devs and product team can refer to it throughout the implementation process.
Design Overview: I include a brief summary of the system’s goals and guiding design principles. I keep it clear and to the point, ensuring everyone understands the system's purpose and how it’s meant to scale.
Component Breakdown: I’ll go through the components in the design system with full context. For each one, I document the variations, intended use cases, and any unique behaviors or states (hover, disabled, focused, etc.). Figma links or prototypes go in here for easy reference.
Code Snippets: I share the Design system links for components in Developer mode, this allows the developers to copy the CSS Styling and code for each component, which helps speed up development time and effort.
Responsive & Accessibility Guidelines: I make sure the responsive behaviour for all components is clearly defined, along with how we’ve ensured accessibility compliance (like WCAG standards).
Versioning: I’m careful to include the versioning details and outline how future updates will be handled.
I make sure the design system is easily navigable with links to everything, so the team can quickly find what they need.
3. Developer Handover Process
I kick things off with a meeting to walk the developers through the system and its components. We’ll go over key elements, like behaviour across states, layout considerations, and any edge cases. It’s important to set expectations upfront and clear up any ambiguities right away
.
Once that’s done, I stay available for follow-ups. I’ve found that regular check-ins are helpful to make sure everything’s on track, and I encourage developers to ask questions as they implement.
4. Product Team Handover Process
With the product team, I focus on the bigger picture — how the design system improves consistency, streamlines development, and prepares us for future growth. I walk them through the system's role in scaling the product and align with the product roadmap. After that, I highlight the process for requesting new components or updates to the system as we evolve. The goal here is to make sure the product team understands how to leverage the design system moving forward.
With these steps in place, I’ve found that the handover process works seamlessly and helps ensure that the product gets built efficiently, consistently, and in line with the vision set out by the design team.
Conclusion
This project presented both challenges and opportunities, but the outcome has been highly successful. The design system has been integrated into the design process for all Thredd products, significantly accelerating product development timelines. The success of this initiative is further validated by the positive feedback received from key team members, including developers and product managers, who have found the system to be an invaluable resource. It enables all team members to easily reference essential guidelines and components, streamlining workflows and ensuring consistency.
One of the most impactful improvements has been the establishment of a centralized component library. By having components housed within the design system, updates can be made in a single location, with changes automatically reflecting across all related Figma files. This has greatly enhanced consistency and efficiency throughout our design and development processes, contributing to a more seamless and effective workflow across all projects.