Sapling: Preboarding Redesign

Led a redesign one of Sapling’s core user journeys, leading to a 40% drop in task completion time and an increase in NPS.

  • Role: Design Lead
  • Platform: Desktop and Mobile

Problem and Background

Using Sapling’s Preboarding tool, new hires can:

  • learn more about the company they're changing
  • fill out employee records such as food allergies, or social security
  • sign documents
  • complete tasks before their first day
  • Marvel

Preboarding is a core workflow for all Sapling customers, and often the first touch experience for Sapling users, so it’s important that we closely monitor how people are using it . During a product planning meeting, we dug into the overall completion time of preboarding and noticed it was much higher than anticipated -- approximately 14 minutes on average per user.

We knew end-users were struggling, but couldn’t quite understand why. Was the process too long? Was the terminology used confusing? We had several open questions and needed to refine the scope of the project before moving forward.

Research

We kicked off our design process using a customer journey map to better empathize with some of the potential pain points that new hires were facing.

This was a great exercise for team alignment, but still not enough for me to start putting together designs.

We followed up with a series of interviews to get detailed, tactical feedback directly from new Sapling users. Initially this was a challenge, because as is the case in most B2B software companies, the users and buyers are not always the same people. Although HR and People Ops folks were the ones making the purchasing decision, they made up less than 1% of all Sapling users.  It was rare that our product team had a chance to speak to new hires, and it was starting to show in our product.

Using Intercom, a customer engagement tool, and Blazer, a business intelligence tool, I identified a list of 100 users that had been onboarded using Sapling within the last 30 days, and then reached out to them directly from the Sapling app. I scheduled interviews with 6 people, and had a moderated discussion around their first 30 days at their new job. Key focus areas:

  • Amount of information presented: Were they being asked too much before day one? What about during their first week?
  • Brand trust: HR data is sensitive, did new hires trust Sapling with it?
  • Sequence of pages: Was the order confusing? If so, would adjusting it lead to faster completion times?

Scope

Following our customer interviews, we synthesized our findings and were able to identify several recurring problems that seemed to occur for new hires:

  • They were overwhelmed and anxious already as it is before their first day at their new job, and felt that being asked to complete a bunch of tasks (via Sapling) was adding to that unease
  • They couldn’t distinguish between required and option fields. For example, they might see a list of 50 form fields, and the existing design
  • The vertical stepper we had in place for form completion was difficult on mobile (30% of users). The click targets tended to be small, which led to mistakes when filling out personal details
  • They had no idea what Sapling was

As this was a design driven project, a traditional spec (or PRD) wasn’t in place just yet. With support from both our Head of Product and Engineering Team Lead, I began to audit every interaction and page within the user flow so that I can inform the design updates we would eventually implement. I also ran an internal card sorting exercise where participants grouped together "jobs to be done" during preboarding.

To ensure that my suggestions didn’t distract from the user goals, I listed out our user stories based on the card sorting exercise, as well as raw customer feedback:

  1. As a new hire, I want to learn about my company’s mission and history, so that I can feel connected to the org.
  2. As a new hire, I want to sign any important documents before day 1
  3. As a new hire, I want to upload any required files, such as a passport copy
  4. As a new hire, I want to complete my personal information for my employee record
  5. As a new hire, I want to introduce myself to my new coworkers
  6. As a new hire, I want to upload a photo of myself to my Sapling profile
  7. As a new hire, I want to complete any assigned tasks on time, so that I could make a good first impression
  8. As a new hire, I want to connect with my managers to better understand what success looks like

At this point, I was feeling confident in the overarching themes we pulled out from the research, but it was time to get more tactical. I took a video recording of myself going through this flow completely from the beginning, starting from the Sapling invitation email all the way through step 5 of preboarding, and carefully made notes as I re-watched it. I ended up with a list of about 25 improvements (big and small), so I wanted to be extra intentional about what was important for this first iteration of the redesign. 

Design

We prioritized a list of about 12 UI and UX improvements to this flow, but for the sake of brevity I will highlight a few below:

Added photo cropping functionality:  

We discovered that end-users, especially because they are new employees at a company, were extra sensitive to their profile photos. They wanted to make sure they made a good first impression to existing team members. At the time, photos were uploaded to Sapling as they were, without the ability to crop, zoom or rotate. After consulting the engineering team, I was able to propose a plugin that we ended up utilizing to build out basic photo editing functionality to our preboarding flow

Refactored the sequence and layout

• Removed an entire step (the “overview” page) after realizing users spent less than a few seconds on it on average

• Regrouped all presented input fields to align with a simpler mental model of data. The data was separated into two buckets: public information that coworkers can see (such as fun facts, or preferred pronouns), and private information that is limited to the user and their HR rep (emergency contacts, date of birth)



Added error validation on the fields

• Existing solution lacked clarity around required versus optional fields. Observed  users scrolling quickly up and down the page to locate what they were missing, in order to proceed to the next step

• Instead of disabling the “next” buttons, we kept them clickable at all times. If someone missed an input field, there was now a dynamic dialog that informed them what they were missing.  For extra reinforcement, we highlighted the missing fields in red to make them more distinct.


Fully optimized the full flow for mobile

Accounted for 15% of users. Prior to this redesign if users would login via mobile, they were taken to a 404 page, and would usually drop off or reach out to support for help

Shipping

As preboarding was one of our most used, and most important flows across the entire app, it was important that we got the feature out quickly to measure its success with customers. We decided to do a limited roll out for a portion of our Onboarding customers.

After a week, we saw a sharp decrease in the number of customer support tickets submitted about this process. Because of the simplified layout (and the removal of an entire step), we saw a drop in completion times: from 14 minutes on average to 10 minutes. After closely monitoring our changes for a week, we decided to open this up to 100% of our customer base.

Takeaways

This project  helped me build greater empathy with Sapling's users. Up until this point, our team was focused on building out admin-facing features. Sapling's admin persona is usually the person driving the sales process (as is the case at most B2B cases), so it was a great reminder to design for all user types.

Through our conversations with some end-users, it was reiterated that a good chunk of their new job anxiety was caused by the fear that they were doing some thing wrong. Long, tedious forms, such as the one that we originally had in our product was causing to this stress. There was a lack of clarity in how input fields were laid out, and the labels were not guiding users towards a successful experience.

More importantly, our team was reminded that privacy is a huge concern if we’re asking users for any personal information. At times, it wasn’t immediately obvious why a piece of information (such as a personal bio, or SSN) was needed in new hire forms. Although we aim to make Sapling flexible for any team, it was important that our product design still had the right guardrails in place to protect users from feeling stressed.

    Read next case study