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.

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.

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.

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.

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.