The safest and easiest way to use the internet.

How we helped Mullvad to redesign their cross-platform VPN apps.

 

A promotional image for the MacOS launch of the Mullvad VPN app.

 

Project: Mullvad VPN apps

Year: 2017

Platforms: MacOS, iOS, Android, Windows, Linux

Skills: Strategy, Design, Production

Website: English

 

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

Existing Mullvad VPN Windows client app.

Existing Mullvad VPN macOS client app.

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. 

 

Pattern analysis from Mullvad’s customer reviews.

Benchmark analysis of VPNs.

 

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.

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.

 

Mullvad VPN app First time connect flow.

Mullvad VPN app Switch server flow.

 

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

 

Sketching connection state visualisation on Mullvad VPN app icon.

Early concept sketches of connection states of the Mullvad VPN app.

Using Mullvad brand colours to clearly communicate connection state in the app and app icon.

 

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.

 

See the Pen MV states by Matt Homer (@mjhomer) on CodePen.

A Codepen to communicate Button and List-item styles, in normal, hover and active states to Mullvad's developers.

 
 

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

 

Heatmap showing results from click test, in Usability hub.

Results from preference test on date format, in Usabilityhub.

Template for Mullvad’s weekly user diary study.

 
 

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…

A fantastic VPN has a great new look
“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.”
Ian Paul, Contributor at PC World