by Joe Pendlebury (@theuxchap)

ASOS Case Study: Striving to Deliver a Seamless, Cross-Channel Experience

Being a pure play, ASOS’ success has been helped by the strength of their cross-channel strategy, and the seamless experience served to customers, across web and mobile. In addition to their UK-based desktop website (www.asos.com) and 7 International sites, ASOS have a solid mobile offering, which boasts a mobile-optimised website (m.asos.com), as well as iPhone, iPad and Android apps — the latter, for both smartphones and tablets. This approach, gives users the freedom and flexibility to shop, as and when they want to, regardless of where they may be — at work, home, or on the go — or what they may be doing.

In this article, I’ll be focusing on the fundamental requirements needed to be able to offer a seamless, cross-channel experience, using ASOS, as an example of a retailer, who appear to be taking significant strides in the right direction.

Why Is It Important to Provide a Seamless, Cross-Channel Experience?

Smartphone and tablet usage for shopping, has been on the rise, for a long time now. Retailers — especially those with mobile-optimised websites (responsive or adaptive) and apps — are already seeing a significant shift away from sales predominantly being made on their desktop websites, in favour of a move to mobile. Some, so much so, that sales across mobile, have already overtaken desktop.

In light of the above, early adopters of mCommerce, are beginning to lose the competitive advantage they once had over their rivals, and are looking for new ways to re-establish that edge. Giving shoppers, a unified experience, across web and mobile, enables retailers to put some distance between themselves and those snapping at their heels — that is, for now, at least.

Users expect to be offered a usable experience, irrespective of which channel they’re using. Any inconsistencies, will inevitably lead to the user, questioning the credibility of your organisation’s online efforts.

Invest Wisely, Into Making the Right Choices from the Get-Go

It’s one thing having a solid web and mobile offering; however, maintaining consistency and transparency across each channel, is by no means, an easy feat. To ensure unity, there are a lot of things that have to go on behind the scenes, to support the parallel, expansion and channel growth. Investment needs to be considered, across the following areas:

• IT infrastructure
• Technology
• Resource
• Organisational change (such as a move towards Agile ways of working — breaking away from traditional silos).

From a development standpoint, at this stage, it’s important to consider ways in which you can share code bases. It’s both costly and wasteful, to use up precious dev resource and time, rewriting code for identical features and functionality that will exist across each channel.

From a mobile-perspective, I have no doubt, that many organisations will either be considering, or have already moved away from, focusing on the development of native apps, in favour of transitioning to a cross-platform app development approach (such as by using, Xamarin). In doing so, it avoids the need to build native apps for iOS, Android and Windows, in isolation.

The most notable benefit of adopting such a strategy, is that you’re much less likely to have to continue managing multiple code bases, and the subsequent expense that comes with hiring a large team of specialist developers, for each platform.

Speaking from personal experience, I’ve been a part of a number of project teams involved in designing and developing native apps. When working to the Waterfall model, it can take months to get an app ready for release, meaning that focus has to be placed on one app, at a time. This ultimately delays the completion of each app. Developers’ time is spent focusing on platform-specific issues, rather than new features and UX enhancements, which limits your ability to work on future app updates. In short, you feel like you’re constantly playing catch-up, with the competition. On the flip side, I’ve also carried out similar work, albeit in a team working in an Agile setup — Scrum, in this case. During this time, we were able to successfully release the app in question, just 8 weeks after starting the first development sprint.

All of the above requires careful consideration and buy-in, from the Business. To convince the likes of C-Level Execs, and the Board, you ultimately need to be able to demonstrate the long-term, cost-saving, and the resulting impact on the bottom-line, which is easier said than done.

Set Up for Success

Research and Analyse, Existing Cross-Channel, User Behaviour

You need a thorough understanding of the differences (no matter how subtle they may be) in the way, your various user groups, shop across each channel.

For example:

1. What are their most-commonly, carried out tasks?
2. What type of setting, or environment, are they in, when they complete those tasks?
3. Which are the preferred channels, for undertaking the tasks on?
4. What are the strengths and weaknesses of each channel?

