How Burger King Brought Their Design System to Mobile
Read how Burger King used Capacitor by Ionic to bring their unique design system to mobile.
Like many of today’s leading brands, from Apple and J.Crew to AirBnB and Warby Parker, Burger King has embraced a design-led approach that looks at visual design as one of the best ways to tell their story and communicate who they are and what they’re about.
And they aren’t leaving anything to chance. Every interaction with Burger King is infused with their custom design language—everything from the website, TV ads, and in-store menus, to (you guessed it) their mobile application. As Raphael Abreu, Head of Design at Restaurant Brands International (parent company of Burger King) put it recently:
Design is one of the most essential tools we have for communicating who we are and what we value, and it plays a vital role in creating desire for our food and maximizing guests’ experience.Raphael Abreu, Head of Design at Restaurant Brands International
The way that Burger King and other design-led brands create this consistency is through the use of design systems. Design systems offer a set of visual standards and specifications that help companies establish a unique brand identity that is consistently experienced across all channels—both physical and virtual. In many ways, the design system is the brand.
For web developers building frontend experiences across mobile, desktop, and web, design systems have become part of the common vocabulary. Although a design system can mean many things - from pure design specifications to actual, working UI components - it often boils down to a shared UI library that can be used and reused across any web project.
Now, this is easy enough to do with the web, with its vast array of CSS customizations and tailor-made UI components. But what about mobile? As any UX, UI, or frontend dev team will quickly discover, it turns out that bringing their design system to mobile is not so simple.
So how does Burger King do it? Before I answer that, let’s run down the options for customizing your UI in a native mobile app, based on which platform or SDK you’re building with, and then dive into how they make it happen.
Options for Customizing Your Mobile UI Design
Native iOS and Android
Android and iOS offer native software development kits (SDKs) that provide a rich library of frontend UI components, animations, and gestures.
The catch is, they’re not your UI components.
A big limitation of the native SDKs is that your ability to customize the UI components - and the overall experience - is limited to whatever Apple and Google are willing to support. You have to use their pre-built library and customization options. If you have a highly custom design language, with very specific fonts, colors, or design patterns, you might not be able to replicate those patterns for your mobile applications. Want your button component to look and behave just so? Better hope the native UI toolkits support it. Otherwise, you’re out of luck.
And if you have an existing web-based UI library that you’d like to repurpose, you definitely won’t be able to use these components in your native app if you’re building with the Android and iOS SDKs exclusively. This means you’ll be rebuilding everything from scratch; which effectively negates the value of a shared library of reusable components—at least as it concerns mobile.
React Native, Flutter, and Xamarin: Limitations to Native UI Toolkits
So what about cross-platform solutions like React Native, Flutter, or Xamarin?
Flutter is somewhat unique, because they’ve built their own UI library and graphical rendering engine—but the same limitations apply. You won’t be able to bring in your existing design system or web-based UI library to Flutter. Instead, you’ll have to recreate each component, and all customizations must be supported by Flutter.
In the end, teams who choose to build with the native toolkits or popular cross-platform solutions (like React Native, Flutter, or Xamarin) will find themselves recreating their design system for mobile, often without fully matching the UX and design specifications that their corporate brand and design systems would prefer to use.
Capacitor: The Cross-Platform Solution for Design Systems
Solving this challenge was one of our goals when we built Capacitor and Stencil—two open source projects that, when combined, provide a powerful solution for teams who want to bring their existing UI library to mobile.
First, Capacitor is a cross-platform native runtime that provides fully native mobile experiences that can be deployed natively on iOS, Android, and desktop platforms. You can also run Capacitor apps on a traditional web browser or a mobile-ready Progressive Web App, all from the same codebase.
The best thing about Capacitor? The UI layer is completely web-based, using the same open web standards, libraries, and frameworks that power your existing design system.
What does that mean in practice?
Let’s say you have an existing design system based on React UI components. If you build your mobile experience with Capacitor, you can use your existing UI library even when deploying a native mobile app. Of course, to create the best experience, you’ll need to account for mobile styling, navigation, and platform-specific UI guidelines specific to iOS and Android, but fundamentally your UI library will run fine on Capacitor right out of the box.
Burger King’s Approach
In fact, that’s exactly what Burger King did. The team at Burger King chose Capacitor because it allowed them to bring their existing UI library to mobile in a really unique way. If you check out their iOS and Android mobile app experiences, you’ll note that, while they look and feel totally native to the device, you’re not using the stock iOS or Android components. Their design team wants to make sure that the way you experience the BK menu, for example, is consistent whether you’re on their website, inside the restaurant, or on their mobile app. Capacitor allows them to do just that, by persisting their web-based UI components across web and mobile.
Build Your Own Design System With Stencil
Now, what if you’re not Burger King and you don’t yet have a design system built out? Well, that’s where Stencil comes in.
To sum it up, design-led brands like Burger King understand that their design system is an extension of their brand, using visual design to tell a story about who they are and what they value.
If your business already has a design system built out, or a shared UI component library, the easiest way to bring those experiences to your native mobile apps is to build with Capacitor, which lets you run your existing web-based UI library directly on mobile, and deploy it as a truly native mobile app experience. Any other option will, at best, allow you to mimic your existing UI library with lots of rework and added customizations. As for us, we think the real thing is always the better option.
Ionic is the Open Code leader and the future of enterprise app development. If you’re ready to dive in, connect with an Ionic App Strategist!
Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.