The 12 pillars of mobile commerce design

What are the key factors behind an effective m-commerce site, one that will meet the needs of the modern multichannel consumer? 

This week sees the release of our new m-commerce report, DNA of a Great M-Commerce Site Part 2: The 12 Pillars of Mobile Design, and here we present those pillars…

1. Mobile-first web design

The mobile-first philosophy dictates that all websites – mobile, tablet, PC – are designed, optimised and developed for the mobile device, connection, user and context.

This made-for-mobile web design is then enhanced or altered, where necessary, for different devices, connections and users.

Whether the site under development is a dedicated mobile site, an adaptive site or a responsive site (see table below for explanations and examples), mobile-first design demands starting with a clean sheet and developing an m-commerce platform that is dedicated to serving the target mobile user and fulfilling their needs.

One such example is ASOS. The site targets a younger audience which uses mobile a lot, and combines great usability with content created for its target customers.

This includes style feeds and features such as #AsSeenOnMe which provides customers with the opportunity to upload a photo of themselves adorned in ASOS gear.

ASOS mobile first

2. User-focused

A good m-commerce site design should be underpinned by knowledge of what the target user wants and needs from it.

This can be found from market research, user testing, monitoring behaviour on site (through A/B testing, heatmaps etc) and gaining feedback from users.

3. Elegant simplicity

M-commerce sites should be focused on the main tasks users want to achieve and making that as simple as possible to achieve.

Nobody wants a bloated jack-of-all- trades that does lots of things badly.

According to Daniel Rowles of Target Internet, TransferWise is a great example of this principle in action:

“Too often companies try and pack too much functionality into their sites and apps, and by being all things to all people, they end up being nothing to anyone! Many supermarket and banking sites/apps fall into this category.

Through clear usability-based testing and an overall focus on user experience, it’s possible to make complex mobile services simple.”

TransferWise

4. Contextual relevance and intention

Mobile devices are, of course, portable, and there are different situations in which customers will use it to access your website. This is the context.

There are also different reasons why they might want to use it, the intention.

The more a retailer knows about a visitor’s intention and the context of their visit, the better they are able to offer the most relevant content, offers and services to meet their goals.

According to Ronan Cremin of DeviceAtlas, very few sites ‘do anything meaningful with mobile contextual information’:

“Apart from the really obvious one (location) there are other possibilities like detecting if a user is literally on the move or not (accelerometer), is the battery low etc. etc.

One important point about all of these contextual cues is to use them as hints rather than hard deciding factors because the cost of getting things wrong based on an incorrect assumption is high.”

5. Reducing friction

Mobile usability can be a challenge with a smaller screen, variable mobile internet speeds and forms to complete.

Making the process as smooth as possible has to be the goal for retailers.

Typical friction points are product searches, form filling and payment entry, and delivery selection.

The answer, as is so often the case, is to learn from user behaviour and to test and improve the site on a continuous basis.

mobile_friendly_awwwards_webby_cz22 (1)

6. Anticipate customer desires and concerns

Entering into a new financial relationship is always going to involve a degree of unease for the customer, particularly so when this occurs remotely.

Making a purchase from a vendor you haven’t dealt with before (on this platform) necessarily involves an element of form-filling, which is an inconvenience at any time, but can be particularly tedious on a mobile device.

One of the most important roles of the web designer and UX designer is to make the purchase/form-filling process as easy, carefree and frictionless as possible.

This is done by minimising what is required of the customer, while justifying what is necessary. Get it right and you stand to win a loyal customer, get it wrong and you could lose the sale and the customer.

7. Cross-platform brand and identity

Brand identity is important. It can be what makes people recognise, identify with, be loyal to, trust and shop from your store.

In a homogenous digital space, there is a huge opportunity to differentiate from the masses based on real- world credibility. Independents can’t compete with the big boys on price, but they can compete on identity and service. This should resonate through the design of the both PC and mobile web presence.

daunt_books_cz24 (1)

8. Express your physical-world expertise online

Let’s use the example of Piccadilly Records here, an independent retailer whose expertise sets it apart from bigger rivals.

This is demonstrated by features such as staff picks. As report author Andy Favell says:

“The noteworthy aspect to the site is the Staff Picks recommendations. The beauty of the independent record store is that they are staffed by music obsessives, who love to give advice to lesser mortals. Piccadilly has successfully migrated this expertise from the physical to the digital world.”

piccadilly

9. Multichannel convenience

A mobile presence shouldn’t be a silo. Customers expect the same products, service and prices whatever the channel.

There is a lot of behind the scenes integration required to make this happen, but the reward are there if retailers can offer a true multichannel service.

One such offering is click and collect, which joins up online and offline channels, and provides a convenient option for customers.

Walmart is great here, displaying its collect in store services prominently on its mobile site.

walmart

It also offers convenient returns, meaning customers can return items purchased online to a local store if they prefer.

10. Cross-platform conversion

Customers will regularly switch between mobile, online and physical locations during the product research and buying process.

This causes issues for both the customer – who has to recall the products of interest – and the retailer, who a) doesn’t wish to lose the sale to a rival, or b) wants to understand which channels contributed to the purchase.

Some on-site features can help to achieve this link between channels. These include:

  • Click and collect.
  • In-store ordering for home delivery.
  • Saving items for later.

The customer doesn’t distinguish between a retailer’s various digital platforms, or physical stores, if available. The customer journey is proven to be highly fragmented, with customers often interacting and engaging on multiple channels before a purchase is made.

Retailers need to stop trying to account for each channel separately and instead look to support the user as they move between channels.

Here’s an example from Very. Mobile users can save an item for later, and then pick up where they left of on desktop, or vice versa.

very save for later

11. Usability and mobile-friendliness

An m-commerce site is there to sell products and, while conversion rates may often be lower than on desktop, a well-designed site should perform well.

There are two aspects to this:

  1. How easy it is to use the website or web app on a mobile device?
  2. How easy it is for the mobile user to complete their task?

The answer, as before, is to comprehensively test mobile usability and to continuously look to improve.

very

12. Performance

The size of mobile pages and the speed at which they download is arguably as important to mobile users as mobile-friendliness.

Here’s why:

The new report, DNA of a Great M-Commerce Site Part 2: The 12 Pillars of Mobile Design, looks at each of these pillars in great detail, containing tips for improvement, and contributions from Home Depot, Somo and more. 

Related reading

deliveroo
adblock-plus-android
google-logo
hp
Simple Share Buttons