Simple & Pretty — Product design & strategy for startups
Redesigning Mullvad VPN
The safest, easiest, most reliable way to use the internet
Project background
Mullvad’s mission is to make all internet censorship and surveillance ineffective, by helping all individuals to be secure online using their VPN service.
Their VPN was ranked among the top 5 most private and secure VPNs in the market worldwide, but was technically complex to use and mainly targeted to high-proficient tech users.
When it came to user experience and offering, Mullvad had a competitive disadvantage against sleek VPN clients with less security standards, but with easy-to-use interfaces across platforms, such as VPN Express and Encrypt.
We came into the project to help them delivering a user-friendly experience within the required security standards.
Mullvad's existing VPN clients
Window left & macOS right
Project objectives
Designing a cross-platform (Mac, Windows, iOS, Android and Linux) app, which combined Mullvad’s high security standards with a more intuitive and engaging experience.
Business goals
With the new VPN client, the project team was aiming to:
• Increase conversion after free trial
• Increased active paying users
• Decreased customer support requests vs active users
Challenges
• Most people don’t use or know about VPNs
• App would not be native and needed to share a common interface across platform
• No existing user data or analytics
• No UX team, culture or process in existing team
• Preconceived solution requirements
In order to help Mullvad, we had to develop a better understanding of the company, its team, technology, future, competition, existing and target users… And much more about internet surveillance, censorship, security and VPN usage.
Judit mapping out Mullvad’s customer journey.
How we learnt about the problem
We started by conducting stakeholders’ interviews, followed by some project team workshops, while doing market and customer desktop research. We interviewed Mullvad’s customer support team to identify the needs and problems existing customers had with the service.
We looked into their competitors to identify Mullvad's strengths and competitive advantages, as well as weaknesses and room for improvement.
As Mullvad’s has a strict ‘No user tracking or logging’ policy, to get a better understanding of their target audience, we interviewed many internet users: some existing Mullvad customers; other VPN users and non-VPN users.
To cast the net wider, we spent a lot of time in VPN and security online forums on platforms such as Reddit to gather users impressions and opinions.
Research insights
Internet security is complex and deep. While there was an increasing public awareness, most understanding was vague and superficial.
In fact over 70% of internet users either didn’t know what a VPN is or had never tried using one. Whereas, many of Mullvad’s existing users seemed very tech proficient, with specific security requirements fulfilled by Mullvad’s existing app offering.
By making being safe online simple enough, Mullvad had a bigger market opportunity to reach, not only VPN existing users, but also break into the 70% of non users… At the same time allowing most experienced users with specific security requirements have access to the functionality they needed.
Mullvad’s preliminary personas, based on user types and motivations to use a VPN.
Reaching the 70% would not be easy though. The apps would have to do a better job bridging the gap most security products have with normal internet users. The experience should take inspiration from non-security apps and appear where they do — Not be trapped on the Mullvad website and security forums.
The experience would also have to feel fast and easy, so the user doesn’t feel confused or intimidated, and doesn’t get in the way of what they were doing.
How we helped defining the solution.
We presented our insights and recommendations from the discovery research followed by a Q&A to discuss impressions and clarify what we’ve learned. We do this, so we can align with the team, and everyone understands why design decisions are being made, which reduces subjective or biased discussions later on.
No-logs privacy policy, speed, ease of use, control, automation and scalability were key solution requirements for Mullvad.
Solution requirements
• Simple, fast, intuitive interface, that can work on all platforms, with minimal platform specific variances.
• Focus only on primary info and functionality in UI, hide complexity.
• Encourages ‘Set and forget’ usage.
• Show don’t tell — use colours, animations, interactions and transitions to clearly communicate to the user whether they are safe or not, and whether they need to do something.
• Inclusive — should be usable by users with common access needs.
• Available in OS’s official app stores
Mullvad VPN app Product specifications document. In Google Docs for team collaboration and feedback.
A collaborative approach
As the Mullvad team contains many technology and security experts, we felt it was important to define the product UX requirements very collaboratively.
We did this by running a workshop with the team to prioritise app functionality and creating the product specification document in Google Docs, so we could then iterate collaboratively as a team. To prevent chaos ensuing, we used commenting and the product lead moderated changes to the doc.
An iterative strategy
As often the case, the product spec document grew long. To prevent feature creep and development taking forever, we encouraged a single-platform MVP first. We could beta test and iterate on it before launch, release on the other platforms and afterwards add more functionality.
Due to team capabilities and technical constraints, it was decided to go MacOS first. We helped the team to break up the product spec into milestones and then populated a Trello board with the prioritised tasks, into sprints.
Design plan for Mullvad’s MVP cross-platform app.
How we created the user experience.
We first started mapping and breaking down the experience based on functionality. We identified key user flows and optimised them to the least steps and user interaction possible.
Through many sketches, mockups and prototypes, we repeated ‘design > test > learn’ iterative loops to refine the experience, so it was simple and intuitive enough for most to use, but at the same time containing functionality that more advanced users required.
We created the interface and its interactions with the goal of providing users with reassurance, ease and speed of use, convenience, clarity and control.
Reassurance
Using Mullvad’s strong visual brand, we made the UI inside and out very clear to whether the user was connected or not. With just glancing the app or menubar icon, users could see if they were safe (green, locked padlock) or not (red, unlocked padlock). With a big button to disconnect (red) and green (connect).
Ease and speed
Beyond connecting and disconnecting, the next most likely thing a user would want to do is switch location.
The standard VPN experience is to disconnect, select server, reconnect, which is bad for both security and the user experience.
So, we designed it so users could select and connect to a different location in two taps, keeping the user secure and connected throughout.
Clarity
To show and teach the user what was happening and what state their connection was in, we used large typography for key information like location. We also used a simplified map in the background to show the user where the internet thought they were.
Control
We wanted for users, regardless their technical proficiency, to understand what is happening when using their VPN so they can be in control of their actions.
Labels, instructional text and contextual help on functionality were written in plain language across the interface, with a particular focus on Settings, so features could be better understood by the user.
Convenience
We wanted the app to run on ‘auto-pilot’, so the standard user could just install it and forget about.
So we prioritised launch application on-startup, auto-login, auto-connect and auto-reconnect, so the user was safe by default, without doing anything, with option to change if they preferred.
How we executed the user interface.
To manage the migration from the existing VPN client to the new, the back-end development team needed to update its tech-stack, while maintaining the one that was powering the existing apps.
This meant front-end development could have a head start, working along side us, which allowed us to collaboratively build the front-end, test it with users and iterate before plugging in back-end functionality.
Tappable Mullvad VPN app prototype in InVision.
Dev collaboration
We created the design system and screens in Sketch, design specs in Zeplin, prototypes in Invision and UI demos in Codepen, so we could communicate efficiently with the front-end developers and execute the interface the way it was meant to look and work.
We coordinated our workflows, so we could build and test different prototypes quickly, with daily builds and catch-ups, and ongoing communication on Slack.
Mullvad VPN app Design system shared in Zeplin.
User research & testing
All user research was conducted remotely, running one-to-one interviews with testing via screen sharing and weekly diary studies with follow-up interviews.
We recruited participants to gather qualitative user feedback through Mullvad’s website and their networks.
To gather fast quantitive user insights, we used Usabilityhub to conduct click tests, nav tests, design surveys and preference tests to make sure all design decisions were informed with evidence.
Research findings were shared and discuss with the team via Slack and design actions were agreed during stand-up meetings or specific team calls.
These then were translated into tasks on the project Trello board to keep track of ongoing work and production sprints.
Release
We conducted several internal, private and public beta releases of the MacOS app before official release to make sure the app was stable and secure.
During the public beta, we continued to work closely with the development team, designing and implementing new functionality and extending the experience in multiple, iterative releases.
We also worked with their marketing team to produce assets for their website and social channels.
What the press said...
“Mullvad has changed where it needed to and everything else has remained the same or become stronger. With its commitment to privacy, anonymity (as close as you can realistically get online), and performance Mullvad remains our top recommendation for a VPN service.”
