Onboarding Strategy for Firefox Android

I came up with a high-level design strategy for onboarding users: "Connect + Scale = Explore Firefox". This strategy aims to create a framework to scale team efforts for future release and also provide smart and valuable content for new users.

This was presented to Android mobile team leads.

Transcript

1. Firefox for Android
   Onboarding Strategy
   Yuan Wang June 2014
   draft
   

   View Slide

2. Firefox for Android tablet | June 2014 | Page 2
   Contextual hints First-run tour
   What’s new
   SUMO help
   user education
   UI affordance impr
   n context tips a terminology problem
   

   View Slide

3. Firefox for Android tablet | June 2014 | Page 3
   Contextual hints
   First-run tour
   what’s new
   SUMO help
   User education
   NEW FEATURES
   ?
   ?
   ?
   

   View Slide

4. Firefox for Android tablet | June 2014 | Page 4
   Connect Scale
   Identify touch
   points
   Create modular
   guidelines
   +
   We’re not designing pages, we’re designing systems of components.
   — Stephen Hay
   

   View Slide

5. First-run Get started
   INSTALL
   Cross platform sharing: Firefox Account
   Core value : Fast/Safe/Customizable/Open
   Tune your
   browser
   Just enough
   information
   Fun and
   human
   

   View Slide

6. Get started
   First-time tips ≠ contextual hints
   Things that
   matter
   Show not
   just tell
   Easy to
   Learn
   Identify areas to show first-time tips
   How to make them smarter and personal?
   LAUNCH
   

   View Slide

7. What’s new
   How much new stuff should
   we show to a first-time user?
   First-time tips
   Get started
   We need to establish a system to introduce new features.
   UPDATE
   

   View Slide

8. Contextual hints
   What’s new
   Additional
   bonus
   Suggested
   for a cause
   Retrievable if
   being missed
   We also need to establish a system to show the hints that
   were missed by the users.
   OVERTIME
   

   View Slide

9. First-time tips
   Get started
   What’s new
   OVERTIME
   Contextual hints
   INSTALL
   UPDATE
   Connect Identify touch points
   LAUNCH
   

   View Slide

10. First-time tips
    Get started
    What’s new
    OVERTIME
    Contextual hints
    INSTALL
    LAUNCH
    UPDATE
    Connect
    WHAT IF
    The user skipped FX Account?
    Never opened guest browsing?
    Skipped the tour/tips?
    Missed the hints?
    Identify touch points
    

    View Slide

11. The user skipped FX
    Account?
    Never opened
    guest browsing?
    Skipped the tour/
    tips?
    Missed the hints?
    Connect → Scale
    Explore Firefox
    First-time tips
    Get started
    What’s new
    Contextual hints
    A HUB TO
    

    View Slide

12. Explore Firefox
    A HUB TO
    SHOULD BE SHOULD NOT BE
    easy to access
    up-to-date
    relevant
    an another SUMO
    help site
    brief and visual
    something the user
    has to manage
    To scale, we need to create modular guidelines
    

    View Slide

13. Explore Firefox — easy to access
    Home Screen
    End of “Get Started” Notifications
    Top site tile
    for first-run
    SUCCESS!
    Start Browsing
    Explore Firefox >>
    Explore
    Firefox
    Top Sites Bookmarks History Explore
    Firefox
    Top Sites Bookmarks History
    Explore Firefox
    Check out new features in Firefox including
    contextual tips, guest browsing
    

    View Slide

14. Explore Firefox
    Explore Firefox — up-to-date
    First-time tips
    Get started
    What’s new
    Contextual hints
    EXPLORE FIREFOX
    P1
    P2
    P2
    P3
    Set up Sync
    New hub panels
    Clear all history
    The user skipped FX
    Account?
    Never opened
    guest browsing?
    Skipped the tour/
    tips?
    Missed the hints?
    

    View Slide

15. Explore Firefox — relevant
    PRODUCT LEVEL
    VERSION LEVEL
    USER LEVEL
    EXPLORE FIREFOX
    Set up Sync
    New hub panels
    Clear all history
    First-time tips
    Get started
    What’s new
    Contextual hints
    P1
    P2
    P2
    P3
    

    View Slide

16. Explore Firefox — brief and visual
    Explore Firefox
    EXPLORE FIREFOX EXPLORE FIREFOX
    

    View Slide

17. Connect Scale
    Identify touch points Create modular guidelines
    +
    EXPLORE FIREFOX
    First-time tips
    Get started
    What’s new
    Contextual hints
    

    View Slide

18. Call to action
    [Product]
    [UX]
    Deep dive into the strategy from product perspective
    Refine modular principles for each section of onboarding flow
    [Engineering]
    Keep the ongoing work with a picture of “Explore Firefox” in mind
    [All]
    Start using a unified language to communicate onboarding
    Explore possibilities of “Explore Firefox”
    Design everything
    Explore technical feasibility of design proposals
    

    View Slide

19. !
    !
    Thank you Yuan Wang
    yuan@mozilla.com
    Q&A
    

    View Slide