Ambassadors Showcase

Ambassadors Showcase

Freeletics

Freeletics

Ambassador pages mockups displayed on a macbook and an iphone

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

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

Company // Product
Freeletics // Freeletics.com


Date
April 2020-Jan 2021

Role
Design lead

Responsibilities
Competitive analysis
User testing
Wireframing
Prototyping

Platform
Responsive web

 

The Problem

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.

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 suss out 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?

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 suss out 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?

User journey map illustration

User story and mapping of someone coming to the Ambassador pages via Instagram

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.

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.

leadership

Demo of how Contentstack blocks can be locked or reordering depending on the purpose of the page

Image of a webpage design with annotations and markup for developers

CMS markup for developers so they understand what I am thinking from a content-experience perspective

Image of a webpage design with annotations and markup for content creators

CMS markup for content creators so that they understand how content connects together and where they can control the look of the page

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.

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.

Prototype test script layed out with screenshots

Putting together the user test script alongside the prototype screens.

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.

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.

Screenshots of 3 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.

Ambassador showcase with mockups on macbook and iphone

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.

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.

© 2021 Lauren Nielsen. Built with Semplice.