Whether you’re a runner, Crossfitter, or rock climber, you lace up in appropriate sneakers that help you get through the miles, WODs, or routes. And while you technically could wear your CrossFit kicks to run a 10k, you’d probably end up with blisters (and regrets) because those shoes are not meant for the repetitive motions of running.
The same goes for using your main design system to create your native app: Use the wrong tool and you’ll get an unfortunate outcome.
Designing a native app is already a complex and time-consuming process. Relying on your main design system can make it worse — not only for your team but for your conversion and retention rates, too.
So work smarter, not harder. Invest in a mobile design system to net the native app results you’re aiming for, sooner.
How is a Mobile Design System Different from a Regular Design System?
We know what you’re thinking: You already have a design system. A beautiful library of components, styles, and functionalities. It works great. Your team is happy. Your UX is on point. Why can’t you use what you have for your native app?
The truth is, no matter how robust your main design system is, it was designed in a web-centric realm. One platform, zero nuances. iOS (Apple), Android (Google), BlackBerry OS, Windows Phone (Microsoft) — these platforms aren’t web-centric. What works in your main design system (built for the web) doesn’t always translate to the devices on these platforms. And the results can be clunky.
Mobile devices have nuances that a main design system doesn’t account for, like different screen sizes and user interactions that are particular to each platform (iOS and Android). A main design system may work for some basic elements. But intricate details, such as buttons, icons, and functions need to be designed specifically for each platform. That’s where a mobile design system comes in. It’s meant to adhere to platform-specific policies, guidelines, UI patterns, and constraints.
For example, with mobile, you have to think about smaller screens, touch interactions, and limited bandwidth and processing power. This means that you need to simplify your design and strip out unnecessary elements. A mobile design system accounts for all of these nuances while still reflecting your brand’s identity.
3 Reasons to Adopt a Native Mobile Design System
Any product owner knows that designing for mobile is a given. Yet, according to a Clarity 2020 talk, less than 10% of public design systems support platforms other than the web. What’s up with this?
Maybe it’s because designers still design for the web first which, naturally, calls for a regular design system. However, this pushes the need for a mobile design system further down the pipeline until it’s an abandoned project or it’s simply too late to create an entire dedicated system. And if a mobile design system is finally created, it’s not a top priority, resulting in a sad, unhelpful tool.
Another theory for the lack of mobile design systems? Most digital products begin as web apps, so there’s a bigger focus on improving the web experience first. As a result, the main design system takes top priority over building one for mobile.
Either way, if you have a native app, the reasons for investing in a mobile design system are much the same as having a regular design system.
1. A Mobile Design System Is a Source of Truth.
It’s common for different teams to disagree on priorities, workflows, details, and more. It’s also common for different teams to get confused about what’s what. Having a definitive resource to refer to can calm quarrels, settle bets, and get everyone back on track doing what they do best.
2. A Mobile Design System Creates a Consistent Experience.
You want to build a loyal following with your customers. To do that, your experience has to be consistent whether on a desktop, iPhone, or tablet. When your product follows the same design conventions, users know they’re in the right place. They’re familiar with how you work. As a result, they can accomplish their tasks more quickly and efficiently, fostering an overall better experience.
3. A Mobile Design System Is a Time and Money Saver.
Developers and designers, rejoice! You don't have to start from scratch each time you create a new screen or layout. You can simply choose from the existing components and patterns to create something that you know looks great and works well. Also, a mobile design system makes it easier to update the app later on. If you’re only relying on your main design system, changes you make to the app’s design must be made across all platforms. With a mobile design system, you can make specific changes for each platform without affecting the others.
4 Tips to Optimize Your Mobile Design System
Like your main design system, creating your mobile design system is an investment. While it takes time and effort in the beginning, it pays off in the long run.
That said, there are a few ways to make creating your mobile design system more efficient and effective.
Look at your existing design system and identify what overlaps with your mobile components. Pull those elements over instead of starting from scratch for a more streamlined process.
Create consistency between different devices. Because there’s more flexibility on the web, don’t fear components not being exactly the same. Instead, think about layers of consistency or cohesion. Different platforms can have different components, but they should fit together across devices. Most importantly, ensure all your design systems encapsulate your brand.
Leverage what is already available. If you’re designing for a certain platform, follow the native UI design of that platform, using as many native components as possible. Rebrand elements that need to better fit your look and feel, but use what’s existing. While you’re at it, use existing UI kits for mobile, too. It’s easier to pull elements like status bars, native dialogues, and more from existing libraries then build your additional components into it after that. Discuss what branding changes are feasible with your development/engineering team since you may need to design something new (i.e. not an existing pattern) based on the experience you’re creating for the user.
Keep your design systems organized. Foundational design elements (including atomic items like text, color, and icons) should be kept in one design system, separate from your mobile design system. Combining the two may lead to inconsistencies because of certain platforms’ unique abilities. Plus, you don’t want to confuse your developers since different teams of developers build for different platforms. For top efficiency, organize based on user tasks, which helps designers focus on solving user problems. For instance, “if a designer was looking to inform the user of something within a flow, they would look in the ‘Inform’ library, and find info boxes, notifications, system alerts, and pop-overs,” says Bootcamp.
Tools to Build a Simpler Mobile Design System
When you use the right tools, it’s easier to make a more effective product. But as you go to build your design system it can be hard to know which to use.
You’re likely familiar with Storybook, the popular tool for developing UI components. It’s the development companion to Figma. Whatever you have in your Figma design system, you have the code version in Storybook. It enables developers to build components in isolation, which makes testing, documentation, and collaboration easier.
Until recently, you could only use Storybook for building web components. Now, developers can use Storybook for Native for native apps. It works as an extension in your browser to build your mobile design, and therefore fill out your mobile design system. It's easy to use and can be integrated with frameworks you may already use like React Native, Ionic, and NativeScript.
Another helpful tool to build out your mobile design system is Appetize.io. It allows you to run native mobile apps in your browser for previews, training, customer support, development, testing, and more. The best part? You can connect Appetize and Storybook for Native without having to restart your Appetize sessions.
Invest in Your Product: Add a Mobile Design System to Your Toolbox
Just like your original design system, you can’t leave it to languish. If it’s going to be a useful resource, you need to nurture it properly. This means having a dedicated person or team that updates and amends the mobile design system whenever there’s a change. Keeping it as fresh as possible ensures that everyone who uses it is getting it right.
In your mission to give your users the best experience no matter what platform they’re on, using the right tools like a mobile design system is the smartest thing you can do. Just like your go-to pair of running (or CrossFit or climbing) shoes, you’ll wonder how you ever got along without a mobile design system in the first place.
