Your app is not your website
It might be web-based but your app and your website are very different things.
I’ve been in a few discussions over the last few months where there has been a debate over whether your app should look and function the same as your website. And the first thing I always ask is “Why? They serve different purposes don’t they?”
To be clear, I’m not talking about branding and ensuring familiarity across your brand or company’s touch points. That of course should be a given, but attempting to replicate the same user experience on both shouldn’t be an automatic thought.
A website might serve many functions. It might allow me to view activity, submit and update stuff. In addition, it might provide all the detailed information I ever need to learn about whatever it is beforehand or get help if I need it. It might allow me to do all of the things I could ever need — but I might only need 10% of what it offers 90% of the time. The rest being stuff that doesn’t apply to me or is something I’d rarely use.
An app on the other hand might focus on those things that would be used the most and help me do the most common things. It could be streamlined so I could use it to do what I need 90% of the time, going to the website for what the app doesn’t provide.
It’s useful to look at and map how a person spends their time over time.
For example, I might want to learn about what is involved in taking out a new mortgage, what the conditions are, or what options I have. Because there isn’t a one-size-fits-all the website might have quite a few different options and information on them so I can look through and see what suits me.
At some point, I take out the mortgage and am now only interested in seeing how much I have left, how much interest I’ve paid and the general state of my account. Over time I might bolt extra things on and want to keep track of them but for the most part, I’m only interested in the things that concern me.
If we took this approach then an app would be highly efficient for regular use. You might suggest “Well we could just streamline the website too”. And, the answer to that is “Yes you could” and I’ll get to that in a minute, but what you should be asking is — Why? Why do you want the 2 to be the same? We have circled back to, what is the purpose of them.
Some companies don’t have an app because a responsive website efficiently does what they need it to do. Maybe the stuff I need to do is limited or I only need to do something on rare occasions, an app would seem pointless in this case. On the other hand, some companies do away with a website altogether (apart from having a basic presence) and put everything I want to do in an app. And that too is fine because the app then serves the purpose of a person’s fully-fledged ability to do or check stuff and the website serves as an information or resource tool that can probably be linked to from the app. Many banks and financial institutions are taking this approach.
But going back to what was asked earlier, could we just streamline the website in the same way we do the app? One company that always comes to my mind, is Spotify.
With Spotify, their music player is the same on both the website and the mobile app. One of the reasons (I don’t work for Spotify so can only make some assumptions) is that if you don’t have the mobile app, maybe you forgot your phone, or you are working on your laptop and it’d be more convenient than using your phone, regardless you can still listen to music via your browser and be presented with familiar controls. They look and function the same. The same experience you get on their mobile app is what you get on their desktop app or in the music player on their website. I hear you saying, “But I thought you were saying they don’t need to be the same, blah blah blah, what’s the purpose…”.
Spotify took the app experience and ported it to the player on their website. But the player is NOT “a part of the website”, the player is a piece of software, an application — an app. It serves a similar purpose to the music player on your mobile therefore making them look, feel and function similarly ensures familiarity regardless of which you use. The version on your phone is portable and utilises device features such as knowing when you are in a car and having a mode for that, while the version on the website serves the purpose of convenience for someone who doesn’t have their mobile device to hand. One product (a music player), different platforms (native mobile and browser-based).
Spotify’s “website” however, is where you can learn about them and what they have to offer, the various plans and other long-form content do NOT look and function like the music player. There will be some similar branding in the use of similar fonts, colours and icons but the components and structures that are used will be different. An app will naturally be more condensed with large hit areas to make interacting with it easier while the “website” will focus on making long-form content easy to read and digest. You could even say that the “website” is another product that focuses on explaining the company and their services. Two products (a music player and an informational/marketing website) that both share a common platform (a web browser).
WhatsApp, Discord, Google, whichever company you look at, in general, their informational websites look and function one way and their applications, whether on a mobile or web-based another way. They might feel similar because of branding but the experience will be different across the different products, and sometimes across platforms.
Even though Spotify’s music players are the same on the different platforms, each has features considerate of the platform it is on. Things built on the web or as laptop/desktop software can use inline text links, whereas apps on touch devices need larger tappable buttons. Web-based apps can utilise drag-and-drop features and make use of large-screen displays. Mobile apps can utilise a device’s gyro to determine location and movement and simplify the interface while travelling.
Design systems are built to serve the purpose of ensuring that an experience is consistent and familiar but we need to be aware of these differences across platforms and be clear about what is used, where and when. Again your text-heavy informational or marketing website (one product) is not a software application people need to actively interact with (a separate product). As such you might need to approach each of them slightly differently and differently again depending on the purpose they serve.
So the next time you embark on building a website, an app or both, ask yourself what the purpose of the product and platform is before you decide whether they all need to look and function the same way.
I don’t and have never worked for Spotify so all thoughts about their product strategy are completely my assumptions. The IKEA-style illustrations (inspired by a weekend of flat-pack building) have been hacked together using some graphics from Freepik and The Noun Project.
