How To Approach Cross-Platform UX Design

UI/UX Design

Web Development

App Development

User Research

An illustration showing a grid layout for various device sizes, such as desktop, tablet, and mobile.
An illustration showing a grid layout for various device sizes, such as desktop, tablet, and mobile.
An illustration showing a grid layout for various device sizes, such as desktop, tablet, and mobile.

In a world where everyone accesses the internet through vastly different means, UX designers are faced with a steep challenge: how can they create consistent, user-friendly experiences across multiple devices?

In some ways, the ideal UX approach would be to design each experience specifically for the intended device.

But that’s not feasible: especially when you consider that devices are more than just the Android/iOS conflict - they often come with different dimensions, capabilities, formats and even their own proprietary OS variants like OnePlus’ Oxygen OS.

The goal, instead, is to design an experience that your user can understand and interact with on any device.

They should be able to accomplish their intended task on whatever device they’re using - whether that’s a smartphone, laptop, tablet or even a Smart TV.

How do UX designers bring the technical considerations and browsing habits of their users together to create their designs? Well, if they’re anything like our team at KOMODO, they begin by achieving understanding.

User experience research for cross-platform apps

The first question the app development team needs to answer is an obvious one: do we even need cross-platform design?

If, for example, you need an internal app for use in a company where every employee uses a specific device, cross-platform functionality is an unnecessary burden.

More likely, based on Ofcom stats that show 61% of internet users browse via both mobile and computer devices, is that you will need to design for multiple systems. The real challenge is establishing which devices are worth the investment - you don’t need your app to be everywhere.

This is where a UX researcher will begin to create research questions for users. They’ll try to answer broader questions about browsing habits such as:

  • “Which platforms are my intended users on?”

  • “How many users are using more than one platform/device in a day?”

  • “What time of day are users on these platforms?”.

The more specific question is that of your app and its entire purpose: “what goal/s do I want my users to accomplish and what platforms facilitate it?” 

These questions will help you decide on the platforms you do want to launch on. Most businesses will require at least an Android and iOS app - but few will require more niche applications if their intended goals aren’t relevant (for example, if you wanted to launch a cinema streaming app your team wouldn’t be prioritizing smartwatch functionality.)

Research might also present opportunities beyond your original plans.

If, for example, you found that many of your user base had Smart TVs, you could potentially add to the project scope and capture that part of the market so you stand out from the competition.

Multi-platform considerations

Android and iOS have their own defined design considerations and usability criteria.

Your app will exist on these platforms, where users have specific habits or interactions that can differ regardless of how well the cross-platform integration has been planned. For example, an app that appears exactly the same across both an Android and iOS smartphone might still frustrate iOS users if it doesn’t support the gesture controls they’re used to.

When you’re designing cross-platform, these native interactions need to be factored in. One way of accomplishing this is by completing a multi-platform design phase (either for prototyping or for the entire project, though this will be expensive in terms of time and money).

Designing mock-ups or prototypes of both Android and iOS variants and testing them through both your QA team and users is a good way to see which interactions are most important or missing.

From here, the UX designer's job is to mimic the experience of the app across both variants until it’s almost seamless.

That means aligning visual elements like branding, imagery and typefaces but also animation and interaction. While you might use the physical back button on an Android device and a digital one on an iOS phone, the app should offer the same experience and outcome.

Platform-agnostic, universal design

Think of some of the world’s most famous apps. Spotify, for example. While it might differ visually from platform to platform, the functionality and useability of the product are exactly as the user expects no matter what device they access it with.

This approach requires an intentional limitation on the design team’s creativity, reducing the addition of new features until you’ve proven a need case. At their core, cross-platform apps built with UX in mind are ‘basic’ in that they should facilitate a user achieving a goal as efficiently as possible regardless of the device. 

Building an MVP is the only real way to test the reality of user experience, especially in cross-platform design. Once launched, you’ll be able to gather real data on how users on each device are interacting with the app and then iterate from there.

The world of UX and cross-platform design as an ethos are almost at odds with each other - how can you design for user needs and requirements when your users are potentially split across different devices?

Research and data are the only real ways you can create a UX-friendly interface for your users because you have to understand what devices they use, how they use them and how each device will impact your app’s functionality.

But to build two different apps for each main platform, then create variants for different device displays and functionality, is just not viable from a time or cost perspective.

Instead, you need a UX-led approach that prioritises usability across all platforms and focuses on launching a working version as quickly as possible to gather feedback.

The most efficient way to develop on both platforms and get an MVP launched in reasonable timeframes is to adopt cross-platform development using a JavaScript library like React Native.

Through this, the team can build the app quickly and deploy it to users so you can begin generating usage data and designing/tweaking features based on genuine needs.

React Native and UX design

Building user-friendly experiences in React Native means designing in a ‘one-size-fits-all’ mindset whilst being aware of the limitations of each intended platform and how it may impact design or functionality.

The UI designer becomes the main driver of the product’s UX when it’s a React Native project. That’s because the interface through which the app allows a user to accomplish goals is the most important element to get right. The navigation tools of an app must quickly establish:

  • Where the user currently is

  • Where can they go?

  • What will they find when they go there?

If your menu system looks and works well on Android but is cropped or poorly formatted on iOS, customers will grow frustrated immediately and fail to accomplish their intended goal.

UI designers must bear the differences of both platforms in mind, but design in an agnostic way where the ‘function’ of the UI remains the same. For example, where an iOS tab in an app might use a ‘rounded’ button highlight to show which page you’re on, an Android version will use the more platform-familiar underscore - but both do the same thing and reuse the same code: their goal is just to tell the user which page they’re on.

Outside of this, some general UX considerations for React Native/Cross-platform design includes:

  • Maintain typographic consistency - choose one primary font for ease, or develop with both platform-specific fonts (Helvetica Neue for iOS and Roboto for Android).

  • Enforce brand colours - your colour palette is the most recognisable part of an app experience. Maintain it across devices/platforms and you’ll be on your way to creating a cohesive experience.

  • Use system-specific icons - React Native allows designers to use a bank of icons for projects, but ensure you’re using the correct ones for each platform and that they display correctly.

  • Maintain accessibility - some platforms differ in their accessibility features. Android, for example, has more flexibility with font sizes and allows users to zoom further than they can on iOS.

Cross-platform app design is often considered more from a development perspective than a design one, where people tend to deliberate over code language and functionality.

However, it’s the UX designer’s role to ensure users can accomplish goals - so it’s the UX team’s challenge to take the concept of cross-platform, cross-device userbases and translate experiences that work across all of them.

That’s why our team is so proactive about user research. By understanding your user and their device habits, you can make more intelligent decisions around design elements and ensure a consistent experience.

If you’d like to launch an app that works beautifully cross-platform, get in touch today.

Got an idea? Let us know.

Discover how Komodo Digital can turn your concept into reality. Contact us today to explore the possibilities and unleash the potential of your idea.

Sign up to our newsletter

Be the first to hear about our events, industry insights and what’s going on at Komodo. We promise we’ll respect your inbox and only send you stuff we’d actually read ourselves.