10principles

10 principles required to create amazing online experiences

Before discussing the 10 principles required to create amazing online experiences its first important to understand what amazing online experiences look like. To understand this, we will review great face to face physical retail experiences and understand what they look and feel like? This forms a frame of reference.

Consider a scenario where a consumer has buying intent (“buying intent” is a person who has a buying purpose or need), makes the effort to head to a physical retail store and has a one to one interaction:

  1. A great salesperson will adjust the pitch based on a consumer’s questions and preferences.
  2. The salesperson presents relevant information based on these questions.
  3. The information presented is easy to understand (no jargon).
  4. The salesperson has sales tools and deep knowledge on the products and introduces this information at the right time.

The consumer feels this experience is personalised because it is relevant to his/her buying intent and is presented on their terms.

Like the physical experience, amazing online experiences should also be considered from the consumer perspective and based on a one to one interaction. Not one to many.

When a consumer has a buying intent he/she will:

  1. Seek out relevant information on their device of choice.
  2. The consumer will choose the extent at which they continue this mission, and may complete it or pause it based on their immediate situation.
  3. The consumer completes the mission only once they have achieved their goal, met their need, or solved their problem.

To meet this consumer requirement, retailers need to be...

  • Visible in the right places
  • Be easy to deal with
  • Speak the consumer’s language
  • Add value (provide content to assist with decision making)

To summarise the above four points, a retailer should be relevant to the consumer’s intent, and do this to a high standard.

For retailers to deliver amazing online experiences they are essentially selling (present content) in the identical manner in which a consumer wants to purchase (receive content based on their intent).

In Diagram 1 there are two circles, “How Retailers Sell” (or how they present content) and “How Consumers Buy” (or how consumers want to receive content). The overlap is a representation of a retailer meeting the expectation of the consumer. This overlap is a retailer’s online conversion rate1 (global average ranges between 2.3% to 3.5%).

The following 10 principles, when working together, will drive the overlap in Figure 1 which grows conversion rates, but more importantly, improves online experiences to “amazing” levels.

How retailers sell
diagram 1

10 Principles:

1. Consumers are on a journey

Not only are consumers on a journey, these journeys are becoming longer. Consumers want to remain in charge and are becoming more informed before making a decision.

In 2013 Google conducted a study2 and found, on average, consumers referenced 12 sources of information online before buying online or in store. In 2010, the average was 5.

2. Each journey comprises multiple steps

These are the actual steps consumers take on their journey. In the eyes of the consumer, a “step” occurs when he/she takes an action and new content is presented (or the same content appears differently). If the presentation of content is relevant, it provides consumers the sense they are moving closer to having their need being met.

In order for the steps to seamlessly flow together the right actions (or calls to action) should appear at the right time and be obvious.

3. The function of “UX”

“UX” plays a critical part but it is a part of a bigger whole. To understand how “UX” contributes it needs to be deconstructed and reconstructed.

Deconstructing “UX”

“UX” needs to be broken down into two parts:

  1. “Interaction cost” management 3
  2. “Value design” 4
Interaction cost

“Interaction cost” is the effort required of consumers to undertake each step within their journey and is made up of two forms of effort: physical and mental.

Examples of physical effort:

  • Clicking
  • Scrolling
  • Swiping
  • Typing
  • Waiting for pages to load

Examples of mental effort:

  • Consumer confusion
  • Not being able to find relevant information
  • Dealing with content that was not requested (pop-ups)
  • Needing to memorise content in order to make a decision (cognitive load)

The goal for all retailers is to reduce both forms of effort as much as possible.

Value Design

“Value Design” is the creation and presentation of content to assist consumers in their decision making process. The retailer is simplifying a consumer’s next steps.

For retailers to get this right they need to have a firm grasp of a consumer’s pain points and when these pain points occur in the journey.

Examples of building extra value:

  • Articles
  • Diagrams
  • Video
  • Guided selling content and tools
desert highway
diagram 2
coastal mountain highway
diagram 3

Reducing interaction cost is like a desert highway (diagram 2), it is efficient in moving you from A to B, but it is boring.

Value design is like a coastal mountain highway (diagram 3), the scenery is beautiful but it takes 10 times longer to get from A to B.


Sephora Example5
sephora exmple 1
diagram 4

In isolation, interaction cost and value design do not deliver amazing online experiences.

  1. You can reduce interaction cost, but no extra value is being added.
  2. You can create content which contributes to decision making but if the experience is confusing or hard to use, consumers will not endure the process.

