feature education for a brand new product
Shaping Beacons' Media Kits Onboarding Flow
ROLE
Product Design Intern
Mini-Team Design Lead
TIMELINE
July - August 2022
(1.5 months)
TEAM
Product Manager (CPO)
3 Engineers
Product Marketing Manager
In the summer of 2022, I was lucky enough to have the opportunity to lead design for
Beacons' new Media Kit product. As the sole designer working on the product, I focused on shipping quickly and iterating based on live user data to help the product team validate hypotheses and find the right fit for our users.
Designing for Media Kits was a challenge due to Beacons' existing user base. With most people coming to the platform to create a Link in Bio website, we had to quickly capture users' attention and help them easily see the value of the new product.
BACKGROUND & OVERVIEW
Beacons Media Kits
Media kits are an essential part of any professional content creator's workflow. They're used to pitch the creator to brands and win brand deals, which are by far a creator's largest source of income.
Beacons' Media Kit product helps creators easily set up beautiful, auto-updating media kits. They take away the hassle of having to screenshot and manually update analytics, while still providing users with a personalized media kit to show off their strengths.
While the product did great when we white-glove onboarded users, conversion rates were low for in-product discovery and onboarding. Since Beacons' flagship link in bio product is so well known, a large proportion of users clicked on the media kit tab, but didn't go through with onboarding and setting up their media kit.
KEY SOLUTIONS
Improving Product Education and Conversion
01. SETUP WIZARD
Hand-holding users through the setup journey
The setup wizard takes users through the most valuable steps of setting up their media kit, allowing them to finish setup with a minimally viable media kit, ready to be sent out to brands.
02. BETTER EMPTY STATE
Turning a product dashboard into a landing page.
Borrowing ideas from traditional website landing pages, the pre-setup landing page gives users an instant glimpse of the product and its features.
LET'S TALK PROCESS
How might we show users the value of the product, and hold their hand as they go through the setup process?
USER RESEARCH
Why aren't users converting?
Prior to launching, we white-glove onboarded users through zoom calls and the product was well received. However, after launching the product, conversion rates were low for users who discovered the feature in-product. Users clicked on the media kit tab, but didn't go through with onboarding and setting up their media kit.
EVALUATING THE EXISTING SETUP FLOW
The existing flow required users to authenticate a social account before they are taken to the Media Kit dashboard. Many users arrived on the page but did not click to authenticate their accounts, preventing them from ever creating a media kit.
I identified two touchpoints within the existing setup flow where metrics were low, contributing to the overall low conversion.
User Pain Points
Through user interviews with new and existing Beacons users to identify their pain points in the two touchpoints.
MEDIA KIT TAB ENGAGEMENT
"I don’t know what the media kit product does. I’m not sure how it will be helpful to me, or why I should click to authenticate my socials."
Dropoff in engagement with CTAs on the Media Kit Tab are driven by a lack of product understanding.
SOCIAL AUTHENTICATION FLOW
"I want to create a media kit, but authenticating my socials is a blocker. I don’t know why I should go through the hassle of doing it."
Users do not fully convert even when going through the social authentication flow because they do not see sufficient value for effort.
THE SOLUTION
Improving the overall setup experience
I came up with two solutions to the problem, tackling both the setup flow and the empty state to boost conversions from in-product discovery.
01. TACKLING LOW MEDIA KIT TAB ENGAGEMENT
Empty state redesign to encourage setup
02. BOOSTING SOCIAL AUTHENTICATION CONVERSIONS
Setup Wizard to improve onboarding
THE SOLUTION: LANDING PAGE
Redesigning the empty state
The existing empty state that greets users when they arrive at the Media Kits tab is dull and uninspiring. I sought out to redesign this page, especially to educate users who had no idea of what a media kit was.
THE TRANSACTION CARD GRAVEYARD
As Beacons evolves into a multi-product offering, more new users will be unfamiliar with products outside of the flagship product.
Each new app’s empty state provides a business opportunity for us to integrate product marketing, educate users, and drive engagement.
I drew inspiration from website landing pages to make the new product feel more independent, and worked closely with our Product Marketing Manager to craft a landing page that aligned with our positioning for the product.
Design Principles and Dependencies
Showcase product value
The value of the product should be displayed clearly to users.
We should be able to highlight key features of the Media Kit product in order to get users to see the value for their effort.
Communicate social proof
From past experience, we know that social proof is important to creators.
We should show users the full potential of the media kit by showing them what others have done with it.
Keep things above the fold
Reduce scroll and keep the above-the-fold content impactful.
We want users to be able to get the most value in the shortest amount of time possible.
Dependency: Respect technical bandwidth
At the time of this project, technical bandwidth was slim, so designing a solution that was both effective and low-cost was one of my key goals.
Ideation
We decided to go with a combination of options 2 and 3, embedding a png of the media kit instead of embedding a live page to solve the technical constraint. I used a card layout to highlight features in a vertical scroll.
Key Design Decisions
UTILIZING PREVIEW SPACE
To maximize screen real estate, I repurposed the right column that usually houses a live preview of the product into a section for educational cards highlighting the product's value propositions.
SCREEN WITHIN A SCREEN
To truly capture the essence of the product, I embedded a preview of a fully built-out media kit to show users what the end product after setting up would be. To deal with technical constraints, the engineering team and I decided on using a scrollable image rather than a live embed.
INTEGRATION WITH SETUP WIZARD
I hypothesized that users who saw the new, landing page style empty state and then went through the setup wizard would be more likely to convert, compared to those who saw the setup wizard automatically pop up. We ran an A/B test that proved this hypothesis, with the empty state outperforming the auto-popup setup wizard in conversions by 25.3%.
FINAL DESIGN
A landing page experience, in-product
THE SOLUTION: SETUP WIZARD
Designing an efficient, effective, onboarding flow
Users are getting bogged down by a tedious onboarding process. How might I design an efficient and informative white-glove experience, in-product?
In my research, I came across the idea of a Setup Wizard that guides users through steps required to reach a particular goal. The setup wizard takes the place of Beacons team members and helps users get started.
What makes a minimally viable media kit?
To kickoff the design process, I conducted a whiteboarding session with my PM to identify the highest value actions a user should go through in order to set up a minimally viable media kit.
We identified the following steps as critical to a successful media kit:
- Name, bio, and creative niche
- Profile photo, header
- Social account connection for analytics
We also identified value-add steps that could help creators stand out and have a better chance at winning brand deals:
- Past brand partnerships & case studies
- Rates and services listed
WHITEBOARDING TO IDENTIFY HIGHEST VALUE STEPS
Ordering setup wizard steps
Each step of the setup wizard is independent. This means that we can add, remove, and re-order steps to test and iterate on which steps give users the most value.
By showcasing features before the complex social authentication step, users are able to see the value of the product and become more invested in setting up their media kit. We hypothesized that this would make them more likely to authenticate their socials and complete setup.
How can we best help users set up?
After looking at different onboarding patterns and aligning with the team, I decided on key goals that my design had to meet:
SHORT & SIMPLE
Users don't want to feel bogged down. Present the least amount of information possible.
PRODUCT EDUCATION
Beyond just helping a user set up, the setup wizard needs to inform the users about the product as well.
HIGH-IMPACT, LOW-ENERGY
Even though we're showing the least amount of information possible, each step has to provide a ton of value to the users.
FINAL DESIGN
22.1% increase in conversion over a 2 week period
The result was a setup wizard that takes users through setting up their name, location, cover photo, and authenticating their social analytics. The two weeks following the deployment of the Setup Wizard yielded a 22.1% increase in conversion in comparison to the previous 2 weeks.
Each step is designed to be modular, leaving room for the team to easily switch out steps in experimentation to find the highest-value combination of steps for our users.
FINAL SETUP WIZARD SCREENS
IMPACT
Successfully increased full-funnel conversion
Since deploying the full solution, conversion across the funnel has increased over the previous design. We saw an increase in active users and met our Q3 KPI goal!
KEY METRICS
273.07%
INCREASE IN FULL FUNNEL
CONVERSIONS
12.3%
INCREASE IN SETUP WIZARD
COMPLETIONS AFTER LANDING
PAGE WAS DEPLOYED
40%
WEEKLY ACTIVE USER GROWTH
IN THE FIRST WEEK POST-DEPLOY
I also ended up designing a similar landing page for two other new products: Invoicing and Early Pay. After deploying the Invoicing landing page, conversion to the product increased by 75%.
NEXT STEPS
Tackling retention at the beginning of the funnel
As I continue to work on this product, we are experimenting with switching out different steps of the setup wizard for harder-to-set-up but higher value steps. The goal is to continually iterate to create an onboarding process that promotes retention and long-term adoption of the product.
Learnings & Takeaways
TEST YOUR HYPOTHESES
There were different opinions across the team about whether the auto-popup setup wizard vs. empty state would do better, resulting in the A/B test we conducted. It's much better to test each hypotheses when resources allow you to do so. I'm happy to be proven wrong, and I get to concretely validate my hypotheses either way.
OVERCOMMUNICATE
Since this project was a big overhaul, I learned to overcommunicate with both Product and Engineering in order to ensure that the final designs aligned with all of our goals and limitations. It make my life easier knowing that what I was designing was technically feasible, and reduced a lot of burden during handoff since everyone was on the same page.
TWO HEADS ARE BETTER THAN ONE
I synthesized a lot of feedback from my PM, our engineers, and my design manager throughout the design process. Collaborating with others helps to give you a fresh perspective. I also learned to take a lot of breaks when I'm feeling stuck, which helped me come back to the design with fresher, stronger eyes!
THANKS TO
Jesse (CPO and PM) and Dean (Head of Design) at Beacons for the immense trust you guys have put into me this summer and long before then. I wouldn't be the designer (or person, for that matter) I am today without you!
And another huge thank you to everyone at Beacons (I wish I could list out everyone's names but honestly I think I'd miss someone), especially the Media Kits team, for all your support and patience with me. I've learned & grown so much over the summer!
