Signup and Onboarding: putting users at the wheel

Helping PitchMe increase retention and engagement through quick signup and a smooth onboarding

mockup of profile page showing level of completion and dashboard with stats

This was a Group Client Project I was involved in as a student on the General Assembly’s UX Design Immersive. It was a 3-week design sprint.

PitchMe: the client

This is how they describe themselves:

“PitchMe is a skills-based talent platform, where anyone can find a job regardless of their background”

Job-seekers connect their sources [profiles like LinkedIn and GitHub] to PitchMe. The platform crunches the data points to validate their skills and find jobs that match.

The final product is the SmartMe profile, a 21st century alternative to the old-fashioned 2-page long static CV.

In case you wish to have a further look, click here:

The Brief

The client listed 3 areas for improvement based on their own hypothesis and assumptions. Therefore the functional scope of this project included improvements to the below:

  • Profile Completion
  • Adding Sources to Profiles
  • Increasing Engagement

As well as a goal to improve experience touchpoints including:

  • Create a more intuitive sign-up journey
  • Improve the overall visual design of the profile to increase candidate engagement and retention rate.

The Team

I had the pleasure to work alongside three hard-working and resourceful designers. Thank you!

mugshots of designers involved in the project
mugshots of designers involved in the project
From left to right: Tashena Burroughs, Katie Chase, Madeleine MacGreevy and myself

My role

A) Keeping a high-level view

  • identifying what should be the focus and what insights to carry forward
  • timeboxing tasks: determining when we had what we needed and could move on
  • synthesising data into key insights
  • crafting a story through the persona, problem statement and copy

B) Designing and Testing different Signup flows

The Design Process

We used the Double Diamond design system to guide us through this journey. It consists of the 4 phases below.

Double Diamond Design process with its four phases
Double Diamond Design process with its four phases
Double Diamond Design Process

1. Discover: identifying the problem(s)

Before anything, we shed some light on a few points:

  • users’ general feel towards CV writing and signing up to job boards
  • what other similar successful job board websites are doing, but most importantly, what they’re doing right.

Screener & Insights Survey

The first step was to run a quick survey to gain insights into how users feel about writing a CV and searching for a job.

We surveyed 59 people, results were not so surprising:

main survey takeaways
main survey takeaways
Main takeaways from the survey.

As LinkedIn is now the go-to place for professional networking, users put a lot of effort into crafting their profiles. So, using it as a starting point to onboard other job sites seems like a no-brainer.

In-depth User Interviews

We invited 8 survey respondents for an in-depth interview to garner more granular data on the subject.

screenshot of user being interviewed
screenshot of user being interviewed
One of the participants carefully considering one of the questions

With so much data in our hands, we distilled the key points from each interview. To read the data more efficiently and spot patterns and trends, we ran an exercise called Affinity Mapping, in which we grouped similar points.

screenshot of our affinity mapping
screenshot of our affinity mapping
Our Affinity Map powered by Miro — each colour represents an interview participant

From this wide pool of opinions, we reached the few key insights below:

main interview takeaways
main interview takeaways

Next was putting the existing PitchMe design under our lenses.

Contextual Inquiry: putting the current design to the test

screenshot of user and designer during a usability testing session
screenshot of user and designer during a usability testing session
A test user walking us through her onboarding journey

Based on our research, we decided to have a few users — 8 in fact — go through the existing design and share their thoughts with us. These are the main takeaways:

  • Most test users never realised there was more information below the fold, where a definition of the SmartMe profile can be found.

“Oh, I hadn’t noticed there was more below here.”

  • All 8 participants completely overlooked the progress bar on the right.

“I wasn’t sure how much I had completed until towards the end, when I noticed the progress bar on the right-hand side.”

  • The data pulled from sources was highly inaccurate and only editable at the very end of the sign-up.

“The skills and experience listed don’t completely match what’s on my sources and I can’t edit them.”

Competitive Analysis: what is the competition up to?

Altogether, we signed up to over 15 similar boards but focused on, Otta and Hackajob.

At first, I felt we would be comparing apples and pears, as job boards’ USPs vary wildly. That was our first rabbit hole, and it was only fun for a while. After nearly two full days of going over every detail, I realised that focusing on key aspects, such as communication and transparency, would better use our time.

  • Clear Road Signage: progression is clearly and elegantly communicated.
On the Top and from Left to Right: classic progress bar position on the screen and behaviour
  • Data Privacy: accessible and easy to understand policies.
GDPR-aligned data privacy and usage

2. Define: setting a baseline

Overwhelmed by data points and approaching the point where we started going around in circles, the Diamond whispered in our ears “time to move on, folks”.

So, we summarised:

  • Who’s the User
  • What are their Pain Points
  • The Problem

Persona: our average user

There was a debate around the need and relevance of a persona in the project. However, we concluded it was worth getting one down, as it would be a good reference point and save us time in the end. Also, the client kind of gave us a high-level view of their average user: career changer in their thirties with a squiggly professional path, i.e. buckets of legacy and soft skills.

