Designing a chatbot for your e-commerce business

Last year, a leading cloud communications platform company (Twilo Inc.), released the results of it’s Global Mobile Messaging Consumer Report. It went on to show that 9/10 consumers across 3 continents including North America, Europe and Asia would prefer to communicate directly with brands by using a messaging system. This test was conducted with over 6,000 consumers. With such a finding, it’s hard to believe only less than half of businesses around the world have the ability to interact with their customers in this way. To learn more about the survey and to download a copy of the report, visit http://bit.ly/consumermessagingreport

 

Today, this method of consumer interaction has integrated itself into some of our most loved social platforms.

 

Dominoes Pizza Chatbot
Image Credit: Domino’s

The need to make digital communications as fast and seamless as possible is always evolving. Mobile devices have evolved the requirement of entering a password from physically tapping in your password, to swiping a combination lock, to more recently fingerprint identification and Apple’s Face ID. The concept of needing less input from the user to get to what they need has been heavily invested in. The result of this period of trial and error has resulted in much of how chatbots now communicate with us.

We are going to look at some methods that you can use to improve the success of an existing chatbot or if you are looking to create your own, these tips will also give you some ideas about what can be achieved.

First of all let’s look at some of the benefit’s chatbots can have for your users.

 

Chatbots are useful for…

 

Basic information

If a customer is going to require more knowledge about your product or service, your chatbot must be ready to give a suitable answer from its database or provide an alternative method to get this information. Can it send you to a FAQ page? Can it bring up details to call your company directly?

Personalisation

A chatbot can make a great difference to what a user thinks about your brand and website. If it has learnt about your preferences and habits, a good chatbot might recommend items of interest to you.

Gathering Data

By keeping track of your users’ input to the chatbot, you can see how many users are after the same products or information. This can help you to make marketing decisions to become more user-focused.

 

When should a Chatbot surface?

 

Page Dwelling

Has your customer been loitering on a page for too long? Can a friendly bot point them in the right direction?

Physical Click

Sometimes once an event has been triggered on a page, this can be the perfect opportunity to bring up your bot.

Interface Problems

Has your user got into a strop and started rage clicking all over the page? Try and ease the mood.

 

What questions should it ask?

 

Query ordering

When discovering what queries may be asked, it is a good idea to group these into sections (Level 1 – Basic Queries) (Level 2 – Mid level) (Level 3 – Top tier). Then, figure out your answers for these tiers.

Funneling

The first question should always be an open question which can allow the user to answer with what they would like to do. This is where the bot needs to be at its most clever to be able to handle most requests from the user. The rest of the questions should keep the user on a closed path to provide them the desired information.

 

What should your bot sound like?

Here are some points to measure when designing the personality of your bot

Is it on brand?

Think about how your brand is perceived by your customers. This should be reflected by your bot. Are you selling high-ticket items? You should probably steer away from any jokes.

Is it personable?

Has your bot got a name? The user is more likely to remember the service if the bot is personable and has a name or its own personality.

What role does it have?

Is it clear to the user what the bot is going to be able to help you with?

Who should your bot be like?

Think of a figure you would like your bot to be like. What decisions would they make? How would they talk to you?

 

Ways of delivering content

How can you use more interesting ways of displaying information? We have got accustomed to seeing interactive media and widgets across the web. Why not try to use them here?

Cards

Cards are a great way of displaying content to break up the conversational UI. The example below is a great way of showing your products by using a horizontal scroll which is generally preferred over a vertical scroll in a chatbot.

Image Credit: Domino’s
Integrations

What external applications can you use to make your design more user-centered? If a user wants to know how to get to a venue, why not bring up a map for directions which they can follow with a tap?

Quick Replies

You might have seen these being used in gmail’s mobile app. This is a great way of persuading your users’ answers to get them to say what you want them to. It also means they don’t have to type!

 

Emojis

Why not!

Image Rights: Jamie Oliver
Gifs, Images, Videos!

Make the experience engaging and memorable. Remember to use these mediums to aid the user in what they want to get to!

Things to remember

  • The chatbot should always be helping the user to get the information they need quickly
  • Ask a broad first question and then funnel the user down to a path you want them to take
  • Make sure your bot is on brand with your business
  • Set your bot targets to ensure you are making the most out of this marketing method
  • Write shorter but more messages
  • Ditch unnecessary text
  • Minimise user input!
  • I don’t know is OK

 

I hope these methods will help you when designing a chatbot of your own.

There are nearly limitless possibilities for what can be done. Don’t miss out on this huge opportunity to help, engage, or sell to your customers.

 

Mobile web design

In the next few months we plan to overhaul a large solution that’s been mobile friendly for a number of years – but we want to make it even better! We now have data, analytics and even more experience to improve the UI and therefore increase conversions. So now feels like it’s a good time to write a blog post on mobile web design.

Approaching a mobile web design project

In fact, this would be our approach on any UX project.

  • Research
  • Strategy
  • Design (wireframing / prototyping / final visual design)
  • Test / Validate
  • Implementation
  • Measurement

Research

As always, research and planning will set you up for an easier ride. Don’t be tempted to jump straight into designing the interfaces without really understand why you are doing this in the first place!

  • Currently how are people finding the experience?
  • What are the pain points?
  • User testing – consider user testing the existing web solution if you are unsure of either of the above.

Mobile – a few things to consider

Let’s jump in to looking at some of the key differences between mobile and desktop:-

  • Restricted viewport size and a range of screen sizes
  • Create Fluid Layouts. Responsiveness is key for designing a mobile experience.
  • Navigation
  • Swipeable – if used then make it clear that the element is swipeable
  • No hover states
  • GPS
  • Environment / Connection speeds
  • Landscape v portrait
  • No right click

Time to Prioritise

It’s important that we review the analytics and data given to us by the current website. We want to understand what’s working well (or not). We also want to prioritise to decide what’s really important. Screen space is precious and we need to remove any distracting content. There’s a need to be as concise as possible. Less is more on mobile. A few things to consider:

  • Content First Layouts – where the content is the hero. A light interface for mobile?
  • Have clear, focused content
  • Make your content easy to read
  • Keep pages short & sweet

Usability on mobile devices

Our mobile web design needs to be attractive AND easy to use. Extensive wireframing and prototyping is really important. Quick prototypes allow you to send the initial concepts for User Testing, exposing the bits you got wrong and refining until the solution is working as required.

mobile web design

Design for Touch

In almost all cases, mobile applications are going to be used while in someone’s hand. Therefore, designing your mobile website around touch and ergonomics is very important. Think about how you hold your phone in your hand.

Follow Existing UI Conventions

In web design it’s always important to think about your target market. Consider other apps and websites they will probably use. Are they consistent UI design patterns that they follow and that are therefore intuitive to them? Remember, they use their phone all the time skipping for application to application.

Speed v engaging content

Also consider the environment / context in which the user might be browsing your solution.

  • Carefully balance an engaging experience with speed and fast loading times
  • Connection speeds on mobile device may be slower.
  • It’s extremely important to understand compression and optimise images, minify scripts and css.
  • Feeds or communicating with third parties from an external source can slow things down.

The User Interface – Elements in detail

Navigation

  • Menus and Navigation: Keep It Simple
  • Off canvas options are a good option if you need several tiers of navigation. Full screen options work well if the navigation is very simple.
  • Sticky headers. If you intend to use these then they need to be super slim.

Calls to action

Buttons – Consider primary and secondary buttons early in the process. All too often it’s difficult to understand what element is ‘the hero’ on the page.

Forms

  • Consider forms and moving people through these quickly
  • Consider slow and error prone typing
  • Validation and what’s mandatory

Ecommerce on mobile device

  • Register, login, view account
  • One page checkout, how do we make this as short as possible.
  • Shortest route to find what they want to buying what they want.

Things that don’t work too well on mobile

There’s a number of elements that work perfectly fine on desktop, however you can run into issues if you render these on mobile:-

  • Pop ups and modals
  • Some javascript / animations

And so we start our research in earnest for our new mobile web design project. Our experience tells us that as long as we following the process below we’ll not go too far wrong:-

Research > Prototype > User Testing > Refine > Implement > Measure

We very much look forward to sharing the final result and we’re confident that the user experience on mobile device will be greatly improved.