Kickoff Client Recruiter
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.
Intro Screen
Old version
Select Channel Screen
Old version
Create Content Screen | Step 1
Old version
Create Content Screen | Step 2
Old version
Instructions Screen
Old version
Success Screen
Old version
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.
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.
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.
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.
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’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.
Resolution
Because the workarounds are too complex, and given the tumult surrounding Twitter in the spring of 2023, we decided to remove Twitter from the Client Recruiter.
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.
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.