bp

design systems

team leadership

product design

bp

design systems

team leadership

product design

bp

design systems

team leadership

product design

bp

design systems

team leadership

product design

bp

design systems

team leadership

product design

Design system powering 150,000 interfaces for bp

Design system powering 150,000 interfaces for bp

Design system powering 150,000 interfaces for bp

Design system powering 150,000 interfaces for bp

A conversation reflecting on four years of design system work. Unifying thousands of interfaces into one cohesive language.

Actual deliverables under strict NDA.

Actual deliverables under strict NDA.

Actual deliverables under strict NDA.

Actual deliverables under strict NDA.

Actual deliverables under strict NDA.

bp

interview

Can you introduce us to the design system project you were brought in to work on at bp?

Well, just some background first: it was a great time to join bp, which was really starting to champion human experience design – with a big focus on sustainability. The Global Head of Design was passionate about increasing the organisation’s design maturity and had hired some top talent. That meant there was this highly supportive and enthusiastic community of designers working on some really forward-thinking projects.

Timeline

2021 — 2025

Team size

15+

My role

Lead Product Designer, Design Systems

In terms of the design system, it was the Head of Design Engineering (DE) who was running the show. He had a hugely ambitious vision. The plan was that the design system, bpCore, should offer thousands of variants of components, supporting both marketing sites and Software as a Service (SaaS) applications. That was because as well as new websites and applications, we needed to be able to support the massive number of legacy systems we’re talking thousands of interfaces. It was a time when not many organisations were investing in design systems, so working on something this big was a great opportunity.

In terms of the design system, it was the Head of Design Engineering (DE) who was running the show. He had a hugely ambitious vision. The plan was that the design system, bpCore, should offer thousands of variants of components, supporting both marketing sites and Software as a Service (SaaS) applications. That was because as well as new websites and applications, we needed to be able to support the massive number of legacy systems – we’re talking thousands of interfaces. It was a time when not many organisations were investing in design systems, so working on something this big was a great opportunity.

Despite what Adobe’s license checking system might have thought, as a 12-year-old kid, I didn’t have many options. Try convincing your mom to spend a monthly wage on a license key delivered via email! I couldn’t explain what email was, so I took matters into my own hands. Don’t blame me I tried! I bought a genuinely legitimate box edition of Photoshop at a flea market for a whopping £2, only to discover that Photoshop existed before ‘CS’ and the version I got ran on Windows 98… My Pentium PC was already running Millennium.

How advanced was the design system when you joined?

It was at a very early stage. There were quite a few libraries, but they were mostly visual components. It was a very small team: just me, the head of DE and an engineer doing the coding. My job was to focus on the components, starting at the atomic level. I worked on being as efficient as possible with the limitations of Sketch, getting to know the best plugins and essentially building the libraries from the ground up. I was involved in the technical aspect of systemising the libraries as well as creating new ones based on a very short brief, which was basically: you go ahead and figure it out. So I did.
It was at a very early stage. There were quite a few libraries, but they were mostly visual components. It was a very small team: just me, the head of DE and an engineer doing the coding. My job was to focus on the components, starting at the atomic level. I worked on being as efficient as possible with the limitations of Sketch, getting to know the best plugins and essentially building the libraries from the ground up. I was involved in the technical aspect of systemising the libraries as well as creating new ones based on a very short brief, which was basically: you go ahead and figure it out. So I did.
It was at a very early stage. There were quite a few libraries, but they were mostly visual components. It was a very small team: just me, the head of DE and an engineer doing the coding. My job was to focus on the components, starting at the atomic level. I worked on being as efficient as possible with the limitations of Sketch, getting to know the best plugins and essentially building the libraries from the ground up. I was involved in the technical aspect of systemising the libraries as well as creating new ones based on a very short brief, which was basically: you go ahead and figure it out. So I did.

It was at a very early stage. There were quite a few libraries, but they were mostly visual components. It was a very small team: just me, the head of DE and an engineer doing the coding. My job was to focus on the components, starting at the atomic level. I worked on being as efficient as possible with the limitations of Sketch, getting to know the best plugins and essentially building the libraries from the ground up. I was involved in the technical aspect of systemising the libraries as well as creating new ones based on a very short brief, which was basically: you go ahead and figure it out. So I did.

Przemek played a crucial role in defining the visual standard and aesthetic direction of our design system, bringing exceptional talent and insight that continues to add tremendous value to our team.

Przemek played a crucial role in defining the visual standard and aesthetic direction of our design system, bringing exceptional talent and insight that continues to add tremendous value to our team.
Przemek played a crucial role in defining the visual standard and aesthetic direction of our design system, bringing exceptional talent and insight that continues to add tremendous value to our team.
Przemek played a crucial role in defining the visual standard and aesthetic direction of our design system, bringing exceptional talent and insight that continues to add tremendous value to our team.

You had a lot of freedom then?

