How we Created a Delightful Onboarding Experience

Sage Design
Oct 19, 2020 · 13 min read

At Sage, we pride ourselves on putting customers first and, to do that, we need to work together to get the very best results.

Teamwork is particularly important when it comes to product design, which benefits from drawing on the expertise of many disciplines — from user research to product design, illustration and content design. When combined these disciplines create a mighty force focused on end-to-end user experience.

When working together, everyone needs to have a clear understanding of user needs and to agree to the scope of the design challenge at hand. For each team member, knowing how and when to engage is crucial to effective delivery. It’s no surprise, then, that product design is often referred to as a team sport.

But what does this all look like in practice?

The Project

A good example can be found in a recent project to improve the in-product onboarding experience in .

First impressions count. It’s estimated that 40 to 60% of those who sign up to a product will simply leave if they find the first five minutes too much like hard work. In a world where our interactions are increasingly digital and highly polished, user expectations are on the rise.

As Des Taylor, cofounder at , a tool for delivering messenger-based experiences, explains:

“Onboarding was and is the one truly universal problem every piece of software has. It’s the only one thing literally all your customers are going to do, and you’re guaranteed thousands of your users will run into some kind of difficulty with it.”

Onboarding is about setting the scene — explaining what the user needs to do in a logical, progressive way, in just the right amount of detail. Telling the user what they need to do, perhaps why they need to do it, and how, is key to a user being able to get the things they need to do done — whether they know what these things are, or not.

In Accounting, the Getting Started tab was a crucial part of the onboarding experience. It started out as a small collection of links to the key areas of the software a user would need to engage with to set up the product. Over time, as features were added, the list felt daunting, illogical, and as an overall experience was clearly ripe for improvement with no visuals or gamification applied.

How could we create a seamless experience, helping a first-time user transition from the marketing site, through sign up, into a brand new, first time use journey within Accounting?

The Team

In looking at the design challenge it was clear that the project would benefit from expertise in user research, product design, illustration and content design. So, we assembled a team.

Luke Emmerson-Finch is a Senior Product Designer with a background in interaction, visual design and user research facilitation. He’s been at Sage for 5 years and has worked on many apps across the Sage portfolio of products: from our Accounting and Accountant’s CRM to Sage’s Design System more recently. On this project, Luke would serve as Design Lead, providing interaction and UI design, prototyping, research facilitation and front-end development work to build the final design, calling on Patrick, another designer to help progress design ideas.

Michelle Hird has been working as Sage’s Lead Illustrator for two years. She has a varied creative background from e-commerce and marketing to editorial projects. At Sage, she has established an entire illustrative ecosystem, from characters to iconography. On this project, using a series of specific spot illustrations, Michelle would be able to flex the Sage illustration approach to its full potential — proving it is a tool that helps boost usability through explanation and clarification.

Richard McPartland has worked as Senior Content Designer at Sage for over 2 years focused on the Accounting web app and the accompanying mobile app. He’s helped establish content principles and guidance for the effective application of voice and tone as part of the Sage Design System. On this project, Richard would be able to choose words carefully, strike the right tone and make sure things were clearly described and logically ordered and the accompanying help and support materials were easy to follow and answered common queries.

The Starting Point

Accounting’s existing onboarding experience provided a wealth of useful information to dig into. Drawing on analytics, Luke was able to overlay a heat-map showing how users engaged with the existing experience. Warmer colours (reds and yellows) indicated popularity, cooler shades (blues) showed the less popular options. This allowed the team to start thinking about how things should be ordered and whether links could or should be omitted in the new experience. We were starting to get a first look at what users actually needed when getting up and running with the software.

Luke, Richard and Patrick also explored how competitors deal with similar design problems and how their approach might help highlight common conventions to help revamp the experience in Accounting.

Key themes to emerge included:

  • The use of step-by-step journeys to make tasks feel more manageable and structured, rather than showing everything all at once.
  • The use of progress bars to manage expectation about task length and encourage completion.
  • Rewards for completing tasks. Dropbox, for example, gives users free storage space as an incentive once tasks are completed.
  • The ability to dismiss the experience. Ideal for expert users who don’t need handholding.
  • Signposting of relevant help articles to allow users to more fully understand a topic or take the next steps.
  • The use of ‘friendly’ language to encourage and reassure, with clarity of meaning and purpose.

Designing the End to End Flow

