Pro Onboarding Page

Problem Statement: CNBC Pro currently lacks a structured onboarding experience. This absence of guidance leaves new users struggling to understand the product's features, value proposition, and optimal usage. Consequently, users are less likely to fully adopt the product, leading to decreased user engagement and lower subscription renewal rates.

Competitive Analysis

The first step I take in my product design process, after gathering business and product requirements, is taking a look at how other products onboard their users. Even if a product may not be a direct competitor (i.e. Duolingo), I can still look to them for ease of use and comprehension. Using the following as criteria for evaluating the other products:

  • Engagement: Review features like progress indicators, gamification, or follow-up emails that keep users engaged.

  • Usability: Assess how intuitive and usable the process is.

  • Personalization: Understand based on onboarding selections how product interaction will change.

First Round Wireframes

After gathering best practices and requirements I created high level wireframes to outline the structure and functionality of the experience. This involved theorizing the layout and possible components, including:

  • Hero Parallax Section: A visually engaging section at the top of the page, using parallax scrolling to create a sense of depth and dynamism.

  • Full-Width Component: Various sections spanning the entire width of the screen, similar to previous marketing landing pages, to maintain brand consistency and provide a prominent area for key content.

  • Step-by-Step Guide: A clear and intuitive step-by-step guide to product components, helping users understand its features and benefits.

  • QR Code: Integration of a QR code for easy access to the product's app, streamlining the user experience and promoting app adoption.

Gathering User Retention Data

Onboarding content was prioritized based on data identifying product features most strongly correlated with subscription renewal. The onboarding page highlights these key features early on with a quick summary, and provides more detailed explanations later. This approach stems from the understanding that new users are most likely to retain their subscriptions if they quickly discover and engage with the product's core value. Therefore, the onboarding process is structured to guide users towards these high-value features as efficiently as possible. Initial summaries provide users with an immediate understanding of what aspects of the product will deliver the greatest benefit. Subsequent detailed explanations offer comprehensive information and support for utilizing these key features effectively.

Second Round Wireframes/Lofi Designs

Initial low fidelity designs were created with a strategy of clear differentiating of product features as those that require an initial set up (“Set Once”) and features the user may engage with over and over (“Everyday Use”).

Set Once product features used the following content and design elements:

  • Headline: "Initial Setup" or "Get Started"

  • Clear Instructions: Concise descriptions and instructions for each setup step

Everyday Use features showed:

  • Quick links to frequently used features

  • Emphasizing Latest Information, knowing users prioritize the most up to date financial data, sometimes checking repeatedly throughout the day

Using this strategy and the user retention data to inform the layout of the page and the design direction of the individual components.

Thinking Through the Design Strategy Behind Individual Components

This design leverages a key insight from previous research: users and viewers place a high degree of trust in specific, individual news anchors. This trust is a significant factor in their news consumption habits and subscription decisions. The onboarding experience is therefore designed to emphasize that a subscription provides access to these trusted figures across multiple content formats; full episodes on demand, livestream with market data, and Pro exclusive interviews. A rotating carousel highlighting CNBC anchors is both visually appealing and speaks to an existing understanding of the customer.

“Pro Tips” are included for good visual design practice by breaking up the page. Instead of presenting a continuous flow of information, the tips create visual pauses and points of interest. This prevents the page from feeling repetitive and makes it more engaging. This can help a users understanding of product features that may be important but do not require a dedicated section of the onboarding page.

The newsletter section uses a few key concepts to convey user value:

  • Emphasis: Icons draw the user's eye to quickly indicate a main feature the subscription, which is a newsletter distributed throughout the day

  • Value Expectations: Users expect the newsletters to provide value to their market decisions, they can see based on the labels above each icon that newsletters are distributed strategically based on market hours

  • Visual Layout: The display of a horizontal time is consistent in telling the user that this a product feature they can expect consistently and with frequency.