Meta for Business: Building a better onboarding hub
“Meta for Business” is a self-service platform that help business owners run better campaigns. More specifically, it’s meant to help them grow their customer bases by learning and implementing best practices.
At the time, this concept of a self-service education hub was an unproven idea. And I was tasked with leading this exploration. Over the course of 4 months, I ran this project end-to-end. The project was a success, leading to a clear increase in our KPIs: 23% page views, 10% CTR, and 11% HQT. And longer term, we used this project as the template for other user education hubs like Instagram for Business Promote Hub and the Meta Pixel Optimization Guide.
The following case study guides you through every step of the process, including ideation, user maps, wireframing, user testing, and the final product. The main challenge was creating a single hub that could cater to both high-intent and low-intent users alike.
My Role
Experience Designer
Project Timeline
November 2021 - February 2022
Problem: How do we centralize educational content to help users learn to make better ads?
Context
The idea for a onboarding hub came from a previous product we’d built called ‘Ads Camp.’ Ads Camp is a 90-day onboarding program that consists of a drip email campaign and targeted landing pages. We found that it was effective, but that users were craving a more robust and interconnected website that they could come back to time and again. Users didn’t like having to return to their emails and to visit standalone landing pages; they found the experience disjointed and that it didn’t give them much choice on what topics to learn. Bounce rate on Ads Camp was accordingly high. We needed a new solution.
Ideation
User segmentation
The first step was to identify user segments. We figured that it would be best to optimize for two user types: high intent (high desire, high investment) and low intent (low-mid desire, low investment). From there, I determined that we could serve both segments by breaking content out by experience level. By structuring this project as both self-serve and experience driven, I could account for both those wanting to learn above and beyond and for those who needed quick answers.
Personas
In order to get a better sense of user needs, I set out building personas for both high and low intent users. Users are most affected by time, budget, understanding, and trust. While both types value visible signs of progress, the most notable difference was businesses that provided a service desired more concrete, industry-specific ad examples vs businesses that provided products. On top of that, low intent users generally have less interest in learning beyond what they need.
User Map
The next step was to create a user map to identify all the potential user flows. This allowed me to structure the website according to acquisition channels (direct traffic, email, or Google search). From there, I bucketed out the content by proficiency, creating three distinct journeys. It became clear to me that we would want to feature a mix of content: educational tips for quick browsing; foundational lessons; and advanced tools for power users.
Wireframes
Wireframes came next. The challenge as I saw it was: how do we build out different pathways for proficiency and how do we show content that’s both visually and structurally effective? Within the makeup of the larger experience, I proposed a homepage with tabbed navigation (left); content would populate depending whichever tab the user selected. The subpages (right) are where the meat of the content lived for any given topic. Within these pages, I wanted to establish a navigable way back to the main page as well navigation between the subtopics of a particular tab. In that way, users who wanted to keep learning could do by a semi-linear, semi-recommended approach. Guiding my work here was the insight that users were craving non-linear learning options with the Ads Camps product.
Web designs for the onboarding hub (V1)
After landing on a page structure we liked, I translated the approach to 9 topics pages built for both desktop and mobile. As part of that, I’d created a sort of design system to guide decisions and help keep a consistent feel — another thing our users were craving from the Ads Camp experience. If clicking in to any of the pages, you’ll see the in-page navigation, variety of content types, and different pathways based on skill level.
User testing for V1
Once we launched V1 of the onboarding hub, I set up a usability test to get usability feedback. The feedback was generally positive, but it wasn’t perfect. User had trouble understanding certain elements, like copy, in-page navigation, and visuals. More importantly, they were getting lost in trying to set objectives. With that mind, I wanted to take a hard look at the UI and overall Information Architecture.
Here are four key problems that users identified. You’ll see that I pulled in my solutions.
Problem 1: Eyebrow text has poor visibility and scanability
Solution: Build content hierarchy so that key messaging is excluded from eyebrow text and is shifted to header.
Problem 2: Tabbed navigation felt unclear and limiting
Solution: Change directory experience for users who don’t want to navigate content linearly and to reduce click out percentage.
Problem 3: The hub lacked a visual cohesion that felt confusing
Solution: Unify experience by templatizing nested pages, build a uniform module set to both streamline designer workstream and to futureproof in case of additional nested pages.
Problem 4: Users wanted more technical “how-to” content over the conceptual ad mocks
Solution: Focus UI to reflect IRL instances of how in-product ad making actually works. Use similar in-product UI/functionality so users have more familiarity.
Final designs for the onboarding hub (V2)
After incorporating all the feedback, I created final designs that went live on March 2022.
Impact
The latest version of the hub has been live for a few months now, and the initial data is promising. We were able to help our users create more successful ads by deepening engagement. By expanding the experience nav to include all subpage links, page views across the board increased by 23% and CTR by 10.2%. In addition, by swapping out some of the visuals for technical in-product ‘how-to’ previews, HQT (high-quality touch) has increased by almost 11%.
