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 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.
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.
- 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
- 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