justinmind

Omnichannel vs Multichannel UX: guidelines and examples

September 07, 2020
guidelines for omnichannel ux vs. multichannel

Omnichannel user experience: what every brand needs to connect better with users right now. Read on see how you can create your own!

Ten years ago, users interacted with brands in person, via mail or phone. They rarely interacted across more than one device or channel to complete one single task. Nowadays, users interact with organizations on various devices and engage across many channels in order to complete one single activity.

Design hi-fi prototypes for omnichannel experiences with Justinmind
Download Free

So how do you design experiences that enable users to complete tasks whenever, wherever? This is where omnichannel user experience takes center stage. Omnichannel UX not only allows users to connect to brands across multiple channels, it also enables them to act on their product or service triggers and makes each interaction more intuitive and effortless.

Today’s post looks at what we really mean by omnichannel UX, why your brand needs it and how you can design an omnichannel experience that puts users at the center of your design with Justinmind.

What is omnichannel UX?

Omnichannel UX is a way of ensuring users continue to enjoy the same experience with the same ease across your app or website’s multiple channels. This is a concept that can be challenging to grasp at first, because it stretches far beyond the world of UX design and into marketing. The idea is that the modern user is bound to jump from channel to channel for even simple goals, like making a purchase.

Think about it: Many people will start looking at items on the mobile app, only to make the purchase on the official website. An omnichannel approach means both these experiences will be the same.

But how can we achieve that? A regular website is bound to have a slightly different experience to a mobile app. While that is beyond debate, you want to make sure that both experiences will live up to the same standards and allow users to jump from one to the other with no effort at all. It’s about accepting the different channels for what they are, adapting for these differences while keeping the soul of the design intact.

what is an omnichannel ux design

The omnichannel way of designing is very closely connected to the business aspect of any UX project, mainly due to the entire idea rising from marketing. Here are a few key concepts to have in mind when considering an omnichannel approach:

  • Customer journey: Much like we analyze the user journey, so do marketers with clients. It starts with awareness and evolves into the actual purchase. You want the user to be able to jump between channels at any point in the customer journey.
  • Sales funnel: When pursuing an omnichannel UX, think of the friction that users feel when switching channels as leaks in the funnel. The more leaks, the less sales.
  • Sales channel: In UX design, we worry about devices and system versions but there are many more channels in business as a whole. Think physical stores, written catalogs, email, social media, and so on.

Multichannel UX: what changes?

Before omnichannel approach became a hot topic, the eye of the public was in the concept of multichannel marketing. This became a concern to big companies when their customers started diversifying the channels they used to interact with the brand. Suddenly, they had not just TVs, and phones- but a whole range of devices, which also brought a range of their own respective operating systems to take into account.

what is multichannel design

That’s when brands’ marketing departments realized that it was time to adapt or fall behind. The multichannel approach was about being there, no matter what channel clients used. The aim was to deliver the same message on all channels, which is something it has in common with omnichannel projects. With that said, it had one major difference from the omnichannel approach.

With the original multichannel method, teams didn’t set out to allow for swift changes between channels – there didn’t seem to be a need for it. Each channel is pretty much independent from the others.

What about cross-channel? This implies that the experience can mix channels, to a limited extent. A good example is “click and collect” sort of purchases, where the sale is made online and the item picked up in the physical store.

With the passing of time, brands went from simply allowing for many different channels to actually blurring the lines between each channel and device. Slowly, the idea changed from simply offering the same message into creating a loop in the shopping experience, independent of the channel. That is the birth of the omnichannel approach.

Omnichannel UX: the 5 best practices

UX Magazine defines omnichannel UX as putting the user at the center of a seamless ecosystem. All this talk about maintaining a seamless experience and adapting to fit the channel, but what does that actually look like in UX design? Our friends at UX Magazine narrow it down to 5 elements of omnichannel UX.

You’ll notice that many of these tenants are classic UX design best practices, and that is because, as a young industry, UX design reflects the technology we have at our disposal. Today, people want experiences that span across channels. We like to think that, in the end, the general trend of design is to go omnichannel.

Let’s check them out.

Consistency

A classic best practice in UX design. Consistency in the design as a whole is crucial because it’s intimately connected to things like learnability, discoverability and the learning curve in any product. It’s a principle that most design teams anywhere respect and apply to their work, simply because that is what good design calls for.

the role of consistency within an omnichannel experience

With that said, let’s consider the bigger picture and consider a big name like Amazon. When we consider a massively popular product that will cover many different channels, we can see consistency in a new light. Suddenly, it’s not just about making sure we use the same icons and respect navigation options – it’s about creating the same meaningful experience. This covers everything from the UI design to the interactions and general information architecture.

