A Framework to Design Great User Experience (with Examples)

Technology shapes and reinforces how we behave.

  • We walk and run with earphones without paying attention to what’s happening around us;
  • We often check social media on our smartphones, even when we’re with friends;
  • We travel across the globe to stay in the bedroom of someone we’ve never met before;
  • We take tons of pictures of ourselves and send them to our friends and even strangers.

Doing these things may have looked crazy to our ancestors, yet even they shared similar behaviours… Humans have always liked listening to music, connecting with one-another, traveling to new places, and showing off.

Technology has just made these things different to do.

“Don’t try to change user behavior dramatically. If you are expecting people to dramatically change the way they do things, it’s not going to happen. Try to make it such that it’s a small change, yet an important one.”

– Sabeer Bhatia, Founder of Hotmail

Our most basic behaviours have remained the same.

A useful tool to work on your user experience?

B.J. Fogg explains behaviour with a simple model: B = MAT, which means:

Behaviour = Motivation + Ability + Trigger

For a specific target behaviour to occur, a person needs sufficient motivation, sufficient ability, and an effective trigger. [1]

  • Trigger = Do this now.
  • Ability = You can do it now.
  • Motivation = You want to do it now.

Make the three elements converge at the same time and a specific behaviour will occur.

Of course, the model is a simplistic view of the reality.

Human behaviour is far more complex. Many variables like culture and society also shape our behaviours. But, in the context of designing technology for behavioural change, having a simplified framework helps a lot.

Example 1: How Facebook tried to increase user engagement

Trigger. Ability. Motivation.

It’s what user experience design is about.

Let’s see how to we can use the B = MAT framework to understand others’ design decisions.

The goal for Facebook is to make us spend more and more time on its platform (specific behaviour).

To achieve that, Facebook recently updated the way you can interact with your friends. It makes these interactions easy to occur (ability):

– You could like or comment an update.
– You can now also share other emotions in one click—’love’, ‘haha’, ‘wow’, ‘sad’, and ‘angry’.

This is an attempt to encourage more user engagement, especially more emotional ones—since emotion drives virality.

The News Feed algorithm prompts the specific behaviour over and over again. Every time you refresh the page, it shows you recent and engaging updates from your friends (trigger + motivation). What is more likely to make you react than fresh news from people you love?

This new feature is a double win for Facebook: it increases user engagement, while every action gives more data about the users.

Example 2: How I used B = MAT to increase sales

Here’s a personal example:

It’s about how I use the B = MAT framework. You’ll see how it helps me design the user experience on the e-commerce site of GoudronBlanc.

One of my goals when people visit GoudronBlanc.com is that they buy T-shirts (specific behaviour).

Every call to action that brings the visitors closer to buy has the same colour (trigger).

Call to actions are designed with a distinctive green colour

The copy has been written to reinforce the value proposition.

It’s based on customer insight, i.e. their worldviews. So it shares stories that resonate with them (motivation).

Finally, buying on the e-commerce site is simple. Many sites use a 5-step checkouts. I simplified the process, which takes only one step (ability).

It’s your turn to design a better user experience

Here are three questions that are worth asking:

1. What progress are your users trying to achieve?

It starts with motivation. Understanding what people are trying to achieve, their jobs to be done, will give you enough insight to design what the optimal user experience should look like.

2. What are you doing to make it easier for them to adopt a specific behaviour?

That’s playing with ability. If it’s easy, your users will be more likely to do it.

3. What is going to prompt this specific behavior?

To have someone do something, you need a trigger. Choose an internal trigger. For example, feeling bored prompts you to go on social media. Or pick an external trigger—e.g. receiving notifications make you check your phone.

Notes about User Experience Design

[1] If you want to dig more into the topic of user behaviour, go read:

1. Behavior Model for Persuasive Design by B. J. Fogg, behaviour scientist at Stanford University

2. Hooked: How to Build Habit-Forming Products by Nir Eyal

3. The NNG has a good definition of user experience:

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

True user experience goes far beyond giving customers what they say they want, or providing checklist features.

We should also distinguish UX and usability, which is a quality attribute of the user interface, covering whether the system is easy to learn, efficient to use, pleasant, and so forth.”


Thanks to Kirsten Brown for reading drafts of this.