GitHub
Hero Image
FOSS@PorschePorsche Design System30th August 2023 · 5min reading time
The Porsche Design System provides all the fundamental UXI guidelines and pattern-based web components to build brand driven, consistent and intuitive designs for digital Porsche products. Marcel Bertram, Specialist Digital Marketing UI/UX at Porsche, explains why this project was published as an open-source project and what his team learned along this way.
Tell us a little more about yourself, your role at Porsche and what topics drive you.Being part of the company for more than twelve years, I had the opportunity to be part of the very first agile product teams at Porsche. During my journey through various roles in marketing with a focus on digital products, we started a strategy for pushing the practice of qualitative UX design with the first shared service and inner-source system product: The digital Porsche Design System. The main goals are to ensure an efficient but still high-quality, brand-consistent implementation of our design language across all our digital touchpoints.
Marcel Bertram
You are currently maintaining Porsche's open-source project Porsche Design System on GitHub. How would you explain your project to a five-year-old? What problem does your project solve for Porsche?The Porsche Design System is comparable to a Lego set that offers ready-to-use building blocks (coded and designed components) and a clear manual on how and where to use them. This set allows us to build high-qualitative frontends, ranging from marketing pages to digital applications. By supporting multiple popular frameworks such as React, Angular and Vue, continuously testing for compatibility with a wide range of browsers and creating a growing set of re-usable components, we made a huge step ahead in the industry, which I am still proud of.Our design system unlocks capacities among all Porsche design and development teams that otherwise would have to reinvent the wheel by adapting, implementing, and verifying the design guide on their own – multiplied by all our available teams. We have an extremely high standard regarding quality, performance, and aesthetics for our products. The PDS standardizes our digital products and creates one single system we can collectively optimize.
Marcel Bertram
By publishing the Porsche Design System as an open-source project, you have made a big step ahead in our FOSS movement. What was your initial motivation to take this path? Can you tell us why you have chosen to release your project on GitHub?There are several reasons why we agreed on open sourcing the Porsche Design System. We wanted to drastically lower the barrier to access and use our system and thus lift the adoption and engagement. The Porsche Group encompasses many subsidiaries and has a broad partner network. Instead of hiding our repositories on an on-premises platform, we made it publicly available, allowing every single team, partner, and supplier to access and use the PDS without any hassle. At the same time, we have removed the complexity of having to worry about access and authentication – saving us time and effort and lower the risk of frustration with our consumers.But this step was also a model of success from a not purely pragmatic standpoint. We are already receiving the first code changes from individual contributors outside of the Porsche Group. Bringing the Porsche brand to a developer portal such as GitHub is a brilliant side-effect of this move. Our fans and customers can directly connect with us, join a growing community, and experience the Porsche brand in a totally new way. It is thrilling to see how the number of stars on GitHub is growing and people really liking what we are doing.
Marcel Bertram
What did you learn along the way? What were the benefits of this strategy for you, your team and Porsche?Publishing the Porsche Design System under a free and open license simplified a lot of things for us. Not only did we reduce the complexity of access management, as stated previously, but also communication is drastically simplified. While questions and issues around the PDS have reached us through various channels, everything can now be found on one single platform, allowing others to search for already solved problems or give feedback on our components.One thing we learned is the importance of automation and a high test-coverage within our repositories. Ensuring both enabled us to reduce the time needed to review and merge new pull requests. We are therefore looking forward to receiving further contributions – both from inside and outside of the company!Ultimately, coding and collaborating in the wild also proved that we are paying more attention to ensuring compliance, quality, and security of our projects. Transparency is thus not only a freedom, but also a precursor for advancing in our field.
Marcel Bertram
With a glimpse into the future: What are your further plans regarding FOSS Contributions? Who would you like to see next joining our FOSS Contributor community?We already discussed the idea of generalizing the Porsche Design System. Currently, PDS is limited to creating Porsche-branded applications. In the spirit of FOSS, we would like to extend our design system to a framework that can incorporate any arbitrary corporate identity. It would be cool to see other brands facilitating, contributing and collaborating based on our system.
Marcel Bertram
Porsche Design SystemThe Porsche Design System provides the design fundamentals and elements for efficiently creating aesthetic and high-quality web applications, including easy-to-use Figma and UX Pin libraries, coded Web Components and comprehensive usage guidelines. Everything is built and tested following the Porsche quality standards and corporate design principles.