Kickoff Client Recruiter
Circular badge with checkmark that states: "Launched May 2023"

Self-serve marketing tool for fitness & nutrition coaches

Company

Kickoff, fitness & nutrition remote coaching startup

My Role

Lead product designer

The Team

1 product manager

3 engineers

Design Timeline

2 weeks in April 2023

01

Overview

Background

The Client Recruiter is a tool within the Kickoff web app that helps coaches market themselves on social media so they can acquire their own clients and boost their income.

The Problem

Kickoff’s marketing playbook recommends that coaches post multiple times per day on social media. However, most coaches use the Client Recruiter only once (ever). In addition, the Client Recruiter supports direct marketing content only. Direct marketing should represent 10% of the content output, while the remaining 90% should be engagement and educational content.

How might we increase repeat usage of the Client Recruiter to generate and convert leads?

02

Final Designs & Interactions

Let me walk you through the final designs to see what a coach now experiences when creating a social media post from the Client Recruiter. While it’s not as entertaining as a Quentin Tarantino movie, it’s also much shorter.

03

Business Impact

We started seeing significant improvement in coach engagement with the Client Recruiter within days of releasing the new feature. The metrics below compare the 6-week average before and after adding blog articles to the Client Recruiter.

40%

number of posts shared by coaches on social media

34%

coaches sharing content from the Client Recruiter

32%

coaches using the Client Recruiter more than once

04

Exploration & Discovery

User Interface Before the Redesign

Feedback from coaches is that the old user interface was clunky, looked dated, and was hard to use to create their first post. Coaches have repeatedly mentioned that the post resulting from the tool didn’t look professional.

Looks like my 5 year-old went on my computer and posted something by accident.

– Kickoff coach

Intro Screen

Old version
Desktop mockup with title "Welcome to the Client Recruiter' and text explaining how to recruit high-value clients. Also has headshots of four friendly coaches.

Select Channel Screen

Old version
Desktop mockup with options for selecting social media platforms to reach clients.

Create Content Screen | Step 1

Old version
Desktop mockup showing options to create engaging content by selecting or uploading an image for a social media post, with a grid of images on the left and an example Instagram post on the right.

Create Content Screen | Step 2

Old version
Desktop mockup with options to customize social media post.

Instructions Screen

Old version
Desktop mockup with instructions on how to create a post on Facebook.

Success Screen

Old version
Desktop mockup titled "All done" with text to encourage coaches to create more posts.

Accelerated Exploration Process

Given the limited time and resources available for this project, I adopted a condensed exploration approach to focus on high-impact steps.

User flow before re-design

Allowed me to highlight issues and opportunities for improvement.

Competitive analysis of 7 social media management platforms

Helped me identify design patterns and features that could enhance the current Client Recruiter experience.

Blue sky thinking workshop with the team

Resulted in clarity on what the ideal user flow should be, the idea to use ChatGPT to generate the caption for each post, and many other great ideas.

Ideal user flow for 4 types of posts:
marketing, blog article, exercise, and recipe

I spotted common actions across all types of post, allowing me to make the designs scalable.

Insights from the exploration resulted in a solid plan for the design ideation phase:

Provide educational content that coaches are proud to share, such as blog articles, exercises, and healthy recipes.

Streamline the interface to make creating a post an efficient and pleasant experience.

Show an attractive preview of the post to get coaches excited about posting.

Make the post instructions extremely clear and easy to follow to ensure coaches actually post the selected content.

05

Ideation & UI Design

No time for wireframes... Because the user flow was fairly straightforward, where each step corresponds to a screen, I went straight into high-fidelity designs. To work at the speed of light, I leveraged the very comprehensive design system I created over time, making new components on the fly, as needed.

Start
Select type of post
Select post content
Select where to post
Create post and share
End

Post Type Screen

This is the new point of entry when the coach navigates to the Client Recruiter. The goal of this screen is to inform the coach on the type of content available, and for them to select an option to start the post creation process.

Highlight 1 of 3

Flagging the new feature to encourage coaches to check it out and share content.

Including features that are not yet released to build anticipation and motivate coaches to come back.

Highlight 2 of 3

Including features that are not yet released to build anticipation and motivate coaches to come back.

Highlight 3 of 3

Simple, scalable list selector design that translates well to mobile.

Flagging the new feature to encourage coaches to check it out and share content.

Including features that are not yet released to build anticipation and motivate coaches to come back.

Simple, scalable list selector design that translates well to mobile.

