ClearScore Protect | Onboarding — VD&C

Onboarding

Overview

With a tight timeframe before launch working with an adhoc team we created an onboarding experience with the goal of helping user’s ease into the new security based product which resulted in increasing activations by 15%, increased paid subscribers, created brand impact and pattern adoption in the company. The onboarding was to support the launch of the MVP version of the Protect product which launched April 2020

Role

Product Designer / Animator

Timeline

2 weeks

Project Summary

Problem

Product proposition currently lose on users and in some cases caused anxiety
Misunderstanding of the product, little time to change the core product with little time before launch
Very small time frame to fix user problem

Solution

Designed a multiple step onboarding to the new product

Process

Understand - Got up to speed with product area and user problem
Design - Created content and early flow explain the proposition
Iterate - Bounced feedback off design / product and relevant stakeholders a few times
Deliver - On time before launch

Impact

Increased activation (15% up) - The onboarding replaced a one pager which increased
Brand adoption - Lots of marketing material was produced around onboarding style work
Company pattern adoption - Many other teams started doing onboarding esc features to prompt new material

Part 1

Context

Understanding the problem

Introduction

In the lead up to April 2020 ClearScore which is known for its presence as the free credit report was looking to introduce a new feature to its web and native apps called Protect, it would highlight at risk information such as stolen passwords and other sensitive user information along with actions in hopes to help further reduce identity fraud among users. This was a large opportunity for the business and held a lot of unknowns, the thinking was to launch a very low risk light product to see if this proposition would work as well as see if ClearScore could expand to having SaaS based product

Responsibilities

During the time of me working on this project I was in the open banking squad and had been kindly given the opportunity to lend a hand to the Protect squad in order to help lead the design of an onboarding experience 3 weeks before launch due to them being stretched

Discovery

A large problem was discovered by a data driven prototype (the actual product which was behind a feature flag) which gave off completely different user reactions compared to standard usability testing from before. Users where getting paniced by what they where being shown on the feature and the information provided wasn’t affective enough for them to finish journeys

Our hypothesis was that because Protect was so different from what people were expecting from ClearScore (Credit related service) that a feature which was shown as dark web related that displayed comprised passwords and leaked user information was too much whiplash

These highly impacted users thought a range of things which negatively impacted the ClearScore brand and user experience. It prevented some users from interacting with Protect with its intended use because of strong negative emotional reactions we where worried it might turn some users away

Some users didn’t know how to react when shown information like this, with the design of the product being an MVP a lot of aspects of the experience weren’t refined as it was so early in its life cycle, with limited resource and time action to completely address the problem weren’t available

Disconnection between what is being shown and how to fix it
A section of users thinking that information has been made up
Some users being panicked and not understanding how to use the product

User problems involved:

Researching the Problem Area

To gain more of an understanding of the problem I explored, gathered insights, got familiar with the MVP and spoke with some folks close to the Protect product before designing anything. Most of this research was done over 2-3 days as it was a short timeframe

I spoke with the designer who found the root issue and discussed what the users did and said that were overwhelmed. It was from this meeting that I discovered the potential risk factors of messaging types and being sensitive about how to display comprised information. I tried to dig deeper into some of the quotes that they shared with me from user testing interviews

I spoke with product on what could realistically be done in a short time frame in terms of content and engineering time . We discussed why users might be suffering from the problem and what could be changed before launch to alleviate this. This is where the onboarding idea came from initially

I also enquired more about the Protect product itself and looked at the current health of the MVP to see what was good and needed improvement by speaking to product and running a quick heuristic analysis of the main display of Protect. Given the technical and time restraints I it become clear that we needed a piece of work that wouldn't change core ascots of the product but have large attitudinal impact

One of the driving insights that I found was the sense of overwhelm came from the activation period of Protect. To investigate further I looked at the entry points, there was currently only a splash page which acted as a 1 time only primer to introduce the product. I look into this further and from the conversation I had with the designer it seemed that in order for some of the panic to occur / users to say what they did it would imply that they didn’t really read this pages content

Area of Opportunity

We could massively reduce negative user perception and increase engagement with the product through educating users / easing them into the product to avoid panic

Our hypothesis was that if could change the perception that some user’s had we would increase the activation rate of the product

We would track this via retention rates, time spent using the product, the amount of engagement with actioning content and retention based metrics. We would also track satisfaction via survey through CRM measures

Scope

We had a 2 weeks timeline to address this issue in a lean fashion designing across 3 platforms (Web App - fully functionality) and iOS and Android Apps through web view integration (Part functionally)

Constraints

Limited time for further research
Time frame to design / develop solution before launch was short
Trying to leverage the design system would be harder as it only partially built on the front end for web
I was new to the product
1 Design to work with every platform (Design pattern restraints)
3 waves of stakeholder management meetings who already had ideas on what they wanted

Part 2

DEVELOPING THE SOLUTION

Designing off little context and fast deadline

Ideation

The time spent generating different ideas was quite short as we where very much limited by time for this project. To change user perception without addressing altering the core product a more lean solution was needed in which an onboarding feature could be built relevantly fast because of components that already existed on the front end and we might be able to mental prep users better

“The idea was for users to have an interactive and enjoyable experience when being introduced to the product , this is what we stick to at the core of developing this solution.”

Developing the solution

Protect’s feature set was changing on a week to week basis because of legal, technical, design or time restraints it meant that aspects of the product could be changed or dropped. This added an extra level of challenge as we where designing off a ‘moving target’

I did some quick desk research into current onboarding patterns in the industry, current components I could leverage that were already built in the CS design system, look at the entry points for this onboarding idea, review the current state of the protect product

Flow of different legal or technical constraints

Edge Cases

During prelaunch we currently had a technical and legal constraints. This meant that the product couldn’t be activated unless the user had a verified email address and consented to their data being searched for (This would mean that the onboarding couldn’t be skipped)

Technical Challenges

Currently CS has 3 platforms to work off of WebApp / iOS and Native. The WebApp can be accessed from any browser (Either through the smartphone, tablet or computer) and mainly embraces web patterns, Protect was built for this. During the lead up to launch it was decided that Protect could launch for native but with little time the tech stack allowed for using a feature called “WebViews” which would mirror a web experience in a native app. This was a was great but it did meant our approach to a few things needed to change, we had 1 way to design things that would work across 3 platforms that had different patterns

Sketch file with early ideas to final design

This piece of work went through 5 main iterations from a content / flow / visual perceptive. I will talk about some of the main parts of this process and some of the decisions behind them. Most of the iteration came from feedback either by guerrilla testing in the office, stakeholder meetings, designer forum feedback or talks with the Protect squad

Initial Wireframes

To start with I looked at the core product offering and converted them into wireframes. The designer I spoke with initially helped contribute to this because of the insights he had from user interviews. At this stage it was a combination of user benefits, feature sets and work the product worked

After getting some initial content down I started to look at the content in the wireframes after a round of feedback from the squad and the stakeholders to see what resonated, there where a range of different people with marketing, tech, product or design backgrounds so the input was great

How I approached structure of the onboarding

Refining the content

I observed that onboardings needed to be short and sweet from the research that I did into industry patterns, so I began work on reducing / cutting / combining some of the key content. In order to do this I started to label what each page was doing and put them into categories. Later on this started to give me a basis on what to combine or reorder before some more exploration and guerrilla testing the design in the office

Early flow including some interaction and visual elements

I continued to iterate on the content/flow as well as explore with the visual design (I explain this further later on). Before I started to really refine the flow I added some of the visual elements that an onboarding would have to see what it did to the page

A round of restructuring and refining content

I continued to look at the types of content across the flow, if there was any categories like “How the product works” that where being spoken about too much I started to combine pages or make sure that only 2 pages had a single instance of a theme. Each of these themes represented a solution to a user problem

Because user’s didn’t understand the dangers of ID theft

Why Users Need it

User’s not understanding why a credit service would help with this

Mission

How Protect Works

User’s not understanding how CS can find leaked information

Tutorial

How to action breached passwords if they panicked

Navigation

Patterns to use was a big topic for this work, since it needed to be built on web but work for native we had to find a method which work for 3 different platforms. This in turn made it harder to follow more established industry patterns when it came to onboardings

In the end after getting some feedback from the design team I went with the following navigation pattern after much deliberation. In terms of size difference the choice to have back and skip at the top and 1 primary button at the bottom meant that it worked on small devices well and didn’t break on large screens. The back and skip button being at the top and less of a priority was done because we didn’t want users to press on this, the focus was on the next button

High”lights”

Another aspect of the visual design I explored was the lighting effects to each key slide. As an onboarding would in theory highlight the key features of a product and the torch being the icon of the product, I decided to play around with it during the onboarding and experiment with lighting effects. This was greatly received in the first initial stakeholder meeting

