TunnelBear for Teams: Scaling a Successful Consumer Product to Businesses and Organizations
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.
Trouble in Bear-idise
"It's a lot of work to sign up and manage multiple 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.
I was a "UX Team of One" in the creation of TunnelBear for Teams reporting in with the CEO and design team, working cross-functionally with Marketing, Support, 1 Back-end Dev, and 2 Front-end Devs.
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)
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.
Managing Admin Permissions
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
Viewing and Printing Invoices
Does/Doesn't belong to existing team
User Flow Diagram
Once consensus was reached on the Problem Map, translated to User Flow Diagram
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.
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
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
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.
Final Hero Illustration
By resident bear-istration expert Andrew Willis
My Bear-istration Samples
Some of my illustrations that made it into the final product, and some that did not.
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
Worked with Marketing and CEO on PR Package and graphics for launch
Launch Coverage: Featured in Venture Beat
"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