Our competitor analysis sparked a range of ideas and thoughts about how we might apply these approaches to Accounting. Luke and a fellow designer, Patrick, started to sketch out initial ideas as low fidelity wireframes.

The heat-maps and in-product analytics gave a good indication as to the most popular areas of the existing experience which allowed Richard to start thinking about the content that should be included. Additional analytics from visits to our online support topics started to paint a picture of what was most popular and the areas where people needed additional help.

The experience would have to cater for lots of different types of users like novices with no experience with Accounting software, and those coming from other systems. With only one experience to be developed, Richard started exploring how the needs of a wide range of users could be balanced and how separate experiences might develop in future. As ideas took shape, terminology and tone were explored to ensure clarity and consistency (with product, with Sage.com and the wider world), and a list of amends drawn up to help make the signposted content feels like part of the bigger experience.

With a clearer picture of what would be delivered, and how it would be built, the team shared initial thoughts for feedback at a design critique (a meeting of design professionals where designs are explained and feedback gathered on how well they meet user needs). With this feedback further informing approach, the design team went on to mock up two high fidelity prototypes.

Prototype one

This prototype explored the use of a bar overlaid on the bottom of the screen in Sage Accounting to present multiple key tasks in one go — participants could select whichever task was most meaningful to them in order to begin their onboarding journey. Content drew on heat-map data and competitor analysis with a blue colour chosen to identify content relating to ‘first tasks’ which ties in with the existing treatment on the product’s online help site.

The idea was to keep copy and iconography as simple as possible. Our assumption was that by focusing on high value onboarding tasks and slimming down the available options, visual treatment and copy, users are more likely to convert from trial to subscription. This focus would allow users to more easily get up and running, set up their data, and see the value that the app provides.

Prototype 2

This prototype used the same tasks showcased in the first but in a linear order with a different visual treatment applied and tweaks made to content to better fit the presentation. Here, an overlaid sidebar was used with a white background. The team wanted to put the content at the heart of this design. The ambition was to ‘talk’ to the user in a friendly way to make the tasks seem manageable and provide a feeling that we’d be with them every step of the way to increase confidence and conversion.

In this prototype we explored the use of marketing-based illustration as a way of making the treatment seem more compelling, and to soften the appearance of a wall of text. The hope was that this would increase engagement and reduce trial user drop-off. Using illustration also acted as a ‘bridge,’providing a familiar link from the Sage.com marketing site into the product itself.

Testing

The team were keen to check on the suitability of their proposed solution before committing to code. So a user research session was set up to gauge reactions and make adjustments.

A discussion guide was created to help steer the sessions, with the team asking users to undertake the tasks featured in the prototype. Questions ranged from ‘how would you send your first invoice?’ and ‘how would you import your data from another app?’.

The sessions also gathered thoughts about the aesthetics and content of both prototypes to see which users preferred: a streamlined, minimalistic approach, or an experience that included more supporting copy and detailed illustration.

Luke facilitated the session and a designer acted as scribe to ensure feedback wasn’t missed.

Our Findings

Here’s some key recommendations from our research sessions:

Include illustrations. 3 out of the 5 users surveyed enjoyed the approach, but we were also reminded that users didn’t want images or copy to get in the way — they wanted to start interacting with the app quickly. We were also keen to tell a more coherent, consistent story with bespoke artwork substituting the images in the prototype to tie the experience together. .

Make the experience easy to turn off and on. Our testing showed that many users found it difficult to relaunch the onboarding overlays. It was clear we needed a more obvious way to turn these on and off.

Use a step-by-step approach to present the content. All but one of our participants preferred a sidebar over a bottom bar due to feeling overwhelmed with options on Prototype 1. We also decided to left-align the panel to ensure the Getting Started tutorials were the first thing that users would see after log in.

Explore a more personalised approach. All participants told us they would value an experience personalised to their particular type of business. The team were convinced that the one-size-fits-all approach still offered significant benefits and would improve user experience so could be launched, but were keen to explore personalisation options in later iterations.

Clearly, the Getting Started experience was a key one to get right, so we needed to share the insight we’d gained from users to explain the changes we were proposing to make. This would allow other teams to understand and support the approach and to provide their own feedback too.

Iterating on Our Ideas

The team were now equipped with the insight and confidence they needed to deliver a much improved experience and were keen to move quickly. At the time, resources were already allocated to big ticket features which would have delayed the changes. However, thanks to a tool called , it became apparent that the team could build an interactive experience in code and then launch it in the product.

