Tiago

Almeida

DesignOps at H&M — Ex-Klarna/Mentimeter

Tiago, Digital Product Design expert from Stockholm, on providing the "LEGO blocks" for creativity, the journey from graphic design to DesignOps, and the significance of "coherence" over "consistency" in the ever-evolving design landscape.

Who is Tiago?

I was born to a Designer and a Veterinary Lab Tech in Lisbon, Portugal. So, from an early age, I knew my profession (I like lab work, but you can guess my preference).

My first paid gig involved painting comics for a studio in Texas. After that, I ventured into graphic design freelancing.

I chose Industrial Design for my bachelor's degree. However, after graduating during the subprime crisis, I could only find work in graphic/digital design. A few years later, I joined a startup as a UI/UX Designer, transitioning to what I now refer to as Digital Product Design.

In 2014, I moved to Stockholm, Sweden, in search of better career opportunities. Since then, I've worked on 6 different Design Systems for organizations like Ericsson, Mentimeter, and Klarna.

Currently, I'm working in DesignOps for a renowned Swedish fashion brand (HM).

What tools do you use to build and maintain your
design system?

What tools do you use to build and maintain your design system?

What tools do you use to build and maintain your design system?

Gloss (Klarna’s Web Design System) comprehensively addresses the design and coding needs of the 27+ regional Klarna websites. This makes designing and implementing one-off campaign pages simpler. It also supports the Kosma and Sofort websites (multi-brand DS ✅).

When I began working on it, some elements were already in place. However, I quickly received feedback from Designers about the need for component usability for mockups and prototypes.

We initially overemphasized the 1-to-1 relationship with code (even the layer structure mirrored the HTML structure).

One of my initial tasks was to revamp some of the older components to enhance usability while maintaining the same component variant names (and later properties) in both Figma and React. I also trained my team to transition from Figma novices to experts.

From there, I focused on establishing a clear roadmap and segmenting the work. I also took on some Product Management responsibilities. Fortunately, I had learned all the necessary skills from an excellent PM during my first job in Sweden (shout out to Martin Strandgren).

My most significant ongoing challenge was the need for Frontend development expertise, as I was the sole Designer working on it full-time.

Gloss (Klarna’s Web Design System) comprehensively addresses the design and coding needs of the 27+ regional Klarna websites. This makes designing and implementing one-off campaign pages simpler. It also supports the Kosma and Sofort websites (multi-brand DS ✅).

When I began working on it, some elements were already in place. However, I quickly received feedback from Designers about the need for component usability for mockups and prototypes.

We initially overemphasized the 1-to-1 relationship with code (even the layer structure mirrored the HTML structure).

One of my initial tasks was to revamp some of the older components to enhance usability while maintaining the same component variant names (and later properties) in both Figma and React. I also trained my team to transition from Figma novices to experts.

From there, I focused on establishing a clear roadmap and segmenting the work. I also took on some Product Management responsibilities. Fortunately, I had learned all the necessary skills from an excellent PM during my first job in Sweden (shout out to Martin Strandgren).

My most significant ongoing challenge was the need for Frontend development expertise, as I was the sole Designer working on it full-time.

Gloss (Klarna’s Web Design System) comprehensively addresses the design and coding needs of the 27+ regional Klarna websites. This makes designing and implementing one-off campaign pages simpler. It also supports the Kosma and Sofort websites (multi-brand DS ✅).

When I began working on it, some elements were already in place. However, I quickly received feedback from Designers about the need for component usability for mockups and prototypes.

We initially overemphasized the 1-to-1 relationship with code (even the layer structure mirrored the HTML structure).

One of my initial tasks was to revamp some of the older components to enhance usability while maintaining the same component variant names (and later properties) in both Figma and React. I also trained my team to transition from Figma novices to experts.

From there, I focused on establishing a clear roadmap and segmenting the work. I also took on some Product Management responsibilities. Fortunately, I had learned all the necessary skills from an excellent PM during my first job in Sweden (shout out to Martin Strandgren).

My most significant ongoing challenge was the need for Frontend development expertise, as I was the sole Designer working on it full-time.

What tools do you use to build and maintain your design system?

I've used Figma as the documentation platform for my last couple of Design Systems. I've also used a documentation platform called Fabricator, an open-source solution that utilized Handlebars (HTML + JS) originally designed for UI pattern libraries.

However, I prefer Zeroheight. Budget constraints have prevented me from using it in recent years (it's challenging to justify a recurring expense solely for documentation).

Typically, we use Storybook for the coding aspect. I often contribute to its documentation because I'm proficient in Frontend Development (self-taught and trained through Treehouse).

Figma

Zeroheight

Storybook

How do you balance the need for consistency with the desire for creative freedom among your designers?

My approach to Design Systems is to provide the building blocks and instructions for the default sets. However, Designers are encouraged to innovate.

I avoid acting as the DS police. Instead, I offer pre-built layouts and templates and assist the team by providing feedback and suggestions for improvement.

I prefer the term "coherence" over "consistency."

For instance, consider Volvo cars. Each model has distinct features, but they're all unmistakably Volvo, even without visible logos.

Different products and touchpoints can have variations as long as they align with the brand or organization's identity.

How do you stay true to your vision for the design system, even when faced with external pressures or trends (criticism or pushback against your design system)?

It's essential, albeit challenging, to separate one's ego from the work.

Criticism should be viewed as feedback. Even when facing uninformed criticism, there's usually some underlying logic or perspective.

A valuable skill for a Designer is to extract useful insights, even when confronted with poorly articulated feedback.

However, there are times when you must firmly defend your stance.

If you genuinely believe your strategy is correct (and have data to support your claim) and that deviating from it would adversely affect the end-users, you must be prepared to stand your ground, even if it means risking your job.

But this should be a last resort, employed only when all other options have been exhausted.

How does your team collaborate on the design system? How do you ensure that your design system evolves with the changing needs of your users and stakeholders?

Team collaboration is one of the things that Design Systems are good at unblocking and standardizing. I’ve had some challenges with developers expecting to wait for “the specs” and instead worked towards a more collaborative way of working with group ideation and honest feedback at all stages of implementing a component/feature. 

One thing that helps is bringing the right expertise into the team. Sometimes, all it takes is a great Frontender with some system thinking to start changing things.

When it comes to evolving the system to adjust to stakeholders and consumers, you should apply the same skills you need as a Product Designer working for end users, talking with people, and being human-centered. 

Be an easy person to talk to (which does not mean saying yes to everything), and be vulnerable about what you can achieve and how long it will take.

And don’t forget that your job is also to help people become better designers. 

Instead of complaining people don’t know how to use Figma, consider teaching them how to (recording videos helps with scaling; I advise trying out Loom).

Don’t forget that your job is also to help people become better designers. 

Don’t forget that your job is also to help people become better designers. 

Are you tracking your design system? If you had to choose one metric to measure the success of your design system, what would it be and why?

The number one metric always tends to be adoption. It shows that your work provides a good ROI and is a good experience for Designers and Devs who consume it.

It's a bit of a brag, but Gloss had 100% adoption. Some teams outside the website (our target) were using our components because they weren’t finding what they needed on other DS in the company.

Detach rate is also great for detecting potential component-level issues, but I am also easy to give feedback and send bugs/feature requests to, so I tend not to need it as much.

Lastly, calculating how much money the Design System can save makes a world of difference with stakeholders (apply this to everything). Romina, you have great resources on calculating ROI on The Design Systems Guide site.

If you could go back and change one decision you made in your design system journey, what would it be and why? How would that affect your design system journey?

I wish I had realized sooner that Design Systems are as much about people and processes as it is about components, patterns, and tooling.

In hindsight, I could have sometimes slowed down the creation of the system to foster healthier collaboration in the organizations. While the systems lived on after I left, I could have made myself more replaceable (contrary to the common belief this is a good thing for your mental health).

Do you use any kind of automation or AI tools? 

My use of automation has been growing exponentially in the last 2 years. I have created plugins and widgets, but thanks to Diagram’s Automator plugin and, more recently, Figlet, it’s easier than ever to create automations with basic coding skills (it turns out learning to code as a Designer is useful).

When it comes to AI, I have been using it for years. Grammarly has corrected this text, and I have used tools like Otter.ai to transcribe user interviews without breaking a sweat.

But when it comes to the now hyped generative AI tools like Midjourney or ChatGPT, I have decided I can’t use them for ethical reasons. 

These models were trained on data collected without consent and do not respect attribution (a cornerstone of the open web) when they just regurgitate human-made content.

We can’t force Napster to shut down and wrongfully jail the founders of The Pirate Bay on the grounds of copyright infringement and 20 years later throw it out of the window because it’s big tech doing it.

One last word of warning in the form of a meme…

Where do you see design systems heading in the next few years?

I think Design Systems are going to become Product Systems. 

I mean that more competencies will be involved and systematize their ways of working, so why not incorporate their efforts with the Design System libraries in design and code?

We are seeing signs of this direction, with Content Designers starting to work together with other Designers within Figma.

While working at Transfer Galaxy, I prototyped a content library to bring content variables into design components to allow copy variants and localization. 

On the other hand, tools like Lokalise make localization via API easier for Figma users, allowing Designers to test localized text strings on their mockups before sending them to devs. 

I also want to mention Writer.ai, which has a great Figma plugin. It adds grammar, brand vocabulary, and tone of voice correction to your design mockup flow, making it easier to cope with the widespread shortage of Content Designers in teams.

"I think Design Systems are going to become Product Systems."

"I think Design Systems are going to become Product Systems."

"I think Design Systems are going to become Product Systems."

What's one thing you wish more people understood about design systems?

Brad Frost said it well a few weeks ago…

"Design systems are less about assets and their relationships to one another, but more about people and their relationships to one another."

The word systems can also apply to organizational and relationship systems (that’s why ORSC coaching is such a joker card for DS people to have in their tools deck). 

Most successful Design Systems lead to a mindset shift regarding cross-functional collaboration in the organization. It's not only having libraries and templates but also how you include your consumer needs in their creation and how you communicate change and increments to your organization.

I have seen several DS with low adoption, and normally, the culprit is a need for more communication, collaboration, and a human-centered mindset. Just get your UX Researcher cap on and talk to your users. It’s going to pay off, I swear.

In your opinion, what are the most overrated and underrated aspects of design systems?

The most overrated thing is naming things *insert groan about how hard it is*. Naming things is easy when you know web standards and keep your finger on the industry pulse. But even for the super original snowflake creations (spoiler, they are likely not that unique), the name only matters between Figma and the code library.

What matters is that people agree on the name. Dan Mall has the funniest story about how one of the teams he worked with has had a component named "Fred" for years.

There's also an easy solution for your less-savvy colleagues calling a component by the wrong name. Just add metadata with the name your consumers use. I even made a video showing you how.

I will again point to my previous answer (people relationships) regarding the most underrated.

If you could have a coffee chat with any person from the design (system) space, who would it be and why?

I would love to have a coffee chat with many awesome people, some of whom I had the pleasure of exchanging social media interactions with.

But if I had to pick the one with the most potential to derail an entire afternoon, it would definitely be Dan Mall. He has a refreshing approach to Design Systems (that focuses on people), but he is also super down-to-earth and refreshingly non-privileged. Did I also mention he is darn funny? 😅

Coffee with Dan Mall?

What's one piece of advice that you would like people to remember from this interview?

Check the people I quoted and referred to, as they have much more eloquent, deeper, and less spicy takes on Design Systems.

I'm not the best example to follow, at least if you value getting promoted and having a less stressful life. 

On the other hand, if being the patron saint of lost causes is your jam, let's get in touch (I mentor Designers on ADPList!

What's your favorite thing to do when you are not in design systems?

I am a video gamer (mostly single-player), so playing games is a good contender. I even was a semi-pro videogames journalist for a couple of years.

I also enjoy spending time with my wife, with whom I have been together for 19 years. And sauna, I can't get enough of it (being in Scandinavia, this is an easy fix).

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic