Pres:Digital Marketing - Usability & Design

From EcommerceWiki

Digital Marketing - Usability & Design

Digital Marketing - Usability & Design

Title Digital Marketing - Usability & Design
Target group
Topics User Experience
Go to slideshow Go to print version

Public summary

Some argue that usability is in the eye of the beholder. However, what may be easy to use for one person may be impossible for another. How to create a design which is suitable for all? This course is about the basics of the usability and design of user experiences in general and webdesign in particular.

First the principles of usability and user experience are explained. UX design is more than visual design. In encompasses the entire customer journey. We then zoom in on visual design principles, both visual as well as functional. We end explaining the importance of data to understand where designs can be improved.

Five assignments have been included in the lesson. Most can be made as long or short as needed. The last assignment however takes at least 30 minutes to do and may be skipped.



This is the overall framework of the Digital Marketing couse. We will start with explaining the elements of an online marketing plan. Than we will zoom in on the different marketing aspects based on the customer journey. We start with those online media most suitable to reach consumers and slowly move down the funnel. In the end we discuss customer loyalty which has as goal to re-start the entire process from the beginning.

  • What is usability?
  • What is user experience?
  • The basic principles of UX design
  • The 5 main ingredients of UX?
  • How to Understand Users?
  • All about design
  • Visual design principles
  • Functional Layout Designs
  • Design analysis
Logo Ecommerce Foundation1.png 3

  • 1950: Let's make a product.
  • 1970: Let's make a cheap product. Consumers were becoming more price sensitive and companies focused producing products with low prices (and terrible quality).
  • 1990: Let's make a product with lots of features. To distinguish products companies started to introduce massive of features (of which usually 90% were not used).
  • 2010: Let's make a product that is actually usable. Producers realize that making a product easy to use actually increases the value of the product.
Logo Ecommerce Foundation1.png 6


Usability has become increasingly important. Roughly the way products and services have been designed in the past goes along these lines (the years are only indicative and depend strongly on the industry):

What are well designed products and why?

  • List 3 products or services.
  • Why are they well designed?
Class Assignment.jpg
Logo Ecommerce Foundation1.png 7

  • Phones: Apple's iPhone
  • Vacuum cleaner: Dyson vacuum cleaner
  • eReader: Amazon Kindle
  • Maps: the London underground map
  • Knife/screwdriver/...: Swiss army knife
  • Notes: 3M yellow post-it notes
Logo Ecommerce Foundation1.png 8

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the design?
Logo Ecommerce Foundation1.png 9


Usability is a quality attribute that assesses how easy user interfaces are to use. Usability is defined by 5 quality components:


The experience the user/customer has across the entire customer journey.

  • Usability focusses on the entire product or service
  • User experience on the entire customer journey
Logo Ecommerce Foundation1.png 13


Many people mistakenly think that “UX” means a user’s experience, but it is actually about “doing” the process of User Experience Design. UX Design (also sometimes called UXD) involves a process very similar to doing science: UXD does research to understand the users, develop ideas to solve the users’ needs — and the needs of the business — and build and measure those solutions in the real world to see if they work. The video below explains UX in more detail.

  • Be simple
  • Be contextual
  • Be human
  • Be findable
  • Be easy
  • Be consistent
Logo Ecommerce Foundation1.png 16


Make live easy for your users. Avoid distractions, jargon and long loading times. Which of the two cockpit designs do you perceive as to be more simple?


Ensure that users are contextually aware of where they are within their customer journey. An example of UX design which helps the user to determine where he is, is the breadcrumb. It shows in case of the Ecommercewiki in which topic and chapter he resides. For a webshop it helps determine in which product category he is if he is watching a product page.


Make sure users can find what you want them to find. LeadForensics makes very clear its wants visitors to try its software. The Get Started button is both shown in the navigation, on the right hand side as well as in the carroussel.


Keep in mind that most people to not arrive at your website via your home page but on a landingspage within your website. Having a clear logo and navigation structure at the top helps the user determine where he is. Other elements that help the user are clear headings, page titles and URL's. An example of a well designed website is that of the BB

  • The Logo of the company is always at the top left.
  • The shopping basket is always at the top right.
  • Navigation on the top or across
  • Breadcrumbs (if used) below the navigation
  • The content is shown in the left, bigger column or center of the page
  • Links in text are best kept blue.
  • Related material and promotions are shown on the right.
  • Etcetera.
Logo Ecommerce Foundation1.png 22


Reduce the user’s cognitive workload whenever possible. Be consistent and clear, and establish a strong visual hierarchy. The simpliest way to reduce the user's cognitive workload is to keep to design standards. Do not try to reinvent the feel unless it really adds value to the user experience.


Consistency makes sites easier to use, because users do not have to learn new tricks as they click accross the website. The advise is to define a clear patterns for your whole customer journey, from the Facebook ads till the thank your for your order confirmation email. Learned patterns should be everytime the same. Consistency is not only in navigation but also design (icons, images, fonts, colors) and language. Technically consistency also makes sense. It is a lot of work to create different templates and style sheets for each page.

Dieter Rams, Ten principles for good design:

  1. Good design is innovative
  2. Good design makes a product useful
  3. Good design is aesthetic
  4. Good design makes a product understandable
  5. Good design is unobtrusive
  6. Good design is honest
  7. Good design is long-lasting
  8. Good design is thorough down to the last detail
  9. Good design is environmentally friendly
  10. Good design is as little design as possible
