ABC Financial is a leader in fitness club management. They have a reputation for quality customer relationships spanning the last three decades.

ABC’s main offering to its clients has been a large enterprise product that has started to show it’s age. The team I lead was assembled to build an innovative product to replace the legacy application.

The new application was called 3.0

After a lot of deliberation we decided that the first step should included the construction of a design system. We wanted to help developers stay consistent in the design and feel like they had some guide to follow. It’s turned out to be an excellent communication tool and sped development time up dramatically.

Understand the Experience (User Research)

Understanding our users is always the first step. ABC Financials main users are the large gyms that need the software to run everything from membership, sign-ups, and sign-ins to back-office accounting, and bill services.

Our team determined that one of our first goals was discovery sessions with the users onsite at one of our clients gyms to do observational studies to help us understand how the users were currently engaging with our software and what their difficulties were.

After introductions, my UX colleague and I started our visit by receiving a tour.

Observe current users

The Front Desk Lead gave us a complete tour of the facility and then took us through the membership sales offer that accompanies it.

After the membership offer, we had more opportunities to observe other prospects taking the tour too so we had a good understanding of what a prospect would encounter entering one of these facilities.

Empathize with the users pain

What was easily observed was just how many steps and how much redundancy existed in the current system.

Our front desk users pointed out all the workarounds and duplicative screens in addition to having to search for difficult to find workflows all making the process of signing up a new member time-consuming and costly.

In addition to a dated UI the core of the application has functionality flaws going off line so frequently they’re running a real danger of losing the clients business.

Users Comments

“I just want to be able to do this [Sign-Up] quickly and that’s not possible in this system.”

“If it could have fewer steps that would make our life so much easier”

“When I’m signing people up they need a canceled check to complete the process. No one has checks anymore”

“The drivers licenses scanner puts the information in the wrong fields so we have to manually enter everything and mistakes happen all the time.”

Collaborate, Sketch and Flow Map

I prefer to sketch out a few options for a solution before I start working with a computer program. In a remote environment I a digital whiteboard tool to collaborate as well as Zoom. In this case, I used a pen and grid paper to start working out ideas for improving the signup expereince.

These sketches show the ideas unfolding into the first step, entering users contact data. I took these to the team, shared them with our user, and stakeholders and iterated with their feedback until it was time to work in higher fidelity.

High-Fidelity Designs

We don’t always need to make every screen in high-fidelity. We got to a comfort level of being able to give wireframes and simple sketches to our developers to implement. This allowed more time for research and collaboration on complex parts of the business.

Signup flow
Here are the steps a staff member and new member will take in the first phase of the signup.

Screen 1. Demonstrates where the user is taken when they select the Add  Member button from anywhere in the application. It’s a global feature to allow faster access for users to start the membership process.

Screen 2. Demonstrates what text entry will look like for two examples. Entering text (First Name) and field errors (Email).

Screen 3. Provides an example of a modal overlay for the waiver in this flow. The screen is provided to the new member to read and agree.

Screen 4. Shows the completes form, Note: Access ID appears as an auto-filled field however it can be manually changed depending on the gyms needs.

Screen 5. Demonstrates how the front desk staff would upload a photo. The need for a feature to take the photo on the spot would be built in a future iteration. For now, we are temporarily assuming the photo is available on their system to upload.

Screen 6. Shows the completed form for a new member.

Screen 7. Shows the saved form that a user can edit as needed.

Conclusion

The front desk staff, managers, and the members all suffered through a sign-on process that was faulty with numerous screens and repetitive practices that hurt all of these users experiences.

By reducing the number of steps, making the entry fields easier to read, and the forms easier to understand we have allowed these users to sign up new members almost 76% faster than the previous method. We also saved ABC loss of revenue as this allowed them to keep a major client account.