Matt Kofman
Senior Product Designer
2
Foundations
and how to set the project up for success
Understanding the Investing Club Brand
Colors
Club Primary
Club Accent
Logo
Badge
Provide a First-Class User Experience
Provide content that users want and with an easy way to access it, presenting it in a way that makes sense
Listen to and Learn from User Feedback
Take into consideration user feedback about CNBC Pro and general app experience
Leverage Existing Paradigms
Given that the Investing Club is CNBC’s second subscription product in a mature app, we can repurpose our existing design system and engineering libraries to work smarter
Articles
Gated Article
Unlocked Article
Live Events
Morning Meeting Stream
Videos
Gated Video
Unlocked Video
Notifications
Notification Settings
Subscribing
Paywall
The two remaining items we need to consider are the Charitable Trust and how the entire experience ties together
3
Ideation
and conceptualizing the experience holistically
Refer to feedback of the current user experience
Current Pro User Feedback for Apps
Dedicated Home
Users want an obvious place to find subscription content
Current Club User Feedback for Web
Make Navigation Obvious
Users were not able to easily navigate to the Investing Club
Improve Charitable Trust
- The header row and column did not stick as users scrolled
- It’s hard to see all data for one quote in solidarity
Sketch out ideas
Ideating a Home for the Investing Club
Concept A
Subsection in the News tab
Would require a lot scrolling
Would be harder to locate
Concept B
New tab in the bottom tab bar
Requires extensive structural navigation changes
Would delay an MVP release to an unreasonable degree
Concept C
New top tap bar module
Heavy dev lift to create new component
Pattern would be beneficial in similar contexts
Ideating the Charitable Trust
Concept A
Data presented as customizable spreadsheet
Concept B
Data presented as expanding and collapsing cells
Concept C
Data presented only in quote page
4
Testing
and understanding user preference
We held 5 moderated interviews with current Investing Club subscribers and focused primarily on the Charitable Trust
User Feedback
Spreadsheet View is Preferred
The ability to see all data in a grid is easier for a quick comaprison between multiple symbols
Editable Charitable Trust Data Preferred
On a phone-sized device with minimal horizontal space, users found the ability to customize the way data is displayed to be quite useful
Charitable Trust Data in Quote Page Nice Bonus
With data spread over 4 tabs, users found having all relevant Charitable Trust data for a quote in a Quote Page to be useful as to not need switching between tabs constantly
5
Designing
and creating a high quality user experience
Designing the Investing Club Home
Top Tab Bar & Overall Navigation
As mentioned during ideation, we decided to add a new module to our system that would function as a top level tab bar for the News tab
This would allow us to bifurcate the experience to a degree and provide a distinct and obvious home for Investing Club content
An added benefit of utilizing this module in our system is that it can be extensible for any additional navigation refinements we choose to make in the future, such as providing a distinct home for our Pro subscription content if subscribed to separately
Or when subscribed to together
We could also use this to provide an obvious home for saved content, which has been a frequent pain point in user feedback
Which could all live together side by side
Investing Club Content & Sections
Being that the website had launched an MVP, a CMS was set up with all the necessary sections in which content can populate, so utilizing those sections would cut down on engineering scope as well as keep content structured consistently no matter the platform used access.
A note here is that there could be some overlap and redundancy in the content that’s displayed, but our editorial team felt this was the best way to organize and present content, so we decided to monitor user sentiment and make any changes if need be
Charitable Trust Summary & Navigation Point
We had decided to re-utilize a module from the News tab which contained a scrollable feed of summaries for major market indices.
By utilizing this, we could provide a heading feature to summarize the health of the Charitable Trust with an alphabetically sorted list of stocks contained within and make it an obvious point of navigation to view it in full.
Major Indices
Charitable Trust Summary
Notification Prompt
One of the major facets of the Investing Club is the ability to get timely notifications on Jim’s thoughts, actions he’s taking in the market, or when morning or monthly meetings start.
The percentage of which our users have notifications enabled for the CNBC on both iOS and Android are incredibly low, less than half.
We decided to take this opportunity to introduce a notification prompt for users who have notifications turned off that they should turn them back so that they never miss an Investing Club moment, especially now that they are paying for it.
Designing the Charitable Trust
Tab Bar Navigation & Summary
Utilizing the top tab bar module added to the News tab to allow users to quickly switch between the four major sections of the Charitable Trust and added the summary to allow users to keep track of overall performance.
In a follow up release, we also provided users the ability to look at historical year over year changes by tapping on the %YTD Change Field
Charitable Trust Spreadsheet
Another major piece of feedback we had recieved from testing was the fact that users preferred to see the display of the Charitable Trust data as a spreadsheet
Personalizing Display of Data
Mentioned as a result from testing, users would prefer to be able to alter the way data from the Charitable Trust displays due to the nature of a phone sized device relatively small screen real estate.
An ‘Edit Data’ button at the top of the screen was provided to allow this as well as a tooltip that would display upon first load to help guide the user.
Upon tapping Edit Data, a sheet would appear to allow the user to customize their display of data.
Charitable Trust Detail within Quote Pages
Another major piece of feedback we had recieved from testing was the fact that users really appreciated seeing all the relevant Charitable Trust data for a certain stock listed directly in its corresponding Quote Page.
While we decided to not include this functionality for immediate launch, we did circle back and delve into this further as a post-launch enhancement.
6
User Flow
and the experience step by step
As a user interested in the Investing Club...
While browsing the CNBC app you’ve stumbled upon an Investing Club article that you’d like to read fully
You encounter the Investing Club article gate and tap ‘Become a Club Member’ to dive in to explore further
You’re brought to the Investing Club paywall where you’re able to learn more about what the Investing Club offers
Interested in the offerings, you tap to subscribe
To subscribe you’ll need to create an account and confirm your purchase
After successfully subscribing, you’ll be brought back to the article you started from to read it in full
Navigating back to the app home screen, you’ll be greeted by a message indicating where you can find all Investing Club content as well as a slight change of theme
Navigating to the Investing Club tab you’ll find a summary of the overall status of the Charitable Trust, a prompt to enable push notifications
Sections of Investing Club updates to scroll through
Previously recorded and info on upcoming meetings
And an about section to house legal information
Watching previously recorded meetings, you’ll be able to keep up with Jim when you can’t watch live
Heading into the Charitable Trust you’d be greeted with a tip indicating that you can change the way data is displayed to suit your needs
When you dismiss the tip, you can see the Charitable Trust in full, scroll and select through its content, edit the way it displays data, and find historical yearly percentage returns
Tapping on a quote will show you more general detailed market information
As well as all detailed Charitable Trust data
You’re able to view historical yearly percentage changes
And change the way data displays
In the morning when Jim starts to hold his daily live morning meeting you’ll receive a notification
When you tap into the notification, you’re brought right into the live stream