How I fell down a rabbit hole and came out a better design collaborator

When the best collaborations come from the most confusing problems

On the Live team at Babbel, we’re building and implementing a new product within one of the most well-known language learning apps out there. While Babbel’s been around since 2007, Live—which offers online group classes with certified teachers—was only launched in 2020. It’s a product still in its infancy, and it needs constant refining.

First, some context

Every Babbel learner automatically gets two free credits that they can use to try Live classes. A few months ago, our customer support team brought up an issue with these credits.

Our engineers started investigating why some learners’ class credits weren’t being reflected correctly in their accounts. Our product designer, Sam, was added to this Slack thread, and then I was looped in as our content designer.

If you’re not entirely sure what a content designer is, you’re not alone. It’s a title many tech companies use for the people who write the words that guide you through a digital experience. It’s a growing specialty among the design disciplines, as more and more companies see the very real value in having dedicated content designers collaborating with product designers.

Diving deeper

But back to the rabbit hole. Thanks to this call-out from customer support, Sam realized we’d been displaying class credits in a way that didn’t allow learners to see any credits that had been reimbursed.

As Sam and I started to investigate the issue, another glaring problem revealed itself: learners had no way to actually pay for a Live subscription until they’d used their two free classes. There was no button to take them to the payment page as long as they had free credits to use.

What was unique about this particular situation is that I had just recently started working at Babbel, so my days were pretty wide open. That meant that Sam and I had plenty of time to play with all the different solutions in Figma and venture deeper into the rabbit hole.

We spent days trying out different flows and copy variations, and we sought out feedback from across our teams. In the end, it was our PM who stepped in to ask why our Trello card for the issue was still sitting in “Started” without any real progress. We showed her a bunch of different iterations with a bunch of different CTAs, and she reminded us that all she’d asked for was a button. It was time to rein it in and make a decision.

If you can’t find the right clear, concise, and helpful words for a specific element, there’s probably something confusing about the element itself.

Glimmers of a solution

We decided that said button would need two different CTAs to reflect the two use cases our learners fell into. Our solution was simple and effective, and we were excited to implement it.

Until, of course, our engineers told us that differentiating users for the two CTAs was “non-trivial” and not something they had capacity for. So it was back to the drawing board. Or, in this case, the rabbit hole.

We came back to other options. “Subscribe to Live” was potentially confusing to subscribers of the Babbel self-study app, since they’d already gone through one subscription process. “Get Live” didn’t prepare learners for the pricing page they’d land on after clicking the button. In the end, we settled on “Sign up for Live.” It was a choice I didn’t love, but it was the best solution, given the options.

The bigger picture

In the midst of this deep dive, I happened to watch this talk by Andrew Schmidt, a UX writer at Figma. In it, he makes the case that good UI copy is actually really easy to write, so when it’s not working, it’s a red flag for the overall UX. If you can’t find the right clear, concise, and helpful words for a specific element, there’s probably something confusing about the element itself.

In our case, the widget we were working on does triple duty: it’s where learners see their scheduled class, are reminded about their current class credits, and now where there’s a CTA leading to a pricing page. It’s too much!

When I realized this, it was all I could see. We’d found a solution for our CTA, but were we actually solving the wrong problem? We couldn’t possibly release this update knowing there was a much bigger issue to tackle, right?!

Reaching wonderland

Thankfully, Sam pulled me back from the brink by listing out all the problems we’d solved, in spite of the larger problem:

• Learners with free credits could now easily reach the pricing page.
• Free and reimbursed class credits were accurately and clearly communicated.
• An unusable disabled booking button was replaced with a more useful subscribe button.

Had we implemented the perfect wonderland solution—one that would take a redesign of the entire screen? No. Was I really, really stressed about this being my first real deliverable at a new job? Absolutely.

What we did do, however, was to take a first step toward solving a huge problem for a huge number of learners. Sam convinced me it was a solid win, and we’d tackle more in the next iteration.

We actively sought each other’s feedback, and we ventured into each other’s wheelhouse without any disclaimers.

In the end, our PM was happy about the success of the button we’d finally settled on. Tracking data showed that the number of non-Live subscribers seeing the button and the number interacting with it had both doubled since it was implemented. This is the kind of quantitative success we’d love to see for any design, and it confirmed that the solution we’d landed on was indeed the right one, given the options and limitations.

Our takeaways

For me and Sam, though, the success of the button wasn’t just in the number of learners interacting with it. We each emerged from our tumble down this rabbit hole with clear takeaways of what product and content design collaboration can be like.

For me, focusing on copy iteration marked a huge shift in the way I approach UX writing and content design. I have a marketing background, and I wasn’t used to having the space to iterate in this way. When Sam and I were able to actually work together throughout the discovery process, it helped me adjust my own mindset about the work I deliver and the value I bring.

And Sam says he realized that a content designer or UX writer doesn’t have to be one more stakeholder in the design process, but rather another design voice in the room. Together, we can make a much stronger case with stakeholders to find more user-focused solutions.

So how did we get to these takeaways and make our way out of the rabbit hole? For starters, we both talked through design and copy solutions. I didn’t just leave the UX to Sam, and he didn’t just leave the words to me. We never had to force one to fit with the other.

Copy ideas brought up UX problems, and UX solutions brought up copy ideas, and as we tumbled down the rabbit hole, we did it together. We actively sought each other’s feedback, and we ventured into each other’s wheelhouse without any disclaimers. For us, this turned out to be the most important part of the whole process.

Moving forward

I think it’s important to wrap up this article by pointing out that we haven’t fixed all the issues we found with this widget. For each problem we solved, we uncovered two others.

I’m still on a mission to find the engineering resources needed to implement the CTA I actually want. Sam’s still trying to simplify the whole thing by clarifying use cases and identifying a more holistic solution. But we’re moving iteratively, improving what we can as we go, and collaborating every step of the way.

Huge thanks to Sam Gates for many Friday afternoons of work on the structure, design, and overall narrative of this article!