That's right. I was working through the libraries and then meeting the DE chief twice a week to chart my progress. As a veteran of both design and development, he had extremely high standards, but was very happy with my work – and his confidence gave me that freedom.

I’d come to bp from a company that did not give people that kind of autonomy, so it was really refreshing to work at a place where someone trusted me enough to deliver. But because it was a very small team and the libraries were very large, it took time and a lot of perseverance.

It was an enormous task, though, right?

It was an enormous task,
though, right?

Yes, but I loved getting my teeth into it. There was so much to do: by the time we were done, buttons, as an example, had three colour themes, five shapes, five sizes, various icon configurations, plus fixed-width and floating variants. If you think that each of those also needs to come in five interaction states and in both light and dark mode, you can start to understand the scale of it – and that’s just one component.

Przemek is an extremely talented designer. He provides a high level of visual direction and can break down complex ideas into clear and concise visuals. He is creative, proactive and has a great understanding of project delivery.
I’d love to work with him again – it was truly a pleasure.

Przemek is an extremely talented designer. He provides a high level of visual direction and can break down complex ideas into clear and concise visuals. He is creative, proactive and has a great understanding of project delivery.
I’d love to work with him again – it was truly a pleasure.
Przemek is an extremely talented designer. He provides a high level of visual direction and can break down complex ideas into clear and concise visuals. He is creative, proactive and has a great understanding of project delivery. I’d love to work with him again – it was truly a pleasure.
Przemek is an extremely talented designer. He provides a high level of visual direction and can break down complex ideas into clear and concise visuals. He is creative, proactive and has a great understanding of project delivery. I’d love to work with him again – it was truly a pleasure.

Guv Biring • Senior prodct Designer • bp / Bros&Co

I had the pleasure of working with Przemek, and he is a highly skilled and innovative Lead Product Designer who consistently delivered brilliant ideas and excelled in design systems. A great team player with extensive experience collaborating with software developers.

I had the pleasure of working with Przemek, and he is a highly skilled and innovative Lead Product Designer who consistently delivered brilliant ideas and excelled in design systems. A great team player with extensive experience collaborating with software developers.
I had the pleasure of working with Przemek, and he is a highly skilled and innovative Lead Product Designer who consistently delivered brilliant ideas and excelled in design systems. A great team player with extensive experience collaborating with software developers.
I had a pleasure of working with Przemek, he is a highly skilled and innovative Lead Product Designer, consistently delivered brilliant ideas and excelled in design systems.
A great team player with extensive experience collaborating with software developers.

What was the thing that you found hardest to kind of wrap your head around at the start of the project?

It was probably the politics and the scale of the company. I hadn’t been involved in working for such a large organisation before. But our team leader realised that very early on and he shielded us from all of the politics, so we could just do the work. That helped a lot.

You’ll never be able to pronounce his name, but he will answer to names like Bond. Don’t let his friendly exterior fool you, under that flowery shirt and soft beard is a HB007 crayon assassin. He’ll turn any dull design system into a glorious Monet masterpiece, enough to make Banksy shred his own work (again). Some say he was born an unicorn, and transformed into a mere mortal to walk amongst us.
You’ll never be able to pronounce his name, but he will answer to names like Bond. Don’t let his friendly exterior fool you, under that flowery shirt and soft beard is a HB007 crayon assassin. He’ll turn any dull design system into a glorious Monet masterpiece, enough to make Banksy shred his own work (again). Some say he was born an unicorn, and transformed into a mere mortal to walk amongst us.

Did the design system team grow?

Yes, about a year and a half into the project, we got some proper funding. At its peak, we must have had six product designers, four developers and three content designers – a big difference from when I started in a team of three. By that time, our design system was really broad – especially considering it was built mostly by me!

Because of my work on the project so far, I was promoted to a lead role. That was a proud moment, but what was very important for me was that I continued to do hands-on work. But my new position meant I was allowed to have more ownership over what the team was working on.

Tell us about the Post-it notes…

At one stage in the project, my kitchen, where I work, was almost fully covered with Post-its! I had a few different walls covered: some were long-term tasks, while the part of the wall closest to the coffee machine was the immediate stuff. I also had some personal goals on the fridge. I thought I could track everything in my life with Post-its! They’re a really helpful tool, better than some software in my opinion.

At one stage in the project, my kitchen, where I work, was almost fully covered with Post-its! I had a few different walls covered: some were long-term tasks, while the part of the wall closest to the coffee machine was the immediate stuff. I also had some personal goals on the fridge. I thought I could track everything in my life with Post-its! They’re a really helpful tool, better than some software in my opinion.

How did you find your new leadership role?

It was a little challenging to begin with, because it was my first time leading a team, but I quickly grew into it. I loved working out which team members would be best at which tasks, which meant I was able to be properly strategic in my planning. How different people work and how to communicate effectively with them was a bit like building a design library - but with human beings! When I realised that, planning the bigger picture became much easier.