In broad strokes, you want to use consistency as a tool to make the product instantly recognizable to a user, no matter the channel. For example, a user who is used to purchasing from the website should be able to use the mobile app, just based on memory and instinct.

Availability

In simple terms, users today expect you to be available to them on the channel where they prefer to operate. This is about giving people a choice when it comes to how they interact with the company, about simply being there when they need you.

availability as omnichannel best practice

Which channels are right for your users? The answer might change slightly depending on who your product caters for, but today we have some standards when it comes to the sheer basics. An official website, for example, is a bare necessity for most companies and represents a crucial channel that is just as important as the physical store.

A lot of UX research needs to be done when narrowing down on the channels that you’ll be investing in. What devices do your users prefer? How do they shop? How do they spend their free time? Where are they more likely to go when browsing for things? You want to know who you’re designing for and where they expect you to be available to them.

Seamless

This tenet isn’t just about blurring the lines between channels, it’s about removing them entirely. You want to make sure that users can pause an activity at any point in time and pick up where they left off from another channel. This implies things like saving the activity of the user, such as the shopping cart in ecommerce platforms or bringing the physical and digital sides of the business together.

A seamless experience can sound a bit vague, but don’t be intimidated by it. Mostly, you want to take what a user does in your mobile app and assume they can finish that task on your website. It’s about taking all channels into account when creating a single unified product that includes it all.

Channel-neutrality

This follows a similar line to the previous point, but focuses on a slightly different aspect of it. Much like you want to erase the borders between channels for the experience from the user’s point of view, you want to create a whole new understanding within the company.

channel neutrality within omnichannel strategies

Forget about different teams handling the website and others handling the other channels. Let go of any competition between the channels. From now and into the future, there is only one product and all channels lead to it with equal importance. The idea of favoring one channel because it “drives sales” can be misleading and take away from the other channels which start to look simply complementary.

Context Optimization

Offering an omnichannel experience to users is about making sure you’re always available and that you treat each channel as equally important – but it has another side to it as well. Just because you and your team are aware that all your channels are important, doesn’t mean you shouldn’t potentialize each one of them.

In this sense, you want to take the central experience and adapt it so that it suits the channel in question, playing to its strengths. For example, you want to try to replicate the main experience from the website on your mobile app, but simply making a copy for a smaller screen isn’t enough.

context optimization for omnichannel designs

Mobile phones are much smaller devices that need a more pragmatic approach – and they are super interactive. An app that technically works but doesn’t reflect the best in your product isn’t an acceptable final channel. You want an app that respects all the best mobile design best practices out there, and is perfectly integrated into your product and business.

This omnichannel best practice is all about taking the best of our product and making it a constant across all channels, while adapting the experience according to what the channel is. Don’t fight the current, use it to make your user experience even better and convert a challenge into a strength.

5 great examples of omnichannel UX

Bank of America’s omnichannel UX

Bank of America’s customer-centered model offers users a dynamic experience across the board. Users can deposit checks, schedule appointments, cancel payments, access lending specialists and even get cash back from both the mobile and desktop apps.

example of omnichannel ux - bank of america

Sephora’s omnichannel UX

Sephora users can access Sephora’s Beauty Bag both on mobile and desktop. This includes all the data required to inform browsing and purchases, such as favorites list, past purchases, and how many rewards points they have.

Another interesting trait of Sephohra’s omnichannel strategy is the giving of tablets and devices to employees with the “endless aisle” feature. This means that employees can help shoppers order anything from their catalog, regardless of whether the item is in stock or not.

example of omnichannel strategy - sephora

Users can also scan items in store to see other options available online, watch video tutorials, and find their nearest store. It ties the physical shopping experience to their digital content, boosting the overall experience and telling a story when it comes to each individual product. A win!

Walgreens’ omnichannel UX

Walgreen’s mobile app allows users to view and manage their pharmacy prescriptions directly in the app, fill out rapid refill requests and print photos from their device. Aside from that, browse deals and discounts on in-store products and make orders that can then be picked up at their nearest location.

walgreens as example of well done omnichannel experience

So how do designers achieve omnichannel experiences? Through designing flows from one device to another and checking the synchronization and usability of each jump, as Thomas Fischer puts it.

But it’s not just about technique, it’s about having the right tool too. Further on, we’ll see how you can design an effective omnichannel user experience early on in your design process, using Justinmind’s prototyping tool.

ASOS

ASOS has made a huge wave in the digital retailer sector. The online fashion retailer understood that it’s main market, young 20-somethings, preferred mobile devices for shopping. After creating a wonderful and potent mobile app that integrates effortlessly with their website, ASOS now enjoys 58% of all sales made via the mobile app.

