Ambassadors

Freeletics

Ambassadors website design displayed on a macbook and an iphone

How might we build a scalable, content-first solution for showcasing people?

Context

Our Ambassadors are a huge part of Freeletics. They represent our brand, product, and culture, all while working a normal day job. There's a huge amount of passion surrounding Freeletics, and they embody it. Ambassadors proactively create local community groups, host training meetups in person and online, and even reach out to new users to help them get started. The big problem though? Our platform does not enable this to happen. There's no great way to find your local ambassador, so our users have to figure it out on their own (most of the time, this happens outside of our ecosystem).

Goals

1. Discover
  • Local Ambassadors are difficult to connect with online and on our app. We don't provide a way for people to search for and find their nearest Ambassador.
2. Leverage
  • This project was completely built on Contentstack, a headless CMS service, so that our content creators would have maximum control over how content is displayed and where. The design of these new pages needed to fully leverage the power of Contentstack.
3. Scale
  • Not only could we build content models for our Ambassadors, but these models could also serve our People Operations team, showcasing individual employees, teams, or leadership members. Scalability across multiple functions was a key factor in how we tackled this problem.

Responsibilities

Lead web designer

Understanding our web traffic

80% of Freeletics web traffic comes via mobile devices. Our organic traffic is low, so users coming to the website on their own and exploring the Ambassador pages is an unlikely path. Instead, users would be pushed to these pages through Instagram ads, stories, and posts, email campaigns, and blog articles.

Adapting the designs to be content-agnostic

One of the biggest challenges of this project was to create a scalable design that could morph and grow and change, while remaining connected to all of the common content types for all people. Because Contentstack is a headless CMS, all pieces of content could be grouped together in different combinations, styled differently depending on the people being showcased, or conditionally visible. However, all content types needed to remain the same.

Evangelizing our new tech

Contentstack was a new platform and only my team really understood its power. I lead trainings on how to design within the new framework, presented my own personal learnings in company-wide meetings, and pushed my design teammates to design with content scalability in mind.

Solution

Bringing awareness and hitting deadlines

This was the largest feature update shipped on the website in years. We coordinated our launch with the Brand team's New Year campaign, which aimed to bring more awareness and engagement to our Ambassadors. Because of the timeline and business priorities, internal work related to showcasing employees or leadership members was deferred. However, the architecture is built (thanks, Contentstack!) so whenever we are ready to pick up this work, it will go very, very fast.

No items found.
The iPhones showing Screenshots of different states of filters - full filter list, filters applied, and zero state

Screens showing some of the filter interactions. First, the filter experience on mobile is a fully immersive view. Next, after filters are applied, we display filter pills to reinforce the user's selection. Lastly, if the combination of filters applied results in zero matches, we allow the user to quickly reset all filters.

Impact

Connecting Freeletics Ambassadors with the world

Community is one of the most unique aspects of Freeletics and our Ambassadors are a huge part of that. With our new Ambassador pages, we've built the first big step toward creating a community connection within our ecosystem. Since the launch in January 2021, we've received almost 130k unique page views and countless positive anecdotes about the newly discoverable Ambassadors.

Meet our ambassadors
** Full case study available

More projects