Later down the line, the team told me they appreciated that I was always there for them. I wasn’t one of those managers that just sits in the managing chair and tells the team what to do. When I needed to, I was jumping in next to them and doing the job with them. That's the thing I’m genuinely proudest about during my time leading that team.

Working with Przemek on bpCore was a truly rewarding experience from start to finish. As a highly collaborative lead designer, he ensured we remained in sync throughout every stage—co-creating and enabling each other to deliver the highest design standards across 300+ internal products.
Przemek is relentless in his pursuit of excellence, consistently pushing for the best outcomes while fostering high standards within the wider team. His leadership was instrumental in maintaining quality and guiding a critical re-platforming initiative with confidence and precision.
Working with Przemek on bpCore was a truly rewarding experience from start to finish. As a highly collaborative lead designer, he ensured we remained in sync throughout every stage—co-creating and enabling each other to deliver the highest design standards across 300+ internal products.
Przemek is relentless in his pursuit of excellence, consistently pushing for the best outcomes while fostering high standards within the wider team. His leadership was instrumental in maintaining quality and guiding a critical re-platforming initiative with confidence and precision.
Working with Przemek on bpCore was a truly rewarding experience from start to finish. As a highly collaborative lead designer, he ensured we remained in sync throughout every stage—co-creating and enabling each other to deliver the highest design standards across 300+ internal products.
Przemek is relentless in his pursuit of excellence, consistently pushing for the best outcomes while fostering high standards within the wider team. His leadership was instrumental in maintaining quality and guiding a critical re-platforming initiative with confidence and precision.

Przemek bridges the gap between design and development like no other. His meticulous approach and deep understanding make working with him a joy.

Przemek bridges the gap between design and development like no other. His meticulous approach and deep understanding make working with him a joy.
Przemek bridges the gap between design and development like no other. His meticulous approach and deep understanding make working with him a joy.
Przemek bridges the gap between design and development like no other. His meticulous approach and deep understanding make working with him a joy.

And did you learn from the people you worked with – particularly from different disciplines?

Absolutely. Being in meetings with developers, getting to listen to their conversations and gaining an understanding of their work – well, that allowed me to understand the bigger picture of what they were doing. It also helped me understand what product design means for them. And I didn't really have to go searching for that knowledge; I just naturally absorbed it from working alongside them.

Working closely with content designers on the documentation opened up a whole different side of the design system work too. They were designing documentation and we had some great meetings where they would dig into the detail behind individual components. With my background on the project, I was able to offer them insights on the context of a lot of the work as well as provide visual examples of interfaces to show users elements of the design system in different scenarios.

Przemek was a huge help in creating our design system's documentation. Together we brainstormed ideas for visual examples and he was meticulous and systematic. He combines sky-high standards with a dazzling work ethic and is always thinking ten steps ahead.

Przemek was a huge help in creating our design system's documentation. Together we brainstormed ideas for visual examples and he was meticulous and systematic. He combines sky-high standards with a dazzling work ethic and is always thinking ten steps ahead.
Przemek was a huge help in creating our design system's documentation. Together we brainstormed ideas for visual examples and he was meticulous and systematic. He combines sky-high standards with a dazzling work ethic and is always thinking ten steps ahead.
Przemek was a huge help in creating our design system's documentation. Together we brainstormed ideas for visual examples and he was meticulous and systematic. He combines sky-high standards with a dazzling work ethic and is always thinking ten steps ahead.

Can you think of any ‘eureka!’ moments you had during the project, where things just fell into place?

A eureka moment for me was coming to the understanding that it’s the way that I think that makes me great at design systems. Because I can plan very well, I’m really good at managing and simplifying complex systems.

For me, planning out the libraries involved 5 to 10 minutes of thinking, and then I was able to jump straight into it.

While designing the smallest elements, I was able to understand how the whole library was going to turn out and have that vision in my head. I never saw a difficulty in the scale of the project, but another designer might have found it overwhelming.

What was the best part of the project?

Migrating the whole design system from Sketch to Figma. This happened a few years into the project, when the team was quite large, but it was like the early days again - I got to go back to being part of a small team, with lots of freedom.

I worked with a fellow product designer who I got on really well with and, after a long stretch of remote working, we had the chance to meet in London for coffee and a chat.

bpCore is one of the biggest design systems in the world and the two of us manually migrated the entire thing from Sketch to Figma and optimised it.

It was a huge accomplishment, not least because the two of us did it almost single-handedly. The result was a really user-friendly, fully-functional design system.

Read next

From idea to launch in two weeks using no-code & AI

Gentype.io

Product Design

No-Code Development

Branding

Gentype.io

Product Design

No-Code Development

Branding

Gentype.io

Product Design

No-Code Development

Branding

Gentype.io

Product Design

No-Code Development

Branding

Projects

Every project is a unique story.

Every project is
a unique story.