When I left there were five designers and more than 40 engineers building from our design system. Ideas got tested with members before anyone wrote code.

Measuring first

We couldn't redesign what we couldn't see, so the design team pushed until analytics and heatmaps were in place. Then came the research: 13,000 survey responses, 7,000 session recordings and more than 60 interviews.

The numbers showed where people left. Seven in ten visitors came on a phone and converted at about half the rate of desktop. The interviews told us why: people wanted to see inside the gym before committing, and the fees confused them.

Testing roadmap

Finding a club, choosing a plan

"I want to see inside the gym before I commit to anything" came up in interview after interview. Club search moved into the homepage hero. The club finder became a map with real photos and the amenities people asked about, and each club page kept the join button in view.

Six in ten people who reached the plans page used to leave it. Plans became cards you swipe through and compare on a phone. Adding Trustpilot reviews to that page lifted conversion 3%. We also prototyped a short quiz for people who didn't know where to start: where, when, and what you can't live without.

Club finder, plans and club quiz

Checkout

When we asked new members what they would change about joining, most of them said fees. So the payment step says plainly what is due today and what comes later.

I also built a small animation into the card form. As you type the number, the card on screen turns into your card's brand. In one usability session a participant stopped, said "wow", and told us it made her want to keep typing her card in.

Card animation and payment

Design system

The code had more than 600 colours declared by hand, many of them one digit apart. Someone needed a colour, opened a picker and clicked close enough. The last accessibility audit had taken almost six months to work through.

Another designer and I built a design system on Material UI over several months, with two engineers who helped whenever feature work let them. Accessibility moved into the components. One of those engineers told us the hours saved on rework were impossible to count.

Accessibility guidelines

When the clubs closed

In March 2020 COVID closed nearly every club within a week, and online revenue fell 83% that quarter. We redesigned the cancellation flow and built a members' portal for training at home, with live classes, featured workouts and how busy your club was once the doors reopened.

Members' portal

Results

We measured every step of the join flow against Google's Web Vitals, and speed turned out to be one of the biggest levers we had. To find out what the work was worth, we ran the new build against a small holdback of the old one for four weeks.

The new build converted 9.8% of visits into memberships. The old one converted 3.3%. On phones it was 8.5% against 3.0%. Nearly triple, at 95% confidence, and about $70M in additional customer lifetime revenue.

A/B test plan

The team

We traded wireframe handoffs for two-day workshops with the whole team in one room and the walls covered in sticky notes. I brought in Figma before any other Thoughtworks team I knew of was using it. By the end, engineers were sketching ideas in FigJam and testing prototypes with members before building.

Not everything shipped. We sized more than $100M in further opportunity, like family plans, simpler pricing and new ways to pay, and most of it stayed on the roadmap. The busyness meter we designed is still live, with the interface we shipped.