Burger King's Mobile App Design System and Brand Consistency

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 across multiple channels 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 achieve their mobile design system? 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?

React Native and Xamarin both use the same native UI toolkits. Although you write your app logic using JavaScript or C#, you evoke the native UI components during runtime. React Native and Xamarin will often tout this deep native integration as a benefit, but these options leave you in the same boat as if you were building with the native UI toolkits. Any customizations you want to make are at the whim of Apple and Google.

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 Mobile 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. 

Stencil is a Web Component compiler that allows you to build fully custom, standards-based Web Components that will run in any modern browser, including the UI WebView used by Capacitor. And best of all, Stencil-built components can be paired with any JavaScript framework. This makes them ideal for building a central UI library that can be shared across projects, even when dev teams are using different frameworks and tech stacks—which is common in large organizations with multiple dev teams. You can learn more about Stencil for design systems by checking out the Stencil docs, and this post from Ionic’s CEO, Max Lynch.

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 and maintain brand consistency across multiple channels.

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!

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

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.