Designing for Multiple Platforms: The Four Cs Principle
Successfully designing across platforms means providing users with a good experience, no matter what platform they use! As a UX designer, your job is to make sure that your designs account for and take full advantage of the unique features of each platform. When preparing to design across platforms, it’s helpful to keep in mind the four Cs: consistency, continuity, context, and complementary.
Consistency: Most companies have specific design guidelines that need to be followed in order to stay consistent with their brand identity, which refers to the visual appearance and voice of a company. When designing a product, it’s essential to stay true to the company’s brand guidelines in order to maintain consistency across platforms and drive brand awareness. Maintaining a consistent design helps improve the user experience and build trust, because users can expect the design to feel familiar across platforms and products.
Take Google, for example. No matter which Google product or platform you use, you’ll find the colors red, blue, yellow, and green incorporated throughout the design. These visual design details are an essential part of building consistency, trust, and user loyalty.
Continuity: To provide users with a seamless experience as they move between platforms, UX designers also have to prioritize continuity. Continuity in design means that users can maintain their progress as they move from one platform to the next. The user experience for each platform might be slightly different, but the product’s functionality should still be connected. Without continuity, users can become frustrated if the progress of their experience does not carry across platforms.
For example, imagine you’re designing a website and app for emails. A user should be able to start writing an email on their laptop, save it as a draft, and finish that email later on their mobile phone.
Context: It’s also important to consider the context of each platform you’re designing for. This means thinking about when and how users prefer to interact with certain features on different platforms.
For example, imagine that a user has an email app on both their laptop and smartwatch. They’re probably not going to compose an entire email on their small smartwatch screen, but they might still want to get notifications about new emails or read important messages. Designers have to take into account the context of the user’s situation and adapt the design for each platform accordingly.
Complementary: One way to create a great cross-platform user experience is to make sure that the design of each platform adds something new for the user.
For example, imagine you have a family member who lives abroad that you keep in touch with over email. You might write most of your emails to them through the desktop version of the product, but you might build on those emails using the product’s mobile app, which has features like adding photos directly from your phone. Taking into account how each platform could uniquely enrich the overall user experience is the best way to create complementary UX designs.
Examples of cross-platform experiences
Now that you have the hang of designing across platforms, check out some real-world examples of products with stellar cross-platform user experiences.
For a lot of people, YouTube is a go-to source for watching endless hours of video content. The YouTube mobile viewing experience complements and smoothly transitions from a desktop browser. For example, the mobile app elevates YouTube’s “‘Watch History” feature, which allows users to continue watching from the place they left off in videos, on any device. In the mobile phone app, users can also access all of their playlists and upload videos directly to their channel, just like they would on a computer.
WebMD is a healthcare website where users can learn about the symptoms, diagnosis, and treatments related to a wide variety of medical conditions. The WebMD “Symptom Checker” allows users to click on certain areas of a body map and get a list of possible symptoms associated with those body parts. For example, a user can indicate that they’re experiencing heartburn as a symptom by clicking on the chest of the virtual body, and selecting “heartburn” from the provided list. On a mobile phone, this feature is simplified to account for the smaller screen size, but still provides the same basic functionality. On a desktop or laptop computer, this feature is more in-depth and extensive, and lays out the content differently.
Airbnb is an online rental platform where users can list their own space to rent or book a stay in someone else’s space. Think of Airbnb like a hotel, but you stay in actual homes, instead of a commercial building. The Airbnb user experience on a desktop computer is straightforward and similar to other rental sites, where you can filter your search based on your needs. The mobile app seamlessly integrates these same features and allows for continuity throughout the booking process. You can even get Airbnb notifications on your smartwatch, which is really handy as you’re traveling to your destination.