Ambassador Showcase

Freeletics

Ambassadors website design displayed on a macbook and an iphone

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

Company
Freeletics
Date
2020 – 2021
Platform
Responsive web
Role
Design lead
Responsibilities
Competitive analysis, user testing, wireframing, visual design, prototyping
Team
1 designer, 1 product manager, 4 engineers

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? We make this really difficult to happen. There's no great way to find your local ambassador, so we ask our users to figure it out on their own (most of the time, this happens outside of our ecosystem, so people have to go elsewhere). 

Goals

1. Discoverability

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 our tech

The new project was completely built on Contentstack, a headless CMS service, so that our content creators would have maximum control over how the content was displayed and where.

3. Scalability

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.

Research
Workshop
No items found.
Sketch & wireframe

Mapping engagement

80% of Freeletics web traffic comes via mobile devices. In order to create a seamless and expected experience, I needed to understand where that traffic comes from. 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.

Knowing these paths helped me design for the best experience possible, as well as uncover any barriers along the way – If a user is signed in on the website, can they follow an ambassador through deep linking? If a user does not have the app, can we push them to the app store?

No items found.
Design

Content without a <head>

One of the biggest challenges of this project was to create a scalable design that could morph and grow and change, yet remain 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 people being showcased, or conditionally visible, but all content needed to remain the same. 

I also needed to keep in mind how these web pages would actually be managed. It's very easy to perfectly curate engaging imagery and great copy, but those things, in the end, were out of my control. My team act as consultants for the content, but the control is completely in the hands of the content creator. This presented another challenge to ensure the layout design really could work across all sorts of localized content, image orientation, and more. This constraint all got me thinking in great detail about how to document backend guidelines for content creators.

No items found.
Test

Learning from our athletes

Before moving on with the design, we wanted to test the user flow and interactions with users. The primary feature of this page enabling users to filter through our list of Ambassadors to find a few to follow. In general, the filter functionality was very familiar, but users expected to be able to filter by different sports (like weight lifting, running, or yoga) to find someone who trained similar to them. Users also expected a few more filter options such as age and training goals.

Through our testing, we also further validated the strong interest in community. Users wanted to find ambassadors close to them but also wanted to find a community to train with and help with accountability.

No items found.
Solution

Making compromises & 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.

Results

Connecting our 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 that first big step to creating a community connection within our ecosystem. Since the launch in January, we've received almost 130k unique page views and countless positive anecdotes about the newly discoverable Ambassadors.

Further enhancements to the Ambassador showcase may include better app integration and more community-related features.

Meet our Ambassadors

More projects