Including features that are not yet released to build anticipation and motivate coaches to come back.

Desktop mockup with title: "How do you want to engage with your audience today?" along with 4 options. The options "Showcase a specific exercise" and "Showcase a recipe" have a "Coming soon" tag.Desktop mockup with title: "How do you want to engage with your audience today?" along with 4 options. The option "Share educational content from the Kickoff blog" is selected and has a "New" tag.
Tablet mockup with title: "How do you want to engage with your audience today?" along with 4 options.
Mobile mockup with title: "How do you want to engage with your audience today?" along with 4 options.

Post Content Selection Screen

This screen enables the coach to quickly select an article to share. The goal is to provide just the right amount of information to make the coach confident about the quality and value of the content they’re about to share.

Highlight 1 of 6

Showing “Featured” by default reduces the cognitive load and allows coaches to quickly select an article. The other filters provide inspiration on popular topics.

Highlight 2 of 6

Flagging articles that were previously posted with a timestamp so coaches can control the frequency of re-posts.

Showing “Featured” by default reduces the cognitive load and allows coaches to quickly select an article. The other filters provide inspiration on popular topics.

Highlight 3 of 6

The list format is scalable to accommodate different types of content, such as exercises and recipes.

Showing “Featured” by default reduces the cognitive load and allows coaches to quickly select an article. The other filters provide inspiration on popular topics.

Highlight 4 of 6

The realistic post preview reflects the coach’s avatar and name to get coaches excited about posting.

Showing “Featured” by default reduces the cognitive load and allows coaches to quickly select an article. The other filters provide inspiration on popular topics.

Highlight 5 of 6

The caption in the post preview is a way to provide more info about the selected article.

Showing “Featured” by default reduces the cognitive load and allows coaches to quickly select an article. The other filters provide inspiration on popular topics.

Highlight 6 of 6

Responsive design involved a few moving parts. On mobile, the post preview is displayed in a bottom sheet when a list item is selected.

Showing “Featured” by default reduces the cognitive load and allows coaches to quickly select an article. The other filters provide inspiration on popular topics.

Flagging articles that were previously posted with a timestamp so coaches can control the frequency of re-posts.

The list format is scalable to accommodate different types of content, such as exercises and recipes.

The realistic post preview reflects the coach’s avatar and name to get coaches excited about posting.

The caption in the post preview is a way to provide more info about the selected article.

Responsive design involved a few moving parts. On mobile, the post preview is displayed in a bottom sheet when a list item is selected.

Showing “Featured” by default reduces the cognitive load and allows coaches to quickly select an article. The other filters provide inspiration on popular topics.

Desktop mockup with tile "Select an article to share", search bar, filters, and a list of articles, along with a Facebook post preview of the first article on the right.Desktop mockup with tile "Select an exercise to share", search bar, filters, and a list of exercises, along with a Facebook post preview of the first exercise on the right.Desktop mockup with tile "Select a recipe to share", search bar, filters, and a list of recipes, along with a Facebook post preview of the first recipe on the right.
Tablet mockup with tile "Select an article to share", search bar, filters, and a list of articles.
Mobile mockup with tile "Select an article to share", search bar, filters, and a list of articles.Mobile mockup with tile "Select an article to share", search bar, filters, and a list of articles, where first article is selected.
Bottom sheet with Facebook post preview featuring a Kickoff article.

Channel Selection Screen

The options selected in this screen determine which instructions will be presented in the next step. While we recommend posting on all platforms, none of them are pre-selected by default. I wanted to empower coaches with the freedom to choose where to post, rather than them feeling obligated to post on all platforms.

Highlight 1 of 3

Large touch targets.

Using recognizable brand colors for the selected state.

Highlight 2 of 3

Using recognizable brand colors for the selected state.

Highlight 3 of 3

Simple design translates well to mobile.

Large touch targets.

Using recognizable brand colors for the selected state.

Simple design translates well to mobile.

Using recognizable brand colors for the selected state.

Desktop mockup with title "Select where to post", and 3 options: Facebook, Instagram, and LinkedIn.Desktop mockup with title "Select where to post", and 3 options: Facebook, Instagram, and LinkedIn, all of which are selected.
Tablet mockup with title "Select where to post", and 3 options: Facebook, Instagram, and LinkedIn, all of which are selected.
Mobile mockup with title "Select where to post", and 3 options: Facebook, Instagram, and LinkedIn, all of which are selected.

Post Instructions Screen

