Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firefox Android Tablet Refresh - Sprint Findings

Yuan Wang
April 03, 2014

Firefox Android Tablet Refresh - Sprint Findings

This is an ongoing project at Mozilla Firefox UX team. I am currently working on a redesign of Firefox for Android tablet with two other designers. This presentation is aimed to share findings from our first two design sprints with mobile engineering and ux team.

Yuan Wang

April 03, 2014
Tweet

More Decks by Yuan Wang

Other Decks in Design

Transcript

  1. Tablet Refresh for
    Firefox Android
    Ian Barlow, Anthony Lam, Yuan Wang
    March 2014
    Sprints 1 and 2 findings

    View Slide

  2. Firefox for Android tablet | March 2014 | Page 2
    Goals
    Address feedback
    on current Firefox
    on Android tablet
    Increase usage
    Breathe new life
    into the browser

    View Slide

  3. Firefox for Android tablet | March 2014 | Page 3
    Problem Space
    How can we make creating, switching, and managing
    tabs a quicker and more fluid experience?
    !
    !
    !
    How can we balance a user’s desire to switch pages in
    a single tap with more powerful tools for grouping
    multiple tasks?

    View Slide

  4. Firefox for Android tablet | March 2014 | Page 4
    Design sprints #1
    Tabs - the basics
    creating a tab
    switching tabs pinning tabs
    closing tabs
    handling tab overflow

    View Slide

  5. Firefox for Android tablet | March 2014 | Page 5
    Sprint #1: Concept A
    backwards
    creating a tab
    curved shape background tabs
    tab overflow
    — on-screen controls

    View Slide

  6. Firefox for Android tablet | March 2014 | Page 6
    Sprint #1: Concept B
    creating a tab
    backwards
    Australis style background tabs
    overflow
    indicator
    — desktop-style controls

    View Slide

  7. Firefox for Android tablet | March 2014 | Page 7
    Sprint #1: Control group — Firefox Android
    backwards
    tab
    overflow
    creating a tab

    View Slide

  8. Firefox for Android tablet | March 2014 | Page 8
    Design sprints #2
    Tabs - more powerful tools
    How can we support users
    who have more than one
    task happening in parallel?
    How can we provide a
    useful snapshot of a user's
    entire browsing context?

    View Slide

  9. Firefox for Android tablet | March 2014 | Page 9
    Sprint #2: Concept 1
    backwards
    create a new tab
    Access to
    tab panel
    — no tab grouping
    Tab panel view

    View Slide

  10. Firefox for Android tablet | March 2014 | Page 10
    Sprint #2: Concept 2 — tab groups on top
    Tab panel view
    backwards
    create a new tab
    Access to
    tab panel
    create a new tab
    tab groups

    View Slide

  11. Firefox for Android tablet | March 2014 | Page 11
    Sprint #2: Concept 3 — tab groups on bottom
    Tab panel view
    backwards
    create a new tab
    Access to
    tab panel
    tab groups

    View Slide

  12. Firefox for Android tablet | March 2014 | Page 12
    Testing
    Scenario-based moderated testing on usertesting.com
    Each participant is asked to performance the same tasks on three
    concepts.
    Participant is asked about their preference at the end of the test.

    View Slide

  13. Firefox for Android tablet | March 2014 | Page 13
    Findings Tabs - the basics
    1. Desktop style controls are familiar to participants and
    they adopt them quickly
    [Video] Backwards:
    https://www.usertesting.com/highlight_reels/
    ioN8exTzu11TNBioX6x2
    [Video] New Tab: https://www.usertesting.com/
    highlight_reels/biJnGEe1RCtJVsqXREYA?
    id=biJnGEe1RCtJVsqXREYA

    View Slide

  14. Firefox for Android tablet | March 2014 | Page 14
    Findings Tabs - the basics
    2. Visual affordance builds expectations
    [Observations] All participants recognized a “Close” icon on each tab
    and expected that’s how to close a tab

    View Slide

  15. Firefox for Android tablet | March 2014 | Page 15
    Findings Tabs - the basics
    3. Previews of individual tabs are helpful when switching
    between them. Scrolling and dragging through an
    overflow of tabs are expected interactions
    [Observation]People almost unanimously liked current Firefox's
    thumbnail tab preview.
    "I like to see where I am going"
    [Video]Tab overflow and switching:
    https://www.usertesting.com/highlight_reels/
    pZPqngygEnYP1Ebr9ZTy

    View Slide

  16. Firefox for Android tablet | March 2014 | Page 16
    Findings
    4. Provide both "straight forward" features alongside
    "power user" features
    Tabs - more powerful tools
    [Video] Tab group preferences
    https://www.usertesting.com/highlight_reels/1ZYBhtupYYcqV6Lu99gm
    no tab group by default
    +
    tab groups as a customized feature

    View Slide

  17. Firefox for Android tablet | March 2014 | Page 17
    Findings Tabs - more powerful tools
    5. Brand new features that are different but still useful
    require some time to become familiar to the user
    tab groups
    on-screen
    controls

    View Slide

  18. Firefox for Android tablet | March 2014 | Page 18
    Conclusion — recommendations
    Tabs on top
    Visual tab previews in addition to
    core tabs
    To build:
    To explore:
    Tab grouping in the future
    Ergonomic controls
    To seek feedback:
    • What’s the priority for this?
    • How to measure its success?
    • Make it a secondary/optional feature?

    View Slide

  19. Firefox for Android tablet | March 2014 | Page 19
    Conclusion — next steps
    •Design refinements
    •Looking for engineering resources
    •Moving into other focus areas for tablets
    •new tab group ideas
    •customization
    •paper-cuts in the current product
    •search enhancements
    •ergonomics and form factors
    •user education and help support
    •Gesture-based interactions?

    View Slide

  20. Thank you!
    Ian Barlow,
    Anthony Lam,
    Yuan Wang
    !
    March 2014

    View Slide

  21. Firefox for Android tablet | March 2014 | Page 21
    Appendix — 10-day sprint process
    Developed on basis of Google Ventures 5-day design sprint:
    http://www.gv.com/lib/the-product-design-sprint-a-five-day-recipe-for-startups

    View Slide

  22. Firefox for Android tablet | March 2014 | Page 22
    Appendix — reflect on process
    What worked well: What didn’t work so well:
    • Didn’t narrow down all the
    themes for sprinting in advance
    • Limited time spared on sprinting
    due to PTO, other projects,
    TRIBE, etc
    • Remote creative collaboration
    takes time and extra efforts
    !
    • Receive stakeholders’ input
    early in the process
    • Efficient tools: usertesting.com,
    Hype 2
    • Constant check-in and
    communication
    • Clear expectations on next
    steps

    View Slide