[ BACKUP ]
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.
"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.
Here are some of the sub-optimal workflows the Team-centric customers experienced we learned through customer interviews
- Keeping track of multiple accounts in a spreadsheet or searching email
- Hand holding new users through sign up
- Sharing login credentials
- Sharing company credit card
- Expensing accounts if signed up on personal credit card
- Multiple bills
- Multiple renewal dates
- Multiple people sharing the same account
- Team Owner may want someone else to manage team sign ups and billing so they can focus on other things
- Having to change credentials if someone leaves the company and sharing an account
Who were the users?
- CEOs, CTOs, IT managers of small-medium-large businesses and organizations (2-200+ people, international)
- An organization where securing their data is paramount (Sensitive files)
- An organization with travelling teammates (Secure browsing on Public Wifi)
- An organization that wants to test localization (Ad Agencies, Startups)
- An organization where privacy is paramount (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
User Flow Diagram
Once consensus was reached on the Problem Map, I translated it into a more refined User Flow Diagram
- Sketching, Low-Fi Wireframes & Prototypes - From there I sketched, wireframed and prototyped User Flows, starting with Mobile Web.
- High-Fi Comps & Prototypes - User Flows progressed from low fidelity wires to high fidelity comps and prototypes. Began focusing more on Desktop Web.
- Early Testing and Validation - Tested prototypes internally and with Beta group for early feedback
- Web Pattern Library - As prototypes and comps were created, styles were extracted from previous TunnelBear properties and put into a Web Pattern Library.
User Flows Documentation
- Dev Kickoff - Once High Fidelity comps and prototypes were approved, Dev kicked-off and Creative Development began in tandem
- Creative Development & Illustrations - Up until this point I was leveraging existing assets and rough sketches/comps as placeholder images. Once we got the flows and screens down, we began to brainstorm themes and concepts for the illustrations
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
- 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. Great feedback received and high task success rates were achieved.
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