TunnelBear for Teams: Scaling a Successful Consumer Product to Businesses and Organizations

tb4t.jpg
 

Background

TunnelBear is a VPN app that provides people with a secure and private connection to a less restricted Internet. It has won over more than 16 million users with its super simple user experience and charming bears.

wave.gif
 
Pioneer in flip-a-switch VPN

Pioneer in flip-a-switch VPN

Illustration by Andrew Willis

Illustration by Andrew Willis

 

Trouble in Bear-idise

iu.jpeg

"It's a lot of work to sign up and manage multiple TunnelBear accounts for my team"

 

Although renown for its simple UX, the app was originally optimized for an individual workflow, not for teams. TunnelBear already had businesses and teams using the product, but it took a lot of work to sign up and manage multiple TunnelBear accounts.

 

Developing Em-paw-thy

iu-1.jpeg
  • Keeping track of multiple accounts in a spreadsheet or searching email
  • Making instructions email for new users 
  • Sharing accounts, login info, and/or company credit card
  • Expensing personal accounts
  • Multiple bills & renewal dates
  • Team Owner can't easily delegate account management without sharing login
  • Knowing who's activated account
  • What if someone leaves company
 

Who were the users?

CEOs, CTOs, IT managers, admins, employees of small-medium-large businesses and organizations (2-200+ people, international) concerned about:

  • Secure access (Sensitive files)
  • Travelling workers (Public Wifi)
  • Test localization (Ad Agencies, Startups)
  • Identity/Activity (Journalists, Activism Non-Profits, Competitive Research)
hiding bears.gif
 

    Kick-Off

    • Stakeholder Interviews - Interviewed CEO, design, dev, marketing, support. Marketing had already conducted some initial market validation with a landing page and interviewed manually added team users, so I used that data as a starting point.
    • Reviewed Existing Docs - Rough specs, briefs, and customer profiles
    • User Interviews - Tap beta pool (New users waiting for the Teams Product, existing teams on consumer accounts)
    • Internal Product Research - Understanding the TunnelBear app ecosystem
    • External Competitive Research - Evaluating competitive and adjacent products
    • Problem Mapping - Facilitated Problem Mapping and worked with stakeholders across the company to put together a map of the user's journey for both Team Owners and Teammates, from sign up to team and individual account management.
     

    Problem Map

     

    Considerations

    • Multiple Admins
    • Managing Admin Permissions
    • Deactivating/Reactivating User
    • Deactivating/Reactivating Team
    • Free Trial / Expiry
    • Stored Credit Cards
    • Editing account information 
    • Option to keep existing account + team account
    • Minimizing changes to the VPN apps themselves as that would greatly increase scope
    • Existing / New User
    • Logged In / Logged Out 
    • Mobile / Desktop / Tablet
    • Team Owner (Admin) / Teammate
    • Drop off during sign up
    • Invite by individual email
    • Bulk invite by copy and paste 
    • Bulk invite via magic link
    • Resend/Revoke/Time-out Invites
    • Viewing and Printing Invoices
    • Unified Bill
    • Company Personalization
     

    User Flow Diagram

    Once consensus was reached on the Problem Map, translated to User Flow Diagram

     

    Design Pipeline

    pipes progression.png
    • Sketching, Low-Fi Wireframes & Prototypes - From there I sketched, wireframed and prototyped User Flows, starting with Mobile Web. Test Internally & Externally.
    • High-Fi Comps & Prototypes - User Flows progressed from low fidelity wires to high fidelity comps and prototypes. Began focusing more on Desktop Web. Test Internally & Externally.
    • Web Pattern Library - As prototypes and comps were created, styles were extracted from previous TunnelBear properties (PSD to Sketch) and put into a Web Pattern Library.
     

    Early Prototypes

     

    Lessons from testing

    • Preferred desktop vs mobile
    • Preferred way to invite team
    • Email headline copy
    • Onboarding elements & order
    • Tabs vs no tabs navigation
    • Dashboard features ship priority
     

    Final User Flows Documentation

    View high-res sample

     

    Dev & Creative Kick-off 

    • Once High Fidelity comps and prototypes were approved, Dev kicked-off and Creative Development began in tandem
    • Time to refine the story and replace place-holder imagery with final artwork
     

    Concept Brainstorm

    Mindmap Brainstorm of Creative Directions

    Mindmap Brainstorm of Creative Directions

    Rejected 'Extreme Teamwork" concept

    Rejected 'Extreme Teamwork" concept

     

    Rough Comps

    After exploring several directions, we settled on the "bear office antics" concept. We explored ideas with rough photoshopping, then chose the strongest ones to illustrate.

    tb4t-rough-creative.jpg
     

    Final Hero Illustration

    By resident bear-istration expert Andrew Willis

     

    My Bear-istration Samples

    Reactivated account illustration

    Reactivated account illustration

    Early default avatar illustration

    Early default avatar illustration

    You've been made an admin email illustration

    You've been made an admin email illustration

    Reactivated account email illustration

    Reactivated account email illustration

     

    Rigorous Testing 

    bear-testing.gif
    • Internal User Testing - Provided set of tasks to complete from both Team Owner and Teammate perspectives. Any problems were reported in the same document, from bugs to copy tweaks.
    • Beta User Testing - Tested the product with initial Beta User Teams. Focus on task success for core functions
    • Support Preparation - Support began to prepare a Teams FAQ as common issues were documented
     

    Marketing Landing Page

    Collaborated with design team and marketing to devise and create our Marketing Page which would be the main entry point for new users

     

    Prototype - Admin Sign Up Flow & Dashboard - Web

    *Best viewed on desktop

     

    PR Package

    Worked with Marketing and CEO on PR Package and graphics for launch

     

    Launch Coverage: Featured in Venture Beat

    tb4t-press.jpg
     

    Conclusion

    snuggles.gif

    "It's easy for me to manage my team on TunnelBear"

    • High task success rate for new sign ups as observed in Fullstory
    • Paws-itive feedback from Beta Users and users in the wild