With a clearer idea of the content to be included, Richard set to work determining an order and hierarchy. Our new experience would include an introductory panel to enthuse and excite users about the journey they were about to undertake. There would be quick links to invite an accountant (for some, the setup process is something that is guided by their own advisors). Additional panels would then explore connecting a bank account, creating invoices, adding products and services, accessing Accounting on mobile, and turning on card payment. A final screen would provide links to next steps and advanced setup. Help links would be present throughout.

Luke also created an opening video which aimed to introduce the core features we would take the user through during our new onboarding flow. This would be embedded in the home panel of the journey and would act as a nudge to encourage users to start each onboarding tutorial or at the very least encourage engagement for those not interested in hand-holding tutorials. Metrics for this video would be measured and drop-off monitored with regular tweaks and seasonal videos embedded.

The marketing video that Luke created.

Introducing Illustration

It was now time to apply illustration. Michelle had already been hard at work exploring how other SaaS companies — particularly those focused on small business — were using illustration. Her work on the Sage Design System had already resulted in a distinctive style and approach that was aligned with Sage’s broader design principles (that experiences should be clear and guiding, reassuring and trustworthy, adaptive and contextual, and delightful and useful).

Research shows that illustration helps to reinforce the content being presented, which in turn enhances usability, so we were keen to make these screens as appealing as they could possibly be. With a clearer understanding of the tasks that were to be included in our onboarding experience, and how these tasks would be broken down, we were able to turn to Michelle for more appropriate illustrations for each onboarding task.

The images used so far had focused on people, but Michelle was also keen to explore an alternative approach focused on personification of objects — giving human qualities to non-human things, like a mobile phone or tablet. While there were advantages to the approach, on balance the team felt that having a character, a human, helps create an emotional connection with the user, more effectively reinforcing each step and keeping engagement levels high.

Almost like telling a story, we decided to use the same character so the customer would know they were on the right path and had a sense of progression and achievement. By creating an aesthetically appealing set integrated into the UI, the consistent visuals throughout onboarding give users an emotional user-friendly experience. Basing the character on one of our fellow XD team mates, Jose, made the process all that more special.

­

Coding up the Journey

With visual and textual assets complete, it was time to build our new experience.

Using HTML, JS and CSS, Luke stitched multiple ‘Pendo’ guides together, taking the illustrative prototype as a blueprint to build from, while remaining mindful of technical constraints.

A browser plug-in made it easy to move from design to code so we didn’t have to redesign elements in our Sketch illustration tool — as changes were made, we could work directly in code to save time.

Using Pendo meant that the only code needed from our development teams was the deletion of the old onboarding experience. Everything else was handled within our design team, allowing for a rapid release to customers.

The Big Release

Our new onboarding experience went live in product in June 2019.

The team are proud to have taken what had become a poor experience and apply some design thinking to deliver something better. Using insight gathered from A/B qualitative testing, and repeated use of quantitative data such as heat-maps and clickthrough analytics, we were able to create an experience that we were sure would help convert customers based on real-world insight.

The project has also served as something of an exemplar when it comes to collaboration. Joining up the in-app teams with marketing helped deliver a coherent experience — allowing illustration to provide a coherent ‘bridge’ between marketing experiences and what a user encounters in-app.

The project also serves as a prime example of how thinking about content from the start delivers a much better result. — no more crowbarring words into spaces at the end of the process. What the user needs to know is the most important thing and should be considered upfront, with the words and design coming together to present material in an easily-absorbed and engaging way.

Speed of release was very important for this project. By taking the high-fidelity prototypes and then tweaking the designs in-browser, we were able to move fast and release quickly without the need for development team support. This kept our development teams focused on delivering our features roadmap, but gave us the ability to still deliver a much improved user experience

Stats comparing our prior experience show a 14.9% uplift of trial-to-buy users, showing how valuable this latest onboarding experience is (Average conversion figures from June - September 2018 compared with June - September 2019). It’s for this reason that we’ve contributed this pattern to the Design System website, allowing design teams looking at similar problems to quickly deploy a similar solution.

There’s much more work to be done, but this project designed out some pretty painful experiences for users getting to grips with our software. We’ll keep monitoring use and feedback to better understand drop-off and conversion, and deliver new iterations of the experience to help get users off to the very best of starts with their Sage Accounting journey.

Sage Design

Sage’s creative core, sharing our stories, process, insights and inspiration