WonScore-Customer Onboarding


Getting customers to the Aha Moment!


Fig 1: WonScore Homepage Design concepts


Summary

👉Background: Woncore 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 low trial to paid conversion rate.

💡Solution: We solved the problem by designing a new feature- Quickstart timeline concept which increased user engagement and product feature discovery. Additionally we also created a Preview assessment experience met that needs of new users to understand our assessments. Further,the new Dashboard homepage improved customers' access to their data and recognition of product features.

📈Impact: 85% increase in conversion in the following months of trial customers to paid customers (multiple additional factors involved).



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

  • Experienced difficulty recognizing product value.
  • Lacked triggers for engagement with the key activities like testing candidates, adding jobs, and product login.
  • Wanted to understand the candidate assessment experience and reports.
  • Needed in-app help and support resources to set up their account and correctly start using the product.

My Role

I was the solo 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 user centered metodology
  • 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.

Process


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 good UX principles.

Key Activities

  • Define user problem
  • Define business problem
  • Hypothesis creation

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 green field ideas. Through the team’s voting, we selected a few ideas to explore in-depth where created and solution sketches. Based on the team's voting, selected solutions were evaluated and then digitally prototyped by me.

Key Activities

  • Crazy 8s
  • Panel Sketches
  • Stakeholder dot voting
Fig 2: Sketches from ideation sessions


Prototyping

Overall I created multiple design concepts following UX principles like user control and freedom, and system visibility to solve our problem.

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

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

Key Activities

  • Interaction Design
  • Wireframing
  • Interactive prototyping
  • Adobe XD
Fig.3: Overview of prototypes for round 1 user testing
Fig 4: 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 recognisable help resources upfront in the experince to support new customers.

Advocating for the user, I help scope the design work for 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

How proposed solution solved the problem

1.
Quickstart timeline concept increased user engagement and product feature discovery.

Why ?
Our quickstart timeline concept was liked due to its hands-on approach by users. The quickstart timeline contained key value delivery activities to get users to the Aha moment.
How ?
We designed using design principles like Miller's law, need for completion (Nir eyal in Hooked) etc to promote more users to have positive actions on the platform quickly. We tested the particular steps desirable for trial(new) user, the flow and layout as well as the copy with customers and internal stakeholders.

Fig 7 :Overview of Quickstart timeline for mobile devices

Fig 8: Preview assessmnet experience for tablet devices

2.
Preview assessment experience met the need of new users to understand our assessments.
Why ?
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.
How ?
Prototyping and testing wireflows and copy with real users provided deep insights about the desirability of the various pieces of information about the assessment.


3.
dashbord homepage improved customers access to product features, user and account information.

Why ?
This dashboard like homepage provided an easy entry point into the product. Understanding user needs, we frontloaded experiences like testing the candidates, access to their latest job openings, (new) customer account tile, (new) help resources tile.
How?
We designed the home page to improve 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.

Fig 9: Adobe XD mockup of homepage for desktop devices

Challenges faced, including design concepts that were ultimately not pursued

Creating and experimenting design processes

Why ?

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

So ?

  • Defining our process was an exciting challenge due to the size of our team and niche industry that we serve.
  • Planning activities with variety of stakeholders along with their buy-in was challenging.
Fig 10: Illustration of 3 diamond design sprint that inspired Wonderlic design cycle

Too much information for the user

Why ?

Through user testing, we uncovered that the test preview experience was overloading the new userto the platform with more information. This led them to abandon the preview without gaining any better understanding of the tests.

So ?

  • I gained a deeper understanding by obseraving user interact with the prototype.
  • By digging deep, we uncovered most critical pieces of information for the user.
  • This helped me to design a shorter and simpler test preview experience.
Fig 11: Overview of prototypes from round 1 user testing showing extensive information across multiple pages


Do not teach me

Why ?

Users were frustrated about first experiencing content geared towards learning and understanding the product. They wanted to cut to the chase and just start using the prouct.

So ?

We pivoted on our landing page with learning wizards design concept.

Userquote from testing saying that Setting up account is enough work ! I don't want to do more than required
Fig 12: User quote while experiencing landing page


Make help available

Why ?

New users' interaction with the product showed that they needed help at different times. Through interviews, we learned that they wanted to have self-service help resources like FAQ and articles at their disposal.

So ?

  • Designed our onboarding wizards with reduced information and more control for new users.
  • Created new help tile providing easy access to all help resources in one place available through the homepage.
.

Userquote from testing saying that I prefer self-guided information but dismissible whereI have the option of clicking and learning or exiting
Fig 13: User explaing type of interactions with help content


Positive Results: Direct Impact on Conversion

The redesign of the customer onboarding experience has had a positive impact on the engagement with 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 above metrics.

Fig 13: Stock illustration showing conversion © by Freepik


What I learned


I was ⚡challenged at various stages of our design process which ✌pushed me to go beyond exisiting paradigms and methods.
Overall, keeping an open-mind and having transparency😃 in my work and descision 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 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. Design and 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.


TOP