David Hall logo David Hall

Creating an engaging onboarding experience using behavioural design

At the heart of it, C2P Compliance is a news feed of global regulations and standards which many of the biggest multinationals are using to manage their product compliance and ship safe products.

Yet they were suffering from a content avalanche. The question was, how do we give them only what is relevant and not drown them in the process? 😬

My Role

Lead product designer

My central role was lead product designer, alongside my two UX colleagues and two project managers. From the very beginning I was involved in customer insights, on calls with our lovely customers, planning the project and executing the vision. I was there from beginning to end.





I hate saying this, but our product compliance team is under enormous strain at the moment. We have the hardest job in the organisation. Too many regulations from every corner of the world to keep track of. And we make hundreds of products! We can’t do anything until we have filtered out all the outdated and irrelevant regulations.
Product compliance manager, top 10 multinational
Challenge

Fixing the avalanche of information

We got feedback that compliance teams were drowning in too much content. All the content you can consume sounds like a good thing, but when it comes to assessing critical content, it's a different to consuming for enjoyment. This issue was called 'the content avalanche'.

How does a compliance officer get relevant information without being overwhelmed and put off before they have even started the experience? Removing this avalanche was our big challenge.

The Inbox is where the user starts their work in C2P

There are literally thousands of regulations and standards (over 26K!), many irrelevant to a company, that need to be filtered out to be manageable. Yet it is difficult to now which are needed to monitor in the future. Many regulations and standards overlap with each other and can touch on a company’s product range.

The goal

Help the user get only what they need

Design a solution that allows the user to choose only what is relevant to them, and let them customise their compliance world before they start using the platform. This will solve the frustration of wading through too many irrelevant regulations, irrelevant markets and irrelevant products. The user can get their difficult job done more quickly and smoothly, and can report on their work more confidently.

1. Research

Our users

We have four very distinct personas which are used as a starting point for our job stories.

Interviewing our users

We began by interviewing compliance teams about their experiences with this avalanche. The feedback was that they faced a daily avalanche of content, with some of it being irrelevant, which added to the frustration.

  • Overwhelming avalanche of content
  • Too many irrelevant regulations
  • Difficult to know the most important regulations to focus on

Digging through the data

I also looked at our analytics to find out how quickly users could assess content and flag it as relevant to them.

The data and analytics told us that most users had to do a lot of extra leg work. I saw that most users were scrolling though lists much longer than we had assumed they would, searching on an assortment of keywords just to get to the relevant regulation. They also were filtering frequently to filter down the content to what they could manage.

Building job stories from insights

From these findings we built job stories focus on what the needs and motivations of the user are and what jobs they need to get done. Instead of focusing on the solution, we create these stories to guide us to a solution.

Our insights were

  • Filter down content before the user sees it
  • Make users feel familiar with the content before starting their compliance journey
  • Make it easier to filter through their products, content areas and regulatory world

Job stories let us concentrate on the goal, which gives us a better insight into types of personas that are using the platform. We created many of these.

2. Discovery

Discovering options

Following on from job story creation, we start to threw out ideas on how to solve this 'content avalanche'. The ideation team comprised of people from product management, development and customer success. We start with two 2 hour group ideation sessions, using Miro as our whiteboard (it was COVID time after all). One session for generating questions to answer and one session for generating ideas from these questions.

How might we?

I used the HMW technique to discover ideas based on what we found in our research stage. Creating how might we questions generate creative solutions while keeping teams focused on the right problems to solve. Our user job stories act as the basis for these.

The team took two hours to come up with these HMWs. The format went like this

  • How might we... give the user a specific amount of relevant regulations?
  • How might we... let the user decide on what regulations they would like to monitor?
  • How might we... display only relevant information, yet give access to more if needed?

This stage took two hours. The team gathered the generated ideas and grouped them using Affinity Mapping and voted on the favourite using dot voting.

The winning solution

Finally, we chose our preferred solution, which was a comprehensive and easy to use onboarding experience that would give the user relevant content when they first logged in and also get them familiar with the concepts of the platform.

3.Design approach

Using Behavioural Design

It‘s not a fancy new term. It has been around for a while and has developed into a powerful design tool. Behavioural design uses behavioural science, psychology and motivation in the things we build to design for how users behave. We build an environment that supports whatever route the user takes, instead of forcing them to conform to how our products and services work.

Learn more about Behavioural Design

Using Storymapping

Storymapping is a powerful way to map and visualise the user's journey through your product or service, in a visual and dynamic manner. For the designer and product team, it breathes life into design challenges, opens our mind to ideas, and discovers potential obstacles to overcome.

We used principles of behavioral design, with tactics and strategies to smooth and overcome the user's crisis points.

Mapping the user's journey

Below is an example of a user journey with the basic steps a user needs to take to complete their goal.

This is where behavioural design comes in

Strategies to guide the user

Taking elements from my behavioral design approach I use the Storymap as a foundation for the flow. There are two strategies I used to help us get the user to their goal.

Automate things

The easiest and best strategy is to eliminate the work required by the user. If we can automatically do things with their consent, then we should do it. We can use smart defaults, machine learning, and tailoring.

Make or change your user’s habits

The next most effective strategy is to use habits and motivation. We can avoid making the user work for an action and remove conscious effort. Identify a prompt and reward. These rewards need to be immediate and habits are a powerful way to form repeated behaviours.

Tactics for moments of crisis

These are just some of the non-coercive psychological tactics to support our user's actions.

Aesthetic-usability effect

This refers to users' tendency to perceive attractive products as more usable and so inspire trust.

Make it clear where to act

Tell the user what the action is in an accessible manner.

Progressive disclosure

Progressive disclosure is a design technique to ease the cognitive burden by only showing the most frequently required controls by default and making additional controls available on request.

4. Design exploration

Testing different layouts

We experimented with different layouts for the onboarding experience. Some questions we wanted to explore were; should the stepper be on top or bottom, should the buttons be fixed on the bottom or top, what type of imagery should there be and where will it be placed?

How many steps should there be?

In the research stage, we found our users were accustomed to dealing with large amounts of content, and they are not put off by form filling. This guided our decision to extend the onboarding experience further than normal, to get more even more preferences from the user.

Visual explorations

Testing flows for
different personas

Early on we catered for different user personas. We built out relevant flows for each.

Managers didn't need to deal with products and markets, but they needed an overall dashboard and view of their team. Likewise, monitors who assess regulations, didn't need a dashboard, but a more comprehensive view of products, markets and policy areas.

5. DESIGN SOLUTION

Bringing it all together

Colour palette

I choose a muted palette, as a strong colour palette could become tiring after a few screens. I chose aqua (which is our primary brand colour) and a complimentary green, to give a balanced and calm experience. As there are only a few actions, the aqua felt appropriate to be used here.

Iconography

One of our big challenges is representing the many policy and regulatory areas that exist. Because of the complex concepts, we felt it was easier and more flexible to create icons instead of sourcing photographs that could be harder to comprehend when in a list.

Screens

After more testing with hand-picked and engaged users and the internal team, we felt we had a strong user flow and end product.

6. Outcome

Happier customers 😊

Now when users get to their Inbox, they have access to only the most relevant and important regulation and standards that their company needs to monitor.

Users have said that they like being able to set up their system up front, and much of the hard work of manual remote setup through customer service was taken away. A side benefit reported by users is the fact that they can learn some key terminology before entering the system. They felt less stranded in the complex data then they may have felt.