User Page Rewrite

Users Page Redesign

TEAM

Product Manager, Senior Designer (me), Dev Lead

METHODOLOGIES

Usability testing

TIMELINE

5 months for MVP, continuous enhancements since early 2021

CHALLENGE

As we are migrating parts of Calendly from our old codebase to React, we prioritized the All Users page so that we could add in bulk actions to support our Unlocking Enterprise company initiative.

Problem Statement

As the team lead who manages my team's scheduling process, I need to easily perform bulk actions against users in my organization. These include re-sending pending invitations, changing roles, assigning templates and assigning to a group.

Research

From the Managed Events research and customer feedback, the Product Manager and I prioritized bulks actions to add as an enhancement to our users page rewrite:

resend pending invitations
assign templates
assign to a group
change roles

Pattern research

Bulk actions and tables are existing patterns in several tools. I did an audit to make sure we were up to industry standards. I also referenced Havana Nguyen's article on tables to help fill any gaps in my knowledge.

Design Variations

Throughout the process of designing, a few key considerations were:

Accessibility of the content on the table
Bulk actions pattern and the most important ones we needed (re-sending invites for pending users rose to the top)
Working within the constraints of our grid system
Pagination

Variations

While we were updating this table, I focused on creating a re-usable table component to add to our Calendly UI Library.

Usability Test

Using usertesting.com, I tested a scenario for our bulks actions.

Scenario: Add new members of your organization to the Support Group.

Tasks to complete:

Sort table to those that don't aren't assigned to a group
Bulk select (or select individually) users
Add to the Support group

Demographics:

11 Calendly admins
have least 15 seats in their account

Success rate

All participants successfully completed the task
On a scale of 1 - 5 (1 being difficult and 5 very easy) 10/11 admins ranked the task as a 5 and the remaining admin rated it a 4

At this point in time, usertesting.com was a new tool for us. This test, while seemingly straightforward, was a great way to get our feet wet with the tool.

Getting Ready for Development

As designs become more finalize, I present them to our squad to bring them up to speed and to help prepare for implementation planning. We start implementation planning as designs are being finalized so that we can keep making progress in parallel.

During refinement as a squad (PM, Design, Engineering), we broke the epic into tickets. We worked through each ticket and linked the appropriate designs for engineers to reference. During this process, we generally:

Try to find any edge cases that may require additional designs that aren't supported by existing patterns in our library or elsewhere in the app
Point each ticket
Break out any work to be done to create re-usable components into e-time for engineers (at this time, we didn't have resources dedicated to a UI library or design system)
Identify any issues that need input from architecture (ex: pagination)

Deliver

While we work through kickoff to engineering and linking designs to tickets, I create a 'Ready for Dev' page in the corresponding Figma file. If necessary, I'll also attach any prototypes that help show the flow.

Table

Modal samples from bulk actions toolbar

CONTINUED LEARNING

Continue to monitor and add bulks actions as needed.

SUBSEQUENT PROJECTS

As a fast follow, we added in the ability to click on a user's profile from this page to see all of their event types in lieu of designing and devloping user profiles.