Trusted Shops streamlines its design system with Figma

Founded way back in 1999, Trusted Shops is known for its prized Trustmark, authentic user feedback, and Buyer Protection. But behind the scenes, there’s been a design revolution going on!

Trusted Shops made a major shift to Figma in 2022, enabling it to streamline and unify its design systems and language right across B2B and B2C.

What’s more, with Figma its designers, coders and UX specialists gained simpler, faster processes, next-level prototypes, and better, easier file collaboration. Here’s their Figma journey.

Inside Trusted Shops

Around 30,000 online shops carry the Trusted Shops Trustmark, which is designed to distinguish trustworthy online shops. Its stringent requirements cover everything from personal data security and accessibility, to return policies, delivery times and pricing. This has enabled it to build a unique trusted community.

Oliver Pitsch is Director User Experience & Product Marketing at Trusted Shops. He explains that the business operates many design-centric teams. For example, there’s a product design team, and a content and localisation team which is made up of content designers, UX writers, technical writers and localisation managers. Then there’s a product marketing team with product marketing managers and graphic designers.

All of these teams work closely with, or in, Trusted Shops’ 10+ cross-functional product teams: especially the product design team, and all teams are big Figma users today.

“I wear different hats that relate to Figma,” comments Oliver.

• In his role as Director UX, he’s responsible for product design, content and localisation for the entire product portfolio.
• As Director Product Marketing, he connects the marketing teams with product marketing to translate technical product info into more handy marketing language and material for product-related marketing campaigns.
• Thirdly, he’s part of the Product Leadership, co-directing product strategy. Yes, Oliver is a very busy man.

Creating a design language across B2B and B2C

Oliver comments that Trusted Shops has “the fascinating challenge” of having both a large B2B customer base that uses its solutions daily, and an even larger base of millions that uses its consumer products. These two sizeable groups also get in touch directly through its products.

The challenge for Trusted Shops’ design operations, therefore, is to establish and operate a design system of brand-consistent, reusable assets. One that unifies the design language across B2B and B2C, while being flexible enough to allow specific designs and patterns for a given target group.

Another challenge came from the existing design tools the company was using. One got acquired in 2020 which made migration necessary. Another lacked the team collaboration and versioning functionality Trusted Shops now requires. Oliver adds that managing a large-scale design system was also too complex with its former tool. It was time to take a closer look at Figma.

Trusted Shops’ Figma journey

It was an easy decision to leave the previous tools and switch to Figma, says Oliver. “We tried Figma and it immediately impressed us. It was blazing fast, had all the features we were looking for and was super affordable.”

Trusted Shops decided to migrate to Figma Organization, because it offered all the functions it needed, including organisation-wide design system management, version branching, and SSO (Single Sign-On).

“When trust is your currency, security is paramount. And so features in Figma Organization like SSO are critical to us,” says Oliver.

The firm aligned on a design system family called Helios. Helios features specific toolkits for different product areas, while basing all design decisions on Helios Foundation, a shared toolkit.

After setup, and onboarding support from Figma, Trusted Shops granted access to a few people to pave the way for the other designers. Although importing files was quick, Trusted Shops decided to recreate all its design files to maintain their shared attributes, using Figma’s Auto Layout feature to simplify the process. “The list of over 150 different files was massive, but we’ve managed to migrate or recreate all designs within nine weeks,” says Oliver. Having done that, the teams were free to use Figma to create and collaborate. “This is where our actual design story in Figma begins,” Oliver says.

The product designers found the learning curve less steep than they expected, and feedback from the team was “super good”, according to Oliver.

Solving Pain points

Figma solved four major pain points for Oliver’s teams.

1. Design System Management

It gave them the ability to use multiple libraries for a variety of projects, products and teams.

2. Versioning/Branching

It brought comprehensive Versioning (version control) and Branching (where assets can be duplicated and modified separately).

3. Greater Collaboration

Figma enhanced the collaboration between designers and developers.

4. Prototyping

And it improved the ability to create more realistic, interactive prototype designs for user testing and research.

A typical project

Projects start in Confluence, where the “Discovery Documents” live. These are basically the written blueprints, and a single source of truth, for the features or products.

Designers then use Whimsical for wireframing, and the wireframes and discovery docs are set and aligned with the team and stakeholders. These are ported to Figma as prototypes in order to design the different states. “This is where all discussions around the actual design details happen,” says Oliver.

Prototypes are then user tested and used for research and for internal stakeholder alignment. And finally designers partner with developers to take the designs into code and ship them in one of Trusted Shops’ products.

End-to-end adoption of Figma

Today, Figma is used in every business unit at Trusted Shops where designers are located: the product unit, brand, marketing, and operations - sales and customer success.

There are 30 editors and many more viewers. Product designers create and maintain designs in Figma, and content designers and UX writers work in Figma to create content. All developers and product managers and owners have Figma accounts and access to inspect assets and add comments, and the UX team collaborates in FigJam.

Oliver says, “There are many reasons we really love Figma, but I feel the biggest for us is that the collaboration in files is better and easier than in other tools.”

For example, with Figma, it became possible to bake in interactions at the prototype design system level, making feature-rich prototypes globally available in a matter of clicks. “Our prototypes are now on a totally different level, compared to what we had before,” says Oliver.

More importantly, Figma enabled Trusted Shops to consolidate two tools, Sketch and Abstract, down to just one, saving time and hassle, and to unify its company-wide design systems and language across B2B and B2C.

Oliver concludes, “Our designers are all happy with Figma, which is a great success. And it really helps us in recruiting.” When designers request Figma as their tool of the trade, as they often do, Trusted Shops can now offer it as its ‘trusted’ design platform.