asos as example of omnichannel shopping experience

Shoppers can jump from website to mobile app without the slightest effort, with all the information being saved at every turn. Aside from that, ASOS invests a lot of effort into creating content for its social media, blog and magazine – all of which promotes and connects to their products. Today, shopping at ASOS feels exactly the same, be it done on a computer or on a phone – a true seamless user experience!

Starbucks

Starbucks makes for a great example of a physical product that can benefit from an omnichannel customer experience. Working closely with Microsoft, the coffee giant bet good money that the future was digital. Fast forward a few years, and Starbucks users can order via the app as they approach the store and keep track of their accounts details.

starbucks as prime example of omnichannel ux design

Aside from some great features like purchasing in-app or finding near-by stores, Starbucks has big plans for future achievements. “We’re meeting our customers where they are — whether in-store, in their car or on the go through the app — using machine learning and artificial intelligence to understand and anticipate their personal preferences,” said Jon Francis, senior VP at Starbucks.

How to prototype an effective omnichannel user experience

Designing an omnichannel ecosystem starts with understanding the customer journey through user research. Then, designers need to map out all the touchpoints of their interface and all the possible paths the user might take to reach their goal to make those touchpoints connect across channels and devices.

Creating an omnichannel experience within your prototype

Defining omni-channel prototypes is simple. Let’s create one together now.

Here’s a short omnichannel scenario:

Cassie wants to make a special meal tonight, but on closely reading the recipe, realizes that in order to make vegan lasagna from scratch, she is going need a pasta machine.

Cassie googles pasta machines on her smartphone, and reads up on electric vs manual, the pros and cons of different brands and consumer product reviews, and finally decides on the make she wants. She’s all ready to order from the retailer’s app when she realizes that they don’t do same day delivery.

omnichannel-user-experience-jusitnmind

She needs it today, so can’t order online and wait for delivery. She switches over to her laptop for ease of browsing and checks the retailer’s website for pricing and stock availability. She reserves and pays for the pasta machine via the website.

Then, she drives off to the store to collect it, using the order summary she receives in her Inbox on her smartphone as proof of reservation and purchase. She swings through the vegan market on the way home for the rest of the ingredients and her meal is a great success!

We’re going to design the touch points of this omnichannel experience using Justinmind. To do this, you’ll need to have the latest version of Justinmind downloaded.

Touchpoint 1 – creating the pasta machine mobile app screen

Cassie gets ready to order her pasta machine online from the retailer’s app.

To reproduce this touchpoint, create an iPhone X app prototype in Justinmind. Start by opening the tool and choosing the iPhone X app device template (or choose your preferred mobile template).

Design your mobile app by dragging widgets that you’ll find in the Widget library palette to the canvas. Make sure you check out the ready made screens for the iPhone in the iPhone library.

Touchpoint 2 – creating the pasta machine website screen

Cassie switches over to her laptop for ease of browsing and checks the retailer’s website for pricing and stock availability. Then, she reserves and pays for the pasta machine via the website.

Now you’ll need to add a second screen to your prototype. This will be a web screen that represents the retailer’s website.

To do so, head over to the Screens palette in the Justinmind editor. Click the ‘+’ icon. In the dialog that appears, give your web screen a name (e.g. Retailer website stock), and choose ‘Web’ from the Device drop down.

omnichannel-user-experience-justinmind-new-screen

Customize your web screen, adding a data list with records of paginated items. Then, try creating a Data Master in order to input real data into your web screen and create a shopping cart experience.

Touchpoint 3 – creating the Gmail Inbox app screen

Cassie uses the order summary, which she receives in her Inbox on her smartphone, as proof of reservation and purchase.

Finally, it’s time to create another iPhone X screen so that Cassie can pull up her order summary on her smartphone in-store. Go back to the Screens palette and click the ‘+’ icon. In the dialog that appears, name this screen ‘Inbox order summary’ and choose ‘iPhone X’ from the Device drop down.

Lucky for you, Justinmind includes a readymade screen for the Gmail Inbox app. Simply locate it in the iPhone Widget library and drag it to the canvas.

Notice that you can use any of Justinind’s widgets and icons at any time when designing your prototype, no matter the operating system.

And that’s it! Your very first omnichannel experience, done!

Conclusion

And as the interaction possibilities continue to grow and life gets busier, users expect complete experiences from brands. Tasks should be accessible and straightforward, no matter where users are or when they connect.

Omnichannel UX puts the user at the front and center of your brand’s UX strategy and allows you to create fluid, personalized experiences. With this post, you’ve got everything you need to create your own!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers