Case Study

Seat System Redesign

Overpass allows businesses to setup and create their own call campaigns with ease, from finding and hiring call agents to making calls through the browser. If clients already have their own call agents, we make it easy to invite their agents to the system and get them set up to start calling.

When Overpass soft-launched in 2017, we offered free licences (“seats”) for invited users as an incentive to attract beta users. This allowed clients to try out the system with a low barrier to entry. After Overpass officially launched, we started charging a monthly fee for each invited user. We needed to update the interactions and UI of the “Invite Users” modal to incorporate this.

Role
Lead Designer
Team
CPO, CTO
1 Developer
1 Lead Designer
Timeline
January 2018

Context

In the original interaction, each new user would be invited one at a time. The client would enter the user’s full name, email address and assign campaign permissions. Then the client could click on “Invite & Add Another” if they wanted to add more than one new user, which would clear the content of the modal and allow for another user to be invited.

The original Invite User modal, with fields to enter the new user's first and last names and email address. The user can also specify whether the new user should be an administrator in the company, or assign permissions per campaign.

There were a couple of changes we needed to make to start charging for seats. First, we needed a way to invite multiple users at once, to reduce the likelihood of having duplicate charges rejected by credit card companies. Second, we needed a way to prompt the client to add a payment method if needed, and view which payment method would be used for the transaction.

Approach

My first attempt was to simply iterate on the existing Invite Users modal.

I tried breaking the modal into two steps, where the first modal would be focused on entering the new users’ information, and the second modal would be a review screen with a payment method and total price.

The iteration on the existing Invite Users modal. On the left is a simplified modal that just prompts for the new user's email address and campaign permissions, with a button to "Invite Another". On the left, there is a modal screen to Review Invites, which lists all the email addresses that were entered in the previous modal screen and a total of the cost of new licenses. There is also a section to specify the payment method, and edit it if needed.

I ran into a number of issues with this design.

First, there’s the issue of the dynamically expanding modal. If the client was to add multiple new users, this design would add a new section to the modal for each user, which would either make the modal itself taller or would force the interior of the modal to scroll. Neither of these outcomes was ideal: a modal of expanding height meant that eventually it would become taller than the size of the viewport. An interior scrolling modal could interfere with the background page scrolling and cause usability issues.

The other problem I encountered was if the client did not have a payment method saved, we would have to open another modal to allow them to enter their payment method. Then that modal would close, and the Review modal would open again. This design was proving to have complicated interactions and a confusing user flow, and resulted in a bad user experience.

Thinking Outside the Box

While researching modal design, I came across Nick Babich’s
 article, 5 Essential UX Rules for Dialog Design. Two important points stuck out for me:

  • You should’t use a dialog which contains scrolling content.
  • Breaking a complex task into multiple steps is a great idea, but it’s also generally a sign
 that something is too complex to ask users to complete within the confines of a dialog. If an interaction is complex enough to require multiple steps, then it’s complex enough
 to warrant its own page.

Inspired by this insight, I decided to literally think outside the box. The Workforce page, where the Invite User modal is initiated from, is not laid out to incorporate a new page dedicated just to inviting users, so I compromised by using a full page modal for the new flow.

The new, full page Invite Workers modal design, which allows the user to enter the email address and specify campaign permissions of the new users, and a "Review" button to go to the Review Invites page.

This allowed for a much smoother interaction, with more screen real estate to utilize. I kept the two step flow and laid out the review page similar to a shopping cart review page. I added clearer edit and delete buttons on the user details, to allow for enhanced user control and freedom.

The issue of running out of vertical screen space was eliminated, and instead of having multiple modals to jump between, the user can now focus on one task at a time where the call to action is clear.

Results

Clients are now able to view the costs for inviting users up front, and are able to complete the inviting process more efficiently. The new design achieves the business objectives by enabling a new form of revenue, as well as providing a better experience for users.

The design also paves the way for another vertical Overpass is pursuing: popup volunteer campaigns. This design allow clients to enter their volunteers’ phone numbers instead of email addresses. Volunteers then receive a link to download the companion app, enabling quicker setup time for shorter, time-dependent campaigns.

An animation showing the Invite Workers screen sliding up on button click to reveal the Review Invites screen. On button click on the Review Invites screen, a new screen replaces that with a confirmation message saying "Your 2 invites were sent!".