Onboarding customers for a SaaS product

Getting customers to the Aha Moment!

WonScore Homepage Design concepts

Summary

Background: WonScore from Wonderlic is a B2B product that helps employers recruit the right candidates using data and Industrial-Organizational psychology. WonScore provides in-depth insights into a candidate’s fit for the job through its assessments. WonScore is used by HR, recruiters, and hiring managers at various companies across different industries.

Problem: Our product had a low trial to paid conversion rate.

Solution: Through the iterative design process, I improved the introduction of the product. New interactive elements increased user engagement and reduced time to engage.

Impact: 85% increase in conversion from trial customers to paid customers. Reduced the number of calls to the customer support team.

Role: I was the sole UX designer on a cross-functional team of a developer, a user researcher, a product owner, and a business analyst.
I was responsible for

  • Leading design with a user-centered methodology
  • Determining the overall design direction while partnering with the rest of the team on ideation.
  • Evaluating the designs with stakeholders by partnering with the user researcher.
  • Designing the mockups for dev handoff as per the technical and product constraints.

Duration: 4 months

Tools: Adobe XD, Survey Monkey

Solution

Quickstart timeline increased user engagement and improved product discovery

Users like the quickstart timeline due to its hands-on approach. The quickstart timeline contained key activities to get users to the Aha moment.

Design principles like Miller’s law, need for completion (Nir Eyal in Hooked), etc were used to promote users to engage on the platform.

We tested the particular steps desirable for the trial(new) user, the flow and layout as well as the copy with customers and internal stakeholders.

Overview of Quickstart timeline for mobile devices

New preview assessment experience


The experience explained to the user in simple terms about each of the assessment sections. Showing the overview of the assessment quickly communicated the workflow and other UX value-adds like language selection, help options, and ability to take breaks.

Prototyping and testing wireflows and copy with real users provided deep insights about the desirability of the various pieces of information about the assessment.

Preview assessment experience for tablet devices

One stop dashboard/homepage

This dashboard like homepage provided an easy entry point into the product. Understanding user’s JTBD, we front-loaded experiences like testing the candidates, access to their latest job openings, (new) customer account tile, (new) help resources tile.

The home page improved the visibility of product value and features.

Understanding trends of personalization seen across many SaaS products, we incorporated design elements to make users feel connected to the product and the homepage.

Adobe XD mockup of homepage for desktop

Process

1.Discovery Research

2.Define Problem

3.Ideation

4.Prototyping

5.User testing

6.Mockup design

Discovery Research

Customer surveys(n =26) showed that both trial and paid customers found the product easy to use; however, trial customers were unclear about the value proposition of the product. Both cohorts preferred a hands-on approach of trying out a new product themselves to learn about it.

Using market research and competitor analysis, we created a list of best practices and experiences for onboarding which provided broader understanding as well as design inspiration.

Key Activities

  • Customer Surveys
  • Market research
  • Competitor Analysis
  • SurveyMonkey

Define Problem

We defined the user problems and the business problems using the research data, business strategy, and product strategy.

I collaborated with business analysts and product owners as the voice of the user by advocating for user needs and general UX principles.

Key Activities

  1. Define user problem
  2. Define business problem
  3. Hypothesis creation
PROBLEM AND HYPOTHESIS

Our product had a low trial to paid conversion rate. Based on product usage analytics and interviews with our customer support teams, we hypothesized that –

Trial(new) customers

1.Experienced difficulty recognizing product value.

2.Lacked triggers for engagement with key activities like testing candidates, adding jobs, and product login.

3.Wanted to understand the candidate assessment experience and reports.

4.Needed in-app help and support resources to set up their account and correctly start using the product.

Ideation

As a team after consuming the research insights, we brainstormed design ideas as sketches, low-fi wireframes, user flows.

We used design sprint activities like crazy-8s to generate a large number of greenfield ideas. Through the team’s voting, we selected a few ideas to explore in-depth were created and solution sketches. Based on the team’s voting, selected solutions were evaluated and then digitally prototyped by me.

I organized, introduced, and facilitated the crazy 8s and panel sketches with the PM.

Key Activities

  1. Crazy 8s
  2. Panel Sketches
  3. Stakeholder dot voting

Fig 2: Sketches from ideation sessions

Design principles

I formulated 3 design principles to guide design directions for this project. These were based on sketch and panel presentations as well as the discussions that followed.

Approachable

To a new user, being friendly and approachable will ease frictions and make it easy to ask for help.

Informative

As a social sciences product, it is difficult for a new user to grasp the value. Similar to a guided sales demo, a guided onboarding tutorial will give the user a comprehensive understanding of the product.

User freedom

Respecting trial users’ time and adhering to usability principles by allowing users to leave flows and interactions.

Prototyping

Working closely with the user researchers, I prototyped various happy solution design concepts to test our problem-solution fit.

Overview of prototypes for round 1 user testing

I organized design review sessions with product managers, user researchers, and business analysts to iterate design with increased collaboration, communication, and alignment.

Overview of prototypes for round 2 user testing

User testing

Overall, we conducted 2 rounds of external user testing with 5 and 7 users respectively as well as 2 rounds of internal stakeholder testing with 13 and 17 stakeholders respectively.

After drawing insights from data using affinity mapping, overall design concept acceptance rating, quadrant analysis, we prioritized our final design concepts.

Key Activities

  • User Research protocol design
  • Remote Prototype testing
  • Silent Feedback Method
  • Affinity Diagramming

Fig 5: Affinity map of observations from customer testing

Mockup designs

Designed visually appealing experiences for trial customers to quickly get them started in using the product to reach their aha movement. Added easily recognizable help resources upfront in the experience to support new customers.

Advocating for the user, I help scope the design work for the sprint with Business analyst and the Product.

I used data from user research, usability principles and known user pain points. Guided the engineers during development by communicating and discussing the UX and UI designs, decisions and feasible trade-offs.

Key Activities

  • UI design
  • Visual design
  • Design Specs
  • Designer-developer collaboration

Challenges faced

Creating and experimenting design processes

This was our first design cycle project (a custom design process) at Wonderlic.

Defining our process was an exciting challenge due to the size of our team and niche industry that we serve.

I organized a lunch & learn for the product team to discuss the converging and diverging design approaches represented by the second and third diamond in the 3D process.

Illustration of 3 diamond design sprint that inspired Wonderlic design cycle

Too much information for the user

Through user testing, we observed that users usually avoided or abanded the guided assessment preview without gaining any understanding of the assessment.

I gained a deeper understanding by observing the user interact with the prototype and then probing them to get to deeper insights.

I was able to make design improvements faster due to active participation in interviews reducing the time spent in interpretation and knowledge transfer.

Overview of prototypes from round 1 user testing showing extensive information across multiple pages

Do not teach me

Users were frustrated about being thrown into a WonScore learning experience.

They wanted to cut to the chase and just start using the product.

I help water down the learning experience through wizard style walkthrough with an easy way out.

User quote while experiencing landing page

Positive results: direct impact on conversion

The redesign of the customer onboarding experience has had a positive impact on the engagement with the product, value discovery, and conversion rate, at the time of writing (2 months since launch).

  • Number of trial customers who created job openings increased by 9.2%
  • Number of trial customers who tested at least one candidate using WonScore increased by 7.7%
  • Upto 85% increase in conversion in the following months of trial customers to paid customers (multiple additional factors involved)
  • Because we have help resources available upfront on the home page, we have seen a reduced number of calls to the customer support team.

For confidentiality reasons, I have omitted the actual values for the above metrics.

Lessons learned

I was challenged at various stages of our design process which pushed me to go beyond existing paradigms and methods.
Overall, keeping an open mind and having transparency in my work and decision making helped gain design solution alignment.
I enjoyed using a prototype-test approach to discover problems with our design and iterate cheaply.

  1. Test with real users: Because of this project, we realized the importance of external user testing as it provided us with contrasting feedback on our interactive guided paths design concepts when compared to the internal stakeholder testing. The interactive guided paths were found to be informative and useful by internal stakeholders but undesirable by external stakeholders.
  2. Use proven UX methods but also improvise as needed: I proposed using the talk-aloud method for testing prototypes with external users which proved highly valuable to get more specific and genuine feedback. The interviewer was able to follow up with appropriate questions due to the increased interview engagement to uncover deeper insights about the design concepts.
  3. Communicate research insights to all stakeholders: I lead the team to create a hierarchical affinity diagram to view themes in our research data which helped design interactions and concepts, informed product strategy to the product and business stakeholders as well as helped build empathy and understanding of the user for the engineering team.

Featured image attribution: Business vector created by stories – www.freepik.com

Thank you for reading!

Scroll Up