Registration & Checkout

Mapping the User Journey

To better understand the full user experience, I led a cross-functional journey-mapping exercise to identify points of delight and dissatisfaction within the admin process.

Learning from the Customer

I spoke with our customer success team to gain insight around problem areas. They have a deep understanding of the issues our customers face every day.

I also conducted focused interviews with several customers and used the Rose, Thorn, Bud approach to document these conversations and easily classify the feedback.

To hear from a broader audience I launched in-app surveys with card sorting exercises, prioritization lists, and open questions to better understand user needs.

Data Analysis

To look into the quantitative data, I mined data and worked with the analytics team to craft a report showing how the form builder was actually being used.

I learned that some of the key areas of complexity and confusion – custom fields, fees and discounts – could be simplified and still satisfy the majority of use cases.

Design

One of the problems with the previous form builder was that it had no guidance and a ton of options. I thought a guided setup would provide a focused environment for task completion that easily accommodates more complex data entry. I landed on conversational wizard format that could flex to support more features as we grew the platform capabilities.

I outlined the steps we needed to cover and how other flows would feed in and connect in the future. From there I sketched and wireframed content entry solutions that could be applied across multiple different content types.

Solutions

For the issue of data standardization, I compiled a list of the most common fields people collected. The list was surprisingly small. Instead of starting with a complex form builder that allowed for the type of customization we provide today, I opted to offer the common fields as smart defaults. From that base we could add more fields as necessary.

For fees, I learned that most fees are based on division tiers for age level and competition. As such, we established this fee structure as part of division creation prior to setting up this form.

For discounts, I designed templated options for the most common scenarios. Users can easily choose the discounts they want to include, configure and move on.

User Testing

We went back to some of the initial customers we spoke to and shared the designs and they were beyond thrilled. They loved the conversational tone, the focused UI, and the ease of being guided through the whole setup.

Final Registration Builder

I designed a simple wizard flow for an easily customizable registration experience, distilling what was previously a complex and sprawling form into a clear set of steps.

Research

I started by mining the copious customer feedback collected on the registration product. From regular monthly sessions with customer panels, to in-depth interviews, there is a ton of documentation of known issues: confusing UI inputs, repetitive data entry, buggy checkout flows and increased admin time due to customer issues.

I organized a card-sorting exercise with a cross-functional team to get additional input and make sure everyone was on the same page about the problems we needed to solve.

Ideation & Design

I went through several iterations of how we might collect and attach information to each participant. After each iteration I'd discuss with the team (eng, QA, design, CX) to hear questions and concerns about the approach.

Iterations progressed from flow charts to wireframes to higher-fidelity designs as the solution took shape.

Mobile-First & Responsive

I knew from looking at device type in Google Analytics that over two-thirds of our users register on a mobile device. As such, I designed this from a mobile-first perspective, scaling up to larger screen designs once the mobile flow was locked in.

We added a new drawer component to the design system to accommodate easy data entry on all screen sizes. It slides in from any side of the screen and fills the viewport to a specified percentage.

Solutions

The payment step in the previous design was cobbled together and confusing. Arguably the most important part of the whole flow, I wanted to make this dead simple.

User Testing

Early designs were shared with internal stakeholders and refined until I had a clickable prototype ready to share with users.

I created a test in Maze with both open feedback and Single Ease Questions (SEQ) for each step and solicited sports org admins that use our registration product. I quickly got over 30 testers.

Responses were extremely positive, rating 6.6 out of 7 overall on SEQs, but I noticed some opportunities for improvement.

There were some mis-clicks happening for certain tasks that told me these actions were not completely clear. I made modifications, solicited new testers and re-released the test. The changes resulted in fewer mis-clicks, higher success rate and slightly higher overall SEQ (up to 6.7).

End-to-End

The final checkout flow from start to finish, showing the before and after of the participant experience.