Kenji Kaneko
 

SalesLoft

Insert availability: A more effective way of scheduling meetings

 
 
Insert Mockup
 
 


OVERVIEW

In 2018, I worked for SalesLoft, a top Atlanta-based SaaS startup that helps salespeople be more efficient in their work. One of my projects was working on feature to improve the way that the 20,000+ salespeople who use SalesLoft on a daily basis schedule meetings with their prospective clients and colleagues. Working with my product managers and engineers, we created “Insert Availability,” which allows a salesperson to easily insert times into an email for when they and/or a colleague are free for a meeting.

 
 

ROLE: Product Designer

 
 

TEAM: Product Manager, UI Engineer, Full Stack Engineers

 
 

TIME: Sept - Oct 2018 (6 weeks)

 
 

METHODS: Interviews, Competitive Analysis, User Flows, Sketching, Wireframes, High-Fidelity Comps

 


PROJECT MOTIVATION

The SalesLoft platform had a way for our users to book meetings with their prospects using a Calendly-style method where a salesperson would have to place a link into an email such as “Book 30 minutes with Samantha” and the client would then be taken to a web page to pick a time that works for them. However, the research team found that this required an extra amount of effort from the client to schedule this meeting and we needed a way to make the scheduling process more efficient.

What if we could make this meeting scheduling process easier by having our users select the times that work best for them and put it into a format that was also easier for the clients to engage with?

From a business perspective, more successful scheduling of a meetings leads to higher sales for the individual salesperson and more value gained from using our platform (higher retention).

 
 

FEATURE WALKTHROUGH: INSERT AVAILABILITY

Insert Availability is used for when our users wanted to curate select times for a meeting and insert those into an email with a prospect. Below is a walkthrough of how the feature works (only displaying the happy path and thus not including empty states, error screens, and alternate paths which were also designed and implemented for this feature.)


STEP 1: START RIGHT WITHIN GMAIL

When a user is in the middle of typing an email to a prospect, they can activate Insert Availability to place potential meeting times right into the body of the email.

 
 
Insert Availability is just one of the features that our users could insert into an email

Insert Availability is just one of the features that our users could insert into an email

 
 


STEP 2: CHOOSE THE WHO AND THE WHEN

Once they hit the Insert Availability button, it activates a modal to choose whose calendar to book this meeting on (the sender or a work colleague) and the times.

 
 
Step 1 - SL.png
 
 


STEP 3: DRAG THE TIMES

Users can easily drag onto the calendar area which times they will want to appear into the email. There is a visual indicator to show if there is a conflicting event.

 
 
Step 2  - SL - Drag.png
 
 


STEP 4: AVAILABILITY INSERTED

The times get inserted right into the email where the prospect can easily click on any given time to book or see this list of times in their own timezone (which brings up a separate view).

Step 3  - SL - Times insert.png


STEP 5: THE PROSPECT’S RESPONSE & SUCCESS

Once the prospect receives the email and clicks on any of the given times for them, they are welcomed with a success message.

 
 
Step 5 - SL - Booked.png
 
charcoal.png
 

DESIGN PROCESS

 
 

RESEARCH: INTERNAL & Competitive

Because I was wasn’t a user of SalesLoft, I needed to start off by conducting some informal research. The concept of inserting meeting available meeting times into an email wasn’t new, but I knew that it could still be improved, so I interviewed and observed SalesLoft’s salespeople to understand what tools they currently used for meeting scheduling and learn what they did and didn’t like about these products.

 
 
Our sales team used a variety of products to book meetings. They all had their various pros and cons, but some like the one here, faced issues of choice overload.

Our sales team used a variety of products to book meetings. They all had their various pros and cons, but some like the one here, faced issues of choice overload.

 
 

USER FLOWS

Working with my Product Manager and based on previously gathered user feature requests, we decided what salespeople and prospects should be able to do in the initial version of Insert Availability and diagrammed out the potential user flows. This allowed me to effectively design out comps for both the happy path and the non-happy path.

 
 
Capturing an artifact from an interview with a private airport shuttle service.
 
 

SKETCHING

With insights from my research and an understanding the potential user journeys that I would need to design for, I turned to sketching to think through some potential solutions.

 
 

Sketches early in the process of the calendar view of Insert Availability

 
 

EARLY DESIGNS: WIREFRAMES

Early designs began with exploring the various ways to show the initial calendar view for Insert Availability. Each competitor and calendaring app did this slightly different and for different reasons, and I wanted to craft an experience that made the most sense to our users.  I procured constant feedback from our internal sales team (who are users of the product), fellow designers, and my PM to make iterations.

 
 
Early wireframes of Insert Availability. The most frequent feedback from our internal salespeople/users: More room for the calendar! (this should be the main focus).

Early wireframes of Insert Availability. The most frequent feedback from our internal salespeople/users: More room for the calendar! (this should be the main focus).

 
 
 

ITERATIONS & CHALLENGES

The main challenges faced in the creation of Insert Availability pertained to the small design decisions and iterations that I made along the way. By constantly getting my designs in front of our internal users, I was able to correct my designs to make the feature as easy to use as possible. Below are just three of various revisions that I made based on user feedback.


ITERATION 1: WHO’S MEETING IS IT?

Users don’t only book meetings on their own calendars. For instance, a Sales Development Representative often will book meetings for a more senior Account Executive. Initial iterations didn’t take into consideration this use case, so it wouldn’t be clear who would be the meeting owner once a meeting was booked.

 
 
Choosing booker.png
 
 


ITERATION 2: SAVING CLICKS

Re-thinking what happens if a prospect tries to schedule a time that has already been taken (this iteration mistakenly made the prospect take an extra, unnecessary step to find another suitable time).

 
 
This original UX would mean the prospect would have to take another step to find a suitable time whereas the revised design provides available times right away without needing another click.

This original UX would mean the prospect would have to take another step to find a suitable time whereas the revised design provides available times right away without needing another click.

 
 


ITERATION 3: paradox of choice

Re-thinking how to display available times with the goal of reducing load so the prospect can choose a time that works best for him/her.

 
 
A prospect sees a list of available times - The decision on my end to provide as much information as possible vs. considering choice overload and its impact on decision making.

A prospect sees a list of available times - The decision on my end to provide as much information as possible vs. considering choice overload and its impact on decision making.

 
 

REFLECTIONS

As one of my more significant projects at SalesLoft, the most eye-opening experience for me was pushing forward a feature as part of an Agile team. I worked closely with my PM throughout to discuss the scope of the first iteration (and future iterations) of Insert Availability.  Also, I worked with my UI Engineer to understand the technical constraints surrounding the React calendar plugin that we were using and customizing for SalesLoft. Finally, understanding what the future of Insert Availability COULD look like versus understanding what was necessary for version one was an important learning experience for me. 

 
lightgrey.png