Familiarise yourself, with your personas, conduct user research, and look for insight, from existing analytics. If in doubt, seek the help of a Business Intelligence (BI) Analyst, or Customer Relationship Management (CRM) Analyst, to obtain the data, and identify patterns or trends in users’ behaviour. In turn, this will allow you to make better-informed decisions, as far as defining the UX.

Produce a Set of Cross-Channel Design Guidelines

Adhering to a set of cross-channel design guidelines, will ensure a consistent approach to visual design, layout, styling, interaction and tone of voice, thereby building a sense of familiarity and uniformity for the user, when chopping and changing channels.

Having design guidelines like this, readily available, also give, both your User Interface (UI) Designers, and Front-End Developers, something concrete to work from, as they go about their work. In turn, this can help to reduce the likelihood of communication breakdown, which may otherwise lead to something being designed / developed, that fails to meet the required standard of consistency in design.

Track the Single View of the Customer

To really understand the customer journeys being made, not just across a single channel, but across multiple channels, you need to be able to track, monitor and analyse, the “Single View of the Customer”.

This is imperative to the success of any cross-channel strategy, especially if you’re looking to introduce functionality, like the ability to share the contents of your bag across channels, or, to add items to a list of favourites on one channel, and view them on another.

You may find that for any given day, a typical user browses your desktop site, during their lunch break at work, using their bag, as a temporary wishlist of items they’re contemplating buying. During the commute home, they may then use your mobile-optimised site, or smartphone app, to refine and reduce the list of items they previously added to their bag, further. Later on in the evening, when they’re winding down for the evening, they may use your iPad app, to look at the final few items they’ve whittled their list down to, in much greater detail (on the larger screen), with a view to committing to purchase.

In isolation, learning about user behaviour across a single channel is useful. The insight is much more powerful though, when you can see the Single View of the Customer, as a result of connecting the journeys made across each channel, over the duration of a single day, or the period for which they first interacted with one of your digital touchpoints, up to the point they completed their order, for example.

ASOS Case Study

Fundamentals aside, let’s now focus on a retailer, who for the most-part, are doing a very good job of delivering a seamless, cross-channel experience, to their customers — ASOS.

As an ASOS customer myself, I frequently use their various channels to browse and shop. Which channel I use, ultimately depends on where I am, and the time of day. Whilst at work, I’ll tend to use their desktop site on my PC, or their smartphone app when I’m taking a break, whilst at home, I may be more inclined to use their iPad app, or their desktop site, on my iPad. I’ll also use their mobile-optimised site, from time-to-time, but more so, when I’m already browsing the web, on my iPhone.

As I’ve partially eluded to above, which device and channel I choose to shop with ASOS on, is heavily decided by the context of the situation, such as:

1. How much time have I got spare?
2. What is the goal, I’m ultimately trying to achieve? Browsing for Inspiration? Intent to purchase?
3. Where am I?
4. What’s my current state of mind?

A Side-by-Side Comparison

As part of this post, I wanted to undertake a little study, to determine how consistent ASOS’ shopping experience was, when comparing their desktop site, mobile-optimised site, iPhone app and iPad app, side-by-side.

As such, I decided to take a look at three key pages, that would form part, of what I would imagine to be a key customer journey, for somebody browsing for inspiration, in finding a dress for a special occasion:

• “Women” landing page
• A Product List Page (PLP) representing “Dresses”
• A Product Details Page (PDP) for a particular dress

I’ve summarised my findings, in the illustration below.

From a design-standpoint, you can clearly see consistency, in the use of content, and the positioning / styling of visual elements. Even with the significant differences in screen size, there is a sense of continuity in the way that the various pages have been designed.

“Women” Landing Page

Take the “Women” landing page, for example. the main, “hero” image (of the model in the mint-coloured prom dress), is the key focal point in the immediate viewport, across each channel. There are subtle differences in key elements, like the navigation design, for example, but that’s an acceptable and intelligent compromise. It shows that ASOS have prioritised the importance of adhering to native navigation patterns, in the two iOS apps (by introducing a “Tab Bar”), which in my opinion, is the right thing to do. Users of iOS apps, expect to navigate in that manner, in the same way that users of a desktop site, would usually expect to find the key, navigation elements, spanning the width of the top of the page.

“Dresses” Product List Page (PLP)

When comparing the “Dresses” Product List Page, across each channel, there are again, clear commonalities, in the way those pages / screens have been designed, and the functionality available on them.

