Overview
This is a story about product education in an app that started with a basic need for feature
awareness and expanded into a user-education framework and components.
It resulted in measurable increases in both product awareness and application.
awareness and expanded into a user-education framework and components.
It resulted in measurable increases in both product awareness and application.
Situation
 Facebook View app
Facebook View app is a companion app supporting smartglasses made by Meta and Ray-Ban.
The app launched with limited content; primarily set up and settings. Since the goal of the app content was to drive device usage, not app usage, the belief was that limited content was ideal. That belief was soon proved wrong when user research revealed users: 1) were not aware of all features 2) didn't know how to use features 3) were not finding support content outside of the app. |
Ray-Ban Stories smartglasses
|
Task
Find a solution to support feature awareness and user education in the app.
User NeedHow to use features & capabilities
|
Business Need
Drive adoption of features
|
Content design challenge:
Solve key people problems across user journey
to drive product awareness, adoption, comprehension, and confidence.
Action
I was the lead content designer on this project, responsible for content strategy and UX writing.
Cross-functional team
Cross-functional team
- UX writer (me)
- Product designer (PD)
- UX researcher (UXR)
- Product manager (PM)
- Design program manager (DPM)
- Engineering (Eng)
- Marketing
Process
Here are the steps I took to complete this project:
1) Align with cross-functional team by spearheading a white boarding session
to gain alignment user, needs, and project goals.
2) Understand the user and need by partnering with product and UX research
to review existing research ("what we know") and identify needed research ("what we don't know").
- Understand the user, needs, and context (Empathize)–user-research, persona, interviews
- Define the problem / user need (Define)–write out the need and share for feedback
- Validate need through research
- Ideate solutions with product designer to explore solutions and flows. (Ideate)–leverage strengths of words and images
- Refine content, text, and imagery
- Prototype experience to share for feedback
- Test prototype in usability testing (Test)
- Deliver final content and documentation
1) Align with cross-functional team by spearheading a white boarding session
to gain alignment user, needs, and project goals.
2) Understand the user and need by partnering with product and UX research
to review existing research ("what we know") and identify needed research ("what we don't know").
Identifying existing research
|
Identifying research needed
|
3) Define the user, problem, and need to form a mental model
of what the user needs.
Share with team for feedback/buy-in.
of what the user needs.
Share with team for feedback/buy-in.
Persona
User persona
4) Map the user journey with a goal to understand how and where our users are
interacting with our content and why the key user problems surface:
interacting with our content and why the key user problems surface:
User journey
Smartglasses - User Journey
5) Validate the need and user with product management and user research.
6) Audit existing content to identify:
6) Audit existing content to identify:
- content we have
- content user needs
- content business wants
Content audit
Content audit template (johnmccroy.com visual)
7) Capture the solution/strategy: in a content strategy deck to summarize:
- our mission
- our problem
- challenges and opportunities
- content solution
Content strategy deck
|
|
|
|
8) Share the strategy to the cross-functional team for feedback, refinement,
and/or to garner buy in on proposed solution, then:
9) Scope components by partnering with product design, engineering and product management
to identify components needed and the scope and requirements of each.
10) Shape content principles to guide the type and style of content.
and/or to garner buy in on proposed solution, then:
9) Scope components by partnering with product design, engineering and product management
to identify components needed and the scope and requirements of each.
10) Shape content principles to guide the type and style of content.
Content principles
Content principles
|
Content principles
|
11) Add solution to strategy deck: I included the scope and components in a strategy deck,
including a feature demo and 8 individual net-new app components.
including a feature demo and 8 individual net-new app components.
Components in strategy deck
Sample component (feature demo) from strategy deck
|
Sample component from strategy deck
|
Prototype
12) Ideate on component designs and content with product design in a Figma file.
13) Prototype solutions for leadership and user feedback.
14) Test in user-testing: We took the iterations into informal user research to get feedback
on whether our designs solved the user needs.
15) Component governance: I created a content governance framework including:
13) Prototype solutions for leadership and user feedback.
14) Test in user-testing: We took the iterations into informal user research to get feedback
on whether our designs solved the user needs.
15) Component governance: I created a content governance framework including:
- Standards and guidelines for use
- A governance plan
- Decision tree for helping our team identify components needed
Governance & Guidelines
Governance framework
|
Component standards & guidelines (contextual banner component)
|
Decision tree to determine appropriate component
16) Deliver content and flows, and document content in a separate file.
17) Walk engineering through deliverables prior to coding work and serve as a resource to engineering during build.
18) Review build, create bug tickets, and updated design.
19) Optimize as an ongoing process.
17) Walk engineering through deliverables prior to coding work and serve as a resource to engineering during build.
18) Review build, create bug tickets, and updated design.
19) Optimize as an ongoing process.
Results
I created a product demo and 8 new components to house feature
awareness and user education.
My content design shaped components that are
The UX writing created content that is
To achieve this, I partnered with:
We leveraged placement, imagery, and limited content in our components and
created an evergreen section of the app to house our library of user education.
We tested the components on users and refined the components based on
continuous feedback. Components are launching individually over the coming months.
awareness and user education.
My content design shaped components that are
- contextual
- visual
- immediately actionable
The UX writing created content that is
- simple
- human
- engaging
To achieve this, I partnered with:
- product to agree on the number, types, and requirements of components
- product design to shape the look, feel, and experience of the components
- engineering to enable dynamic and contextual education across user touchpoints
We leveraged placement, imagery, and limited content in our components and
created an evergreen section of the app to house our library of user education.
We tested the components on users and refined the components based on
continuous feedback. Components are launching individually over the coming months.
New Components (3 of 8)
Settings card
Dismissable banner
Journey stage: Awareness & Adoption Eligibility: Low-level features Logic: Triggered by settings open; persists until dismissed |
NUX tooltip
Tooltip pointing to a feature interaction
Journey stage: Awareness & Adoption Eligibility: Contextual to surface or flow Logic: Appears on first view |
Contextual banner
Dismissable banner at top of contextual screen
Journey stage: Awareness & Adoption Eligibility: Screen-related topic Logic: Triggered by screen open; persists until dismissed |
Example slideshow
What I learned
Project takeaways
1. Users need ongoing product education
- Not just in the new user experience
2. Iterative content speeds timelines and helps users
- Launching 8 components in succession rather than simultaneously enabled:
- make an immediate impact
- prioritize order of component launch
- add component functionality to the components launching first to increase configurability
3. User research is important before, during, and after launch.
- User-driven content and design
- Capture feedback throughout
- Process and relay effectively