While this screen provides platform-specific instructions on how to create a post, its main purpose is actually to provide coaches with the assets they need for the post: the image or video (when posting an exercise or recipe), and the caption to copy, which includes the link to their coach landing page and relevant hashtags.

Highlight 1 of 3

Toggle to switch between web browser instructions and mobile instructions (yes, they’re different), as coaches may prefer to post from their phone while reading instructions on their computer.

Highlight 2 of 3

To make the instructions as effective as possible, the step-by-step guidance includes platform-specific visuals, and the post preview is updated for each platform.

Toggle to switch between web browser instructions and mobile instructions (yes, they’re different), as coaches may prefer to post from their phone while reading instructions on their computer.

Highlight 3 of 3

Responsive design was slightly challenging for this type of screen as it involved stacking the preview on top of the instructions, and showing different instructions on mobile devices.

Toggle to switch between web browser instructions and mobile instructions (yes, they’re different), as coaches may prefer to post from their phone while reading instructions on their computer.

To make the instructions as effective as possible, the step-by-step guidance includes platform-specific visuals, and the post preview is updated for each platform.

Responsive design was slightly challenging for this type of screen as it involved stacking the preview on top of the instructions, and showing different instructions on mobile devices.

Toggle to switch between web browser instructions and mobile instructions (yes, they’re different), as coaches may prefer to post from their phone while reading instructions on their computer.

Desktop mockup with instructions on how to create a Facebook post on the left, and a Facebook post preview of a Kickoff article on the right.Desktop mockup with instructions on how to create an Instagram post on the left, and an Instagram post preview of a Kickoff article on the right.Desktop mockup with instructions on how to create a LinkedIn post on the left, and a LinkedIn post preview of a Kickoff article on the right.
Instructions on how to create a Facebook post from the web browser.Instructions on how to create a Facebook post from the mobile app.Right panel with Facebook post preview of Kickoff article.
Instructions toggle with option 1:  "Post from web browser", and option 2: "Post from mobile app"
Toggle option "Post from web browser" is selectedToggle option "Post from mobile app" is selected.
Tablet mockup with Facebook post preview of a Kickoff article and instructions on how to create the post below the preview.
Mobile mockup with Facebook post preview of a Kickoff article and instructions on how to create the post below the preview.
06

Overcoming Platform-Specific Limitations

My initial assumption was that each post would be the same on all social media platforms. If only it was that easy... Upon further investigation, it turns out some of the platforms have limitations.

Max number of characters for caption:
Facebook
63,206
LinkedIn
3,000
Twitter
280
Instagram
2,200
URL behavior when pasted into post:
Facebook
LinkedIn
Twitter
Clickable, automatically inserts blog article image
Instagram
Plain text, non-clickable
Element
Facebook
LinkedIn
Twitter
Instagram
Max number of characters for caption
63,206
3,000
280
2,200
URL behavior when pasted into post
clickable, automatically inserts blog article image
plain text,
non-clickable

Twitter Limitations

Twitter’s character limit is too short for recipes or exercises, and doesn’t leave much room for the intro to articles in the caption.

Workaround 1

Create blog post pages for all of our recipes and exercises, and paste the corresponding link in the post with a very short caption.

That’s a whole separate project.

Workaround 2

Make recipe text or exercise description part of the post image.

For longer recipes, the text might end up being too small to be legible, and would cover the entire image.

Instagram Limitation

The inability to include clickable links in posts makes it difficult to share articles.

Workaround considered

Create a story and add a URL sticker.

Involves a lot of extra steps that would make the instructions lengthy and hard to follow.

Resolution

Generate a summary of the article with ChatGPT so the article can be shared as a regular post with an image and a caption.

Instagram post preview of a Kickoff article with a detailed caption.
07

Retrospective

What went well

Scalable designs mean additional types of content can be added to the Client Recruiter quickly in future iterations.

The feature was designed and shipped in less than a month (only 2 weeks of design work).

Thanks to the brainstorming session I conducted at the beginning of the project, we knew we would leverage ChatGPT to generate the post captions, which allowed the engineers to set up the integration while I was working on the designs.

What could have been better

Usability testing is crucial to the success of the features I work on. Given the tight timeframe for this project, I didn’t get to test as thoroughly as I would have liked. As a quick alternative, I informally shared the initial designs with a few coaches and made adjustments based on their feedback.

In the initial iteration of this feature, only the first two screens were released, leaving the last two screens in the old, outdated format. Having a mix of new and old designs resulted in a disjointed experience. I believe implementing all four new screens will have a significant positive impact on the success metrics.