Colour

The design system we have while only partially built had a range of colour variates either through tints or overlays. I wanted to use this to explore more and reflect the material of “dark web”. Most of the app is white / grey but for this 1 time experience I really wanted to separate it from the rest of the app in which I did this while a darker colour scheme

Graphics

I wanted to communicate aspects of the content graphically as it would help further reduce large copy as for onboardings people only tend to skim messaging. I explored different ways of showing theft, data leaks, passwords and other related topics visually

Animation

Animating the onboarding wouldn’t fix the underlying user problems but it would help evaluate the user experience and increase excitement attributes. Alongside developing the content and visual design it was important to see how it would animate incorporating the highlight torch / colours and graphics

Onboarding Animation

So apart from the animation itself being slowed down for stakeholder management reasons this was what the onboarding look liked towards the end of development. I was really proud of it and when I had showed this to folks in the office for guerrilla testing (The sped up version) it was received really well

Enhance user excitement of the product
Invite the user in to the new product
Breakdown proposition a bit more
Have delightful content

Design / Developer Collaboration

I created documentation to enable the dev I was working with as we where pushing the design forward from a visual design and interaction perceptive. I checked with the developer that we had the scope to even do this from a technical perspective but I needed to be clear on what needed to be done. I left nothing up to the imagination and helped define colour mappings in CSS as well as create a system for how we could animate the designs

Scalability was quite tricky for this design, lots of work needed to be done with type sizing and layout to ensure that this design would work for all sizes. Left is the size of an iPhone SE and on the right is the size of a 1920px by 1080px desktop display

Solution without some of the constraints which where present

Trade Offs

Originally I wanted to have the patterns and styling closer to this design but it wasn’t a great choice for a few reasons. This design had little vertical space so on a small screen size the content wouldn’t fit. I also got some comments from other designers that having the tertiary button wasn’t the best choice as it blended in too much with the other text. I was also introducing more new patterns to ClearScore’s UI which made it feel too different from the rest of the app

Part of the initial flow mappings included designs like these which held more value for the user which address dropout and it allow the user more product value on entering. These where cut out early in develop as we simply didn’t have the time to build them but I did create them for presentation purposes

Part 3

Final design / Animation

Drumroll

Final MVP Flow for the onboarding designs

This was the MVP which we delivered across all platforms, this was the best solution we could get to given the constraints

Addresses reducing confusion around the proposition with brief engaging explanations
Handling edge cases with more care with email verification
Highlighting the first step of taking action for users that would overwhelmed
Explains to user how we get sensitive information like this

Outcome

Increased Conversion

For the first few months of it being out it consistently held an increase in activation of the Protect product by 15% compared to the start screen it had before

Increased Reception of Service

This was the driving user need in which the onboarding was created for, we tracked this via survey through CRM channels for people who activated Protect. Over 74% of people who activated felt “Empowered” by Protect with less than 1% saying they were “Scared” in a multiple choice questionnaire

Brand Impact

The visual design of the onboarding pushed the brand forward. The colour, graphics and tone where taken forward for use in marketing efforts such as emails.

Key Learnings / Reflection

Animation was a great and exciting for me / the stakeholders / folks I tested it with but it added work in terms of iterating the flow and content on top of thinking about technical considerations. I really should have nailed the flow and iterated on the content first before starting the ui / animation stage. The animation was something I’m very proud of and it helped define the feature initially within the company

I wish I had done more to understand how the engineer I was working with liked to work, he was from another team with little knowledge of the product we both we from different squads and had never worked together before

Stakeholder management could have gone better, we had lots of push back on small details in the copy and such, looking back I should have separated Visual Design / UI / Animation from UX flows / Copy as that would have made the conversations much more structured. The result of not doing this was that there was more copy than I would have liked on some screens

Pushing the visual design forward had far more of an impact that I thought, marketing took some of the visual work and really pushed it in CRM channels and other materials. The brand was more aligned and my work helped to influence the direction of it which was great

If I were to have an opportunity like this again I would repriotise the order in which I do things, namely do animating after UI was final and engineering ready. I also would have pushed for validating the design with users more, especially before the last round of stakeholder management to position myself stronger why certain decisions I made were justified

(Coming Soon)

Onboarding V2

A few months after launch we revisited the onboarding with more of a research driven approach

Thank you for reading