Creating an 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 use 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? 😬
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 for 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 begin their experience? Removing this avalanche was our biggest 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.
Our 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 use the platform. This will solve the frustration of wading through too many irrelevant regulations, irrelevant markets, and irrelevant products. The user can get their tough job done more quickly and smoothly, and can report on their work more confidently.
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 start to finish.
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 through 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.
Discovery
Discovering options
Following on from job story creation, we threw out ideas on how to solve this 'content avalanche'. The ideation team was composed 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.
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.
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.
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 were 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 to 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.
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.
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 than they may have felt.