Logo Ecommerce Foundation1.png 24


Teacher notes: as technology is continuously changing so are UX design rules. The principles discusses are just to be kept in mind. There are many other lists of UX design rules.

  • Psychology
  • Usability
  • Design
  • Copywriting
  • Analysis
Logo Ecommerce Foundation1.png 26


For the remainder of this lesson we focus mainly on psychology (understanding users) and design.

Some user research techniques:

  • Interviews
  • Observation
  • Focus Groups
  • Surveys
  • Analytics (Google)
  • Card-Sorting
Logo Ecommerce Foundation1.png 28


Get a bunch of people in a room together and ask them to discuss your questions.Note: Confident people often persuade others in the group, and a few random people are an unreliable example of anything, which is why I would rather set myself on fire than do a focus group in real life.

Buyer personas are fictional representations of your ideal customers. They are based on real data about customer demographics and online behavior, along with educated speculation about their personal histories, motivations, and concerns.

Logo Ecommerce Foundation1.png Source: Source: Hubspot, A Marketer’s Template for Creating Buyer Personas 30

To better understand the (potential) buyer

  • To get new business ideas
  • To create better products
  • To create better designs
  • To create better marketing campaigns
  • To determine which features to add to a website
  • Etcetera…
Logo Ecommerce Foundation1.png 31

  • It forces companies to think from a user perspective.
  • It helps prioritize which features to build.
  • It makes internal discussions
    • easier
    • more efficient
    • and more objective.
Logo Ecommerce Foundation1.png 32

  • Desk research
    • CRM databases (age, gender, zip code)
    • Public databases (what do they read/drive)
  • Interviews
  • Surveys
  • Observation
  • Etcetera
Logo Ecommerce Foundation1.png 33


Buyer personas are created through research, surveys, and interviews of your target audience. That includes a mix of customers – both “good” and “bad” -- prospects, and those outside of your contact database who might align with your target audience. You’ll collect data that is both qualitative and quantitative to paint a picture of who your ideal customer is, what they value, and how your solution fits into their daily lives.


Typical marketing personas do not help (much) in the UX process. You may have to create separate design personas. A design persona focusses on additional elements like experience with IT/applications, application goals, frustrations, tasks, etcetera.

  • Chose a often used application/online activity
  • Create a DESIGN persona, think of:
    • His/her experience level
    • Goals
    • Frustrations
    • Tasks
    • Etcetera
Class Assignment.jpg
Logo Ecommerce Foundation1.png 41

  1. Which devices are used?
  2. Start with the smallest device
  3. Understand the device
  4. Consider the UX guidelines of the software
  5. Be responsive
  6. Think about more than one screen at a time
Logo Ecommerce Foundation1.png 44

Which other design patterns can you name?

  • In websites
  • In products
  • In services
Class Assignment.jpg
Logo Ecommerce Foundation1.png 46

  • Select a web shop of your choice.
  • Map their information architecture.
  • Is the architecture flat or deep.
Flat versus deep site map.jpg
Logo Ecommerce Foundation1.png 48

  • Visual weight, Contrast, Depth & Size
  • Color
  • Visual Tension
  • Alignment and Proximity
Logo Ecommerce Foundation1.png 50

  • Z-Pattern, F-Pattern, and Visual Hierarchy
  • Browsing vs. Searching vs. Discovery
  • Page Framework: Footers, Navigation
  • The Fold, Images, Headlines
Logo Ecommerce Foundation1.png 59

  • Browsing: is when you go to Ikea to look at all the model rooms “just to get ideas” and you walk out with a bunch of random crap anyway.
  • Searching: Searching is when you go to Ikea looking for a new sofa that will fit in your absurdly small apartment.
  • Discover: Discovery is when you find the sofa you’re looking for, and also buy those clever little nested end-tables because they are so damn clever and nested. As if those are things you need in your life.
Logo Ecommerce Foundation1.png 62

  • Analytics: What is clicked, which pages are found, etc.
  • A/B Tests: Design two versions of the same thing and launch both!
  • Eye-Tracking: Where are eyes going?
  • Search logs: What are people searching for?
Logo Ecommerce Foundation1.png 67

  • Select a webshop or webservice of your choice
  • Analyse the website from a design perspective
  • What would be a typical design persona for the site?
  • What could be improved, with the persona in mind. Think of:
    • The basic principles of design
    • Different devices
    • F-pattern, folds
    • Browsing, searching and discovery
    • Impact of images
Class Assignment.jpg
Logo Ecommerce Foundation1.png 69

  • Usability (product): learnability, efficiency, memorability, errors, satisfaction.
  • User experience (journey): simple, contextual, human, findable, easy, consistent.
  • UX design: phychology/research, usability, design, copywriting, analysis.
  • Persona process: team, research, rough segements, persona design, validation, communication. Design ≠ marketing persona.
  • Design basics: different devices, design patterns, information architecture, wireframes, visual design principles,
  • Functional layout designs: Z, F Pattern, visual hierarchy, browsing / searching / discovery, page framework elements.
Logo Ecommerce Foundation1.png 70