Further-still, and of the utmost importance when striving to deliver a seamless experience, careful consideration has been paid to ensure the experience has been optimised to the device, it’s being used on.

Note that when using the mobile-optimised site, or iPhone app — on an iPhone 6S Plus, in this case — the product listings are displayed across two columns, by default. Yet, when viewing the iPad app, or the desktop site, on a much-larger screen device, the columns extend out to three, as there is more space available to do so. The other positive here, is that the size of the product imagery hasn’t been compromised to allow for the introduction of the extra column, therefore the user will still be able to see the detail in the garment, at a glance, when scrolling down the list.

Inconsistency in Display of Product Listings

The biggest usability issue for me, and this may be more of a content-related faux pas, than one that lies at fault with the UX Team, is the fact that, the ordering of dresses on the PLP, was not consistent across each channel. On the face of it, this seems like somewhat of a trivial issue; however, it is somewhat jarring and disruptive, to the overall, cross-channel experience. As you can see from the illustration, the first few dresses displayed in the immediate viewport, in both the iPhone app and iPad app, were completely different to that being shown in the desktop site and mobile-optimised site.

Going back to a point made previously, if a user were to browse the desktop site whilst at work, then came home and continued shopping in the iPad app, later that evening, they may be somewhat confused as to where that dress has gone, that they found earlier.

In the very worst case, this may result in a potential loss of sale. Working in the Fashion Retail industry myself, the hours between 7pm and 9pm, are often highest revenue-generating hours of the day (especially during weeknights), so what seems like a low priority issue, could actually, in turn, prove to have quite a detrimental impact — as far as sales, are concerned, at least. Admittedly, it is a very broad assumption that ASOS’ users, do primarily use the desktop site in the day, whilst at work, and the apps on their smartphones and tablets, at night, but it’s still worth bearing in mind. Nevertheless, it’s a seemingly small dent, in an otherwise, excellent cross-channel experience.

Functional Consistency

So far, I’ve primarily looked at ASOS’ cross-channel experience, from a design-standpoint. In doing so, it’s easy to forget about the importance of ensuring that functionally-wise, everything you can do on one channel, can also be done on another.

Having interviewed and conducted research, with numerous users of e-commerce sites and retail apps in the past 12–18 months, the general consensus was that they felt mobile-optimised sites and apps, offered a “cut-down version” of their desktop-equivalent. In light of the rapid growth in usage of smartphones and tablets for shopping, I’d like to think that this perception may now have changed, especially as retailers are investing more heavily in mobile, and taking proactive steps to bringing their mobile offering, in line, functionally, with what their desktop website, currently offers.

On the face of it, ASOS seems to have a cohesive experience, functionally, too. Core components, like the ability to search, filter, sort, view catwalk videos and zoom into product images, are present across all channels. Some of their most recent feature enhancements — such as the ability to save items for later, and the opportunity to access contents of the bag, irrespective of where those items were originally added — are also available, across every channel. It’s worth noting, that you do however need to be signed in, before actioning any of the previous. Even so, their commitment to synchronous, cross-platform development and deployment, goes a long way to helping their objective of serving customers, a seamless, cross-channel experience.

Conclusion

Consistency plays a huge role in allowing for a seamless cross-channel experience to be successfully delivered. From both a design and development standpoint, ASOS have done a very good job of acting on that, allowing their users to complete any given task, across multiple channels. Not only that, but they’ve taking into account the transitions that are needed to allow for jumping from one channel to another. Based on what I’ve seen of their efforts, it’s also clear that a lot of thought has been put into ensuring the experience is optimised for each channel, and the devices used to access those channels. Collectively, this makes for a very good shopping experience. Even so, there are a few areas of disconnect between channels, here and there, so there’s still room for improvement.

Originally written and published to www.uxchap.com on April 24th 2016, by Joe Pendlebury.

One Last Thing…

If you liked this article, please applaud it 👏 and share it with your friends, work colleagues and followers. Remember, you can clap up to 50 times — it makes a big difference for me in helping to focus my writing on what you guys enjoy reading the most.

You’re also welcome to follow me on Medium, on Twitter, or even connect with me on LinkedIn. Thank you for your support! 😊