Marcel
Bertram
Product Manager, Porsche Design System
Marcel Bertram has worked for Porsche for over ten years and brings his skills in UX design to both the marketing and IT departments. He focuses on improving the visual appearance of the brand and the user experience at company level. He is particularly passionate about using modern tools to support the company's UX workflow. As a founding member and ongoing product manager of the Porsche Design System, Marcel plays an important role in leading the global UX Design Operations initiative at Porsche.
Marcel took an early interest in website development and design, even before joining Porsche. In his free-time he works as an independent trainer, speaker and consultant, helping people improve their UX design maturity. He is particularly experienced in helping organizations develop a UX-focused culture using key tools and skills such as design systems based on code. His goal is to use technology to create engaging and user-friendly experiences for all users.
Porsche Design System
Can you walk us through the current state of the design system you're involved with?
Five years ago, I was asked to participate in an internal community project on a topic unknown to me at the time: Design Systems. Back then, some people were trying to define design standards in Confluence and implement them with Pattern Lab HTML and CSS - without any support for reusable design libraries.
Fortunately, my curiosity turned into enthusiasm, and I found a developer and a designer who shared the same passion for the topic with our Tech Lead, Founding Member and nowadays Product Owner Stephan Schröter, Oliver Hook as accessibility-enabling developer and Anna Krohmer for Design. With this first dedicated but part-time team, we started working on a component library based on React and Sketch for almost 3 months before we collectively decided to throw everything overboard and rebuild everything from scratch using Web Components (Thank you Stephan for this brave proposal).
Fast forward to April 2021, we released version 2.0 with a clear focus on component scope and improving the interface performance. We introduced our existing CDN approach, delivering versioned and chunked design components, styles, and assets straight from our Design System CDN network. Luckily, at the time we got the great opportunity to extend our team by the 2 great designers Janick Neundorf & Johannes Müller-Naumann, who have heavily impacted the following visual improvements of the design system.
Last year, ideally in time for the celebration of Porsche's 75th anniversary, we leveraged the momentum of the release of our refined Porsche brand identity to enhance the visual appearance and consistency of all touchpoints and showcasing the design system's value efficiently updating all touch points within weeks without any lack in quality.
While transitioning from Sketch to Figma with a completely new setup of the library we were conducting a comprehensive visual overhaul. Following our overarching principles of space, reduction, monochrome colors, and rounded shapes paired with iconic brand assets like the model signatures, this update introduced great changes to the complete system, e.g., completely fluid scaling for all typography, spacings, and the grid.
We are proud of the progress we have made so far. That's why we keep all former versions online, free to have a look at it:
Check previous versions:
What tools do you use to build and maintain your design system?
When building and maintaining our design system, we're very intentional about the tools, aiming to keep everything streamlined and cost-effective.
For the design side of things, Figma is our go-to for drafting keyscreens, doing community work and audits, and finally, specifying the components and patterns for implementation. To enable the community we support both the Figma library for static prototyping and reusing our coded-component library with a simple wrapper to support UX Pin for interactive prototyping.
Going open-source enabled us to use GitHub's advanced features for free. It's the source of truth for code management, automatic actions in our release pipeline, and even our project management workflow and community requests. Our CDN is hosted and managed by Verizon, accessible and fast for users worldwide, including mainland China.
Testing is another area where we've invested in robust tools, using Playwright and BrowserStack for visual regression and cross-browser testing and AXE-Core to ensure everything is accessible. Introducing Stackblitz for reproduction examples in bug reports saves us much investigation time.
Finally, we're proud of our public documentation page designsystem.porsche.com. It's built from the ground up by our team, showcasing our components and standards in action. It's a great place for anyone interested to see the practical application of our design system and for us to test the integration experience and ease continuously.
How do you balance the need for consistency with the desire for creative freedom among your designers?
I like to explain this with one of my personal favorites: Lego. Imagine our design system as a digital Lego Kit. At the base, we have our styles and assets – these define the construction rules both for us as a design system when building bricks as well as for the teams when building models or their custom bricks: colors, typography, icons, spacings, our grid and for example Porsche's unique assets like the crest. This layer ensures our digital experiences feel authentically Porsche.
Then we have our components, built using Web Component technology with ShadowDom. This is where we get precise and strict. These components are like specialized Lego bricks; you can't alter their core characteristics – color, shape, or function. This strictness ensures consistency across our digital landscape and follows required quality standards for accessibility, browser compliance, performance, and appearance.
However, creativity and flexibility come to the next level - the composition of styles, assets, and components. Think of it as creating models with Lego. The combination of components into patterns, templates, or even custom creations allow for innovation within a structured framework. We're here to support our teams, giving them the tools to be creative while staying true to our brand. And if a need goes beyond what we currently offer, we're open to expanding our 'Lego set' to include new pieces that benefit everyone.
How do you stay true to your vision for the design system, even when faced with external pressures or trends?
Sticking to our vision for the design system, even with external pressures, comes naturally to us because our team shares a strong, unified vision. We're all about understanding our product deeply and adapting to changes and consumer needs. When facing critiques, we don't just see challenges; we see chances to learn and get better. We lean on data and solid reasoning to guide our decisions.
And, let's not forget, we're crafting this for Porsche—an iconic brand with a timeless design philosophy that's all about innovation and continuous improvement, not just following trends. It's a journey we're all passionate about, constantly finding ways to evolve while staying true to Porsche's heritage.
How does your team collaborate on the design system?
Our team emphasizes ongoing dialogue and interaction to foster collaboration on the design system. Through a comprehensive annual survey targeting roles like designers, developers, and product managers, we gather essential feedback. This process is enriched by follow-up interviews for a deeper understanding of our users' needs, supported by a culture of openness and direct communication. This approach enables us to address challenges effectively and incorporate user insights into our development process.
We've adopted an agile methodology, utilizing a public Kanban board for continuous refinement and reprioritization. Our robust and reliable release pipeline allows for rapid deployment of changes, sometimes within a day if necessary, ensuring our design system remains responsive to the evolving needs of our users and stakeholders. This dynamic approach keeps our system agile and aligned with our community's requirements.
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?
We measure our design system's success mainly by how much it's used. We aim for every digital project under Porsche to use our latest system. Our CDN helps us see who's using what, giving us a clear picture. I also check our main digital spots to see our system in action.
Another big thing for us is how happy our users are with the system. We listen to what people say in our yearly surveys and everyday chats. It's not just about meeting their needs but making them genuinely excited to use our system.
Finally, we're starting to measure the success of our design system by how accurately it's applied. It's not just about using the system but using it correctly. Like fitting together Lego blocks to build a model, we look at whether the digital experiences created are true to Porsche's standards from a technical, visual, and user experience standpoint.
If you could go back and change one decision you made in your design system journey, what would it be and why?
Looking back, I wouldn't say I regret any decisions we've made in our design system journey. Every step, including the missteps, has been a learning opportunity. However, if I could tweak one thing, it would have been to start with web components right from the get-go instead of beginning with React components. It's not a significant game-changer, but it could have saved us some time.
The absolute best decision was forming a dedicated, passionate team from the start, and I'm proud that we're still together after five years.
Do you use any kind of automation or AI tools?
We started and still are a quite small but effective team with big tasks like handling multiple frameworks, a custom built documentation page, a lot of components and all with a commitment to top-notch quality. To achieve this, automation is key for us. That's why we're always finding new ways to make tasks simpler and testing more thorough. For instance, we've automated the creation of most of our documentation. Our testing is also automated to spot problems early, including everything from checking designs don’t change unexpectedly to making sure our site is accessible to everyone. Plus, the technical side of things, like updating and releasing our products, is all done automatically. This approach is pretty standard now, but it's a big part of how we keep things running smoothly.
What still is missing but not working as expected is to automatically generate and update our Figma library based on our source code ;)
Where do you see design systems heading in the next few years?
In the next few years, I see design systems becoming a key driver of cultural change in design, acting as both a tool and a catalyst for consistency across various touchpoints. Using a unified design language, we aim to create seamless, brand-aligned experiences across all media, including the web, app, and even within our cars. We focus on efficiency and sustainability, avoiding repetitive work by reusing top-notch resources.
Additionally, we're working to close the gap between design and development, aiming for a shared understanding where code is the source of truth, moving beyond the misconception that a Figma library alone constitutes a design system. You will miss a lot of required dimensions - think of accessibility, compatibility, performance, states, and interactions.
What's one thing you wish more people understood about design systems?
I wish more people understood that the core of any digital interface is code, not the visuals we create in design tools like Figma. I'm a big advocate for recognizing code as the proper foundation of design systems. Having just a Figma library isn't enough; it often fails to ensure the adoption, efficiency, and quality we aim for with a design system. Please do not deprioritize development and developers.
In your opinion, what are the most overrated and underrated aspects of design systems?
The most overrated aspect is complex Figma libraries that demand extensive plugins, styles, and documentation. People enjoy exploring through examples and interactive components more than reading lengthy texts.
On the other hand, the underrated power of design systems lies in patterns and templates. They guide the efficient and correct use of design systems beyond basic styles and components. Providing ready-made patterns for common functions like logins or checkouts can significantly aid adoption and reduce redundancies and errors, acting as practical blueprints for teams.
If you could have a coffee chat with any person from the design (system) space, who would it be and why?
I'd love to grab a coffee with someone from Apple's design system team. Their work on digital applications and marketing is top-notch, and I'm really curious about their approach and processes. It'd be awesome to exchange ideas and see what drives their design decisions.
Coffee with Apple
What's one piece of advice that you would like people to remember from this interview?
If there's one takeaway I'd love for people to remember from our chat, it's this: dive deep into understanding and investing in the code side of design systems. It's a golden opportunity to bridge the gap between design and development, truly bringing both worlds together.
What's your favorite thing to do when you are not in design systems?
Outside my work at Porsche, I have the fantastic opportunity to support other companies through training, consulting, and speaking about UX Design. This experience offers immense learning opportunities. It's a chance to share knowledge on building efficient design operation units and design systems across various organizations. I find joy and creativity in playing with Lego with my nephew, that keeps me connected to the playful side of design.