We crunched all the main points distilled from the surveys and interviews and synthesised them into a Persona.

Let me introduce you to Camilla — the fifth member of the group.

Our persona’s headshot card with behaviour and habits, pain points, needs and goals
Our persona’s headshot card with behaviour and habits, pain points, needs and goals
The average user and their behaviours, needs and pain points

We ended up spending way longer than forecast writing this persona. I believe the sheer amount of information and the fear of leaving crucial points behind were to blame. I suppose that’s intrinsic to the nature of the Define phase, where you have to wave ideas goodbye.

Experience Map: the common path and feelings.

To make everything more tangible, we described Camilla’s emotions and thoughts during her journey signing up to PitchMe.

After a few text-heavy versions, we managed to reach the lean map below:

experience map showing user’s journey when using current PitchMe’s design
Experience Map showing Camilla’s actions and emotions when signing up on PitchMe’s existing flow

Problem Statement

Happy with how concise the Experience Map was, little did we know what lay ahead: another distillation exercise that proved a real puzzle.

We had written ten versions, and we started to feel tired and slightly demoralised. So, I broke it down into bullet points to be more digestible and applied a well-known template [user needs…because…XYZ]. And the statement below suddenly sprung into existence.

Camilla needs an intuitive onboarding process that communicates the value of the product so she feels that’s worth investing her time and energy.

We put it aside for a couple of hours and got feedback from the instructional team. It aged well, and the feedback was “That’s it. You got it.”

3. Develop: ideating solutions to the problem

Design Studio: getting the creative juices flowing.

We invited the client to a Design Studio: a group exercise where we’re encouraged to let our ideas run free.

It can be particularly beneficial when you hit a creative wall or, in this case, you want to engage a team or stakeholders in the ideation phase.

It was a fun and insightful session that produced all sorts of outlandish ideas, which we drew on along the developing phase.

Signup Process

Informed by research, we first designed a short 2-step flow consisting of entering login details and answering a few questions.

We were quite settled for that when I suggested bringing forward steps from the profile completion into the signup flow. We brought forward the Source Linking step.

I just wanted to test how much we could get away with. My rationale was that users would probably be thrilled to see they had already made some progress by the time they were through with the signup process.

signup flows — short and long — A/B testing
1st mid-fidelity iteration of the 2-step and 3-step Signup Flows.

Yet, 75% of users wanted an even leaner flow — that’s how the 1-step flow was born.

preferred signup flow: an even shorter flow
Quick 1-step Signup Flow

Progress Bar

Since it’s one of the key visual elements in the profile completion flow, we paid special attention to the progress bar's design. We started with a traditional numbered design.

one of the progress bar iterations and the feedback provided by users

All 6 test users found this first iteration “overwhelming” and “confusing”. Also, they raised questions the design could not answer. We stripped it right down by:

  • Making it solely informative.
progress bar high fidelity iteration: making it solely informative
Simple and informative Progress Bar
  • Surfacing progress milestones, so users immediately get it and feel a sense of achievement by hitting them.
progress bar high fidelity iteration: surfaced milestones
  • And indicating the status — complete or incomplete — of each section.
progress bar high fidelity iteration: added icons to the tabs

Here are some comments test-users made on this final version:

“I love the visual design, it’s clear and easy to understand”

“It’s so good to be able to choose when to go live” [referring to the Not live/Live toggle on the top right in the main card]

“Oh interesting you can put yourself in the employer’s shoes and view your own profile from their perspective. This is cool!”

4. Delivery: the product

To determine whether our new design tackles the issues detailed in the brief, we need analytics, which can only be obtained if the design goes live.

That being said, looking at all the Discovery phase results and comparing the new design's main features […]

  • one-step signup
  • a clear progress bar and milestones
  • user has full control over their journey

[…]with successful competitors, we have strong reasons to believe we would see a steep increase in those stats.

For the client, the highlights were the new user interface and that both of our sessions — briefing meeting and design studio — were so well-structured and well-run. However, they questioned whether the new flows would ramp up engagement and retention.

Want to see the final prototype? Click here.

Next Steps

  • Education and Training: develop a courses page to guide users in career progression.
  • Gamification: use challenges and tasks to engage users and help them upskill.
  • Dashboard: develop the progress bar into a dashboard once the profile is complete.

My own takeaways

  • Keeping a high-level view and timebox tasks are crucial, especially when there’s a lot to be done in a short time. I’ve realised keeping a high-level view comes naturally to me.
  • The team had a good skill balance. That was extremely helpful when divvying up tasks but challenging, as each approached problems from different angles. That meant sometimes I felt we were talking about different things.
  • Usability testing can be tricky because designers must not lead test users but still need them to perform specific tasks along the journey. So, some gentle nudging is sometimes necessary.

UX Designer⎮User Researcher⎮Storyteller