Web

2024

Admin Onboarding for TightFit

Streamlining onboarding and improving class management in TightFit's  studio admin portal.

Design team of two
Two screenshots of the TightFit admin portal onboarding flow. The left screen shows Step 1 of 3: a form asking for business name, phone number, number of locations, and admin account details. The right screen shows Step 2 of 3: a studio settings page with a checklist including location, rooms, class types, and instructors

Problems

  • During usability testing, we watched users struggle through their initial account creation flow
  • Navigating the portal was difficult for users due to poorly integrated features and vague labeling

Solutions

  • Designed a multi-step form to break down the onboarding process sequentially
  • Unified and clearly labeled current, pending, and past classes for easy class management

About this project

Building on the MVP

TightFit launched an MVP of their studio admin portal with core functionality in place, but the product had grown without a strong foundation. Navigation was unintuitive, language was inconsistent, and new studio owners had no guidance getting started. It was time to bring order to the system.

Working as a design team of two, we conducted moderated usability testing and a heuristic evaluation to identify the biggest friction points across the product. Two clear challenges emerged: a confusing onboarding experience and a poorly structured information architecture.

Challenge 1: Onboarding Step 1: Create New Studio

How do I get started?

The  screen that users encountered upon initial login was nearly empty, with the main action button tucked away in a corner. During testing, 40% of users navigated between the tabs 'Studios' and 'Users' before locating the button.

Test participants expressed confusion about the labels 'Studios,' 'Users,' and 'Create New Studio.' No context was given for important global settings like default class cost, minimum participants, and cancellation deadline.

The original TightFit portal screen after login. The interface shows an empty table with Studios and Users tabs and a Create New Studio button in the top right corner. A modal for creating a studio is partially open, containing fields for studio name, phone number, address, class cost, and minimum participants.

Challenge 1: Onboarding Steps 2-6: Add class types, add rooms, add instructors & connect to Stripe

How do I list my studio availability?

After the 'Create New Studio' step, users landed on an empty calendar with seven tabs spanning the length of the screen. They knew the goal was to list vacancies in their class schedules, so 80% tried to start adding availability into the calendar as their first step.

They were met with this message: “Please create a room before adding a time slot”

That uncovered step one, which most users did correctly guess needed to be completed under the 'Rooms' tab. As for the rest of the steps... it was a (less lucky) guessing game.

The original TightFit studio dashboard showing an empty weekly calendar. Seven horizontal tabs span the top: Availability, Class Types, Rooms, Instructors, Classes, Class History, and Users. Annotated callouts highlight the confusing step order users faced. A red banner prompts the user to connect Stripe.

The solution: an onboarding wizard that uses human language

We designed a guided walkthrough with three distinct steps:

  • Tell us about your business
  • Configure your studio settings: address, rooms, class types, and instructors
  • Connect to Stripe
TightFit onboarding wizard, Step 1 of 3: Tell us about your business. A two-column layout with the step label and heading on the left, and a form on the right asking for business name, phone number, number of locations, and admin account details.TightFit onboarding wizard, Step 2 of 3: Configure your studio settings. The right panel shows a form for location name and address. Below that is a Rooms section where users can add room names and capacities, and a Class Types section.A modal dialog overlaying the Step 2 configuration screen. The modal reads Location added and allows the user to either add another location or skip.TightFit onboarding wizard, Step 3 of 3: Set up payment with Stripe. A centered layout explaining that a Stripe account is required to receive payments, with a green Continue to Stripe button.

Challenge 2: Site structure

Site map: before and after

Integrating the new onboarding flow meant we had to reimagine global and local navigation to eliminate the original tab structure

A site map showing the information architecture of TightFit before redesign. It has a single top-level navigation node, Availability, with six child tabs including Classes, which expands into five states.A site map showing the information architecture of TightFit after redesign. It has three top-level nodes: Availability, Classes, and Settings, with Classes and Settings each expanding into clearly labeled sub-items.

The results

Overall, an improvement in user satisfaction was
indicated by an increased task success rate & SUS score along with positive qualitative feedback

We conducted moderated usability testing of the completed prototype with 5 users. The results gave the founder confidence to move forward with the proposed redesign.

40%

Increase in task success rate

15 pt

Increase in SUS Score

100%

Testers who noted the efficiency and simplicity of the interface