To effectively contribute to customer experience design, these two functions should work together. An example of these two parts coming together can be found at Sephora.com. Consumers who are looking for eyeliner products on the Sephora site (diagram 4) are presented with a wide variety of “eyeliner looks” along with the products to deliver each look.

The bottom of the eyeliner category page presents “How To” videos (diagram 5) providing further guidance to those who need it (a potential pain point).

sephora exmple 2
diagram 5

4. Respect the fold

The Fold is as important as it was many years ago, but the dynamic has changed. See (diagram 66)

Though consumers are more prone to scrolling, he/she will not exert unnecessary effort if they perceive the content below the fold (diagram 6) will not add value to their journey.

Example of the fold
diagram 6

If they view relevant/meaningful content above the fold, the assumption is there will be more relevant content down the page below the fold. This assumption will prompt consumers to scroll to find more relevant content.

5. Let Data do the decision making

Having access to the right data is an important part of determining what is and what is not working. Focus on insights which brings clarity on the following:

  1. What is working that turns “consumers” into “customers”?
  2. What is bringing your customers back?
  3. What are your customer pain points?
  4. Why are consumers not turning into customers? What are the pain points of the people who come to you but do not end up purchasing?

Point 4 helps to enhance experiences for consumers where their loyalty resides with themselves and their own needs not with your brand. In today’s world where consumers are becoming less brand loyal7, this becomes crucial insight.

The depth and understanding of the data translates to a retailer’s ability to deliver the right experiences at the right time, driving “value design” creation.

6. Apply Best Practice (the “Science”)

There has been an incorrect assumption among businesses around the availability of digital best practices8 to leverage. Now 20 years on there are best practice methodologies, principles and processes for eCommerce, digital strategy, and digital conduct.

Digital best practice will expedite a retailer’s digital evolution.

7. Wireframing

The first step to translating customer experience designs from planning to touchpoints comes via the use of wireframes9.

Wireframes are ugly plain boxes guiding page element placement for all pages of a site and for all digital touchpoints. Wireframes ensure the integrity of the experience strategy by eliminating the subjective (decisions made by personal tastes and opinions) and emotional influences of look and feel.

The impacts of subjective and emotional influences can be felt when businesses translate their online customer experience plans directly to designed visual mock ups.

Wireframes (diagram 7) provide design teams the context they need to visually represent the brand’s DNA and bring the plan to life.

Example of wireframes
diagram 7

8. Design “Consumer First” not “Mobile First”

Designing for a screen type (such as “Mobile First”) introduces two potential risks:

  1. The design develops around the wrong focus making the screen the priority.
  2. Limits the experience design to other touchpoints10.

Instead of applying the experience design plan to the mobile screens and scale up, do the following:

  • simultaneously create wireframes for all touchpoints
  • consider consumer context
  • leverage the experience capabilities available for all touchpoints

9. Design experiences for intent driven “micro-moments”

“Micro moments11”, is a term used by Google to describe a consumer’s moment of high intent and need for engagement.

Thanks to smartphones, it is nearly impossible to predict where intent comes from and when it starts. This makes the world of the retailer very complicated and is why the use of demographics as a proxy for people is not an effective approach for designing experiences.

Have a look at this simple example:

Susanne is a happily married mother of 2, who drives a 4-wheel drive (never takes it offroad), works part time and lives in a large city suburb.

To capitalise on this “micro moment” principle, a Beauty retailer would be better positioned to focus on when Susanne runs out of eyeliner and goes online searching for “eyeliner” products.

Forbes calls Google’s “micro moments” a “game changer” for Chief Marketing Officers.

12 Micro-moments are not replacing persona development, its revolutionising it.

10. Be iterative (Continuous Improvement)

Avoid approach the online experience design process thinking it’s a “one –off”. The iterative continuous improvement discipline comes in 2 parts:

  1. Data mining, insight gathering and hypothesis creation. This is the part everyone talks about and is crucial. Over time, with the right foundation in place, data-driven decision-making becomes the norm.
  2. Iterative and agile development programming. This is the part no one talks about. Technology is the enabler for everything. All principles are powerless unless they have the right technology as the enabler.

An example of this in action is Target.com who is planning to spend $1.8 billion in technology in 2016/201713. The first time in the retailer’s history it is spending more on technology than on bricks and mortar improvements.

To read the full case study go to www.estaronline.com > News & Blog

See Swanndri Case Study as an example of a retailer undertaking the above principles and applying it to their digital channel and brand.