Evolving a cross-platform security product, reaching a 20 million strong userbase / Avast Secure Browser

As a part of a browser team, I've had the opportunity to embark on a mission of launching and improving the chromium based product, competing with the security & privacy enhanced browsers like Firefox or Brave.

I've had the opportunity to work on many areas of the product, from participating in research sessions & user interviews, defining the jobs to be done and consequent UX & flows of various security enhancements, user account, onboarding and settings, visually designing and feedbacking implementation with the developers, illustrating and exploring the visual direction of the browser brand (including the product icon), designing the product page and more.

Increasing activation rate by 8%

One of the underlying strategies for the product was to make it as frictionless as possible for users to adopt, switching away from the elephant in the room - Chrome. By continuous improvement of the onboarding flow, A/B testing different nuances, from high-level layout organisation, to iconography to headlines and even button colour we were able to increase the activation of users by 8% over a period of 3 months.

The key mental model at play - make the switching costs minimal, by allowing the user to carry on where they left off in their current browser without friction.

Adblock as a balancing act between user and business

Product design work is a never-ending iterative process. A built-in Adblock was one of the core offerings of the product. The first version featured a number of issues that came up in user testing. Most importantly:

• it wasn't clear what was the function of main button, problematic was also its affordance
• the uses cases that Adblock v1 covered were limited
• in the user testing it became obvious that pausing adblock is preffered primary CTA than whitelisting sites - it was missing a strong reassurance signifier
• an element that would subconciously make the people feel protected - it wasn't transparent which ads actually do get blocked and which do not - as whitelisting partner sites is the way adblocks are monetised. Thus, the effort to redesign it, make it more transparent, easier to understand yet not lessen the browser’s LTV - the key product metric.

Competition analysis

The redesign started with looking at the competition. Based on the common patterns we identified the most important use cases that the Adblock should handle, focusing on regular users first. As part of the stakeholders requirements, a more transparency had to be introduced using custom filter lists.

Iterating, prototyping & testing

Light interfaces perform best within a light browser theme. However, the original Adblock was completely devoid of any Avast branding, which could have had a negative long-term impact on overall brand awareness. The iterations took me through the journey from fully branded interface to finding the balance between the blue avast theme and light browser theme.

Final design

After a number of iterations and consecutive prototype testing, where we validated the usability, call to actions and overall understandability of the feature, we eventually arrived at destination Adblock V2.

Each feature in Avast Secure Browser requires its own settings. This was another aspect of the redesign we dived in, introducing a transparent tri-state to simplify the settings for average user.

Cross-platform sync

The most complex functionality I've had the opportunity to work on was cross-platform syncing - enabling to sync browsing data, such as history, bookmarks, passwords, and others across all devices - Windows, Mac, Android and iOS. Since Avast Secure Browser is chromium based, it meant we didn't have to reinvent the wheel but use chrome's sync implementation, modify it, add in flows that made sense for the Avast ecosystem and requirements.

The process of developing the feature was spanning multiple months, when we had to scrutinize every bit of detail, understand the sync architecture and create the flows, designs and copy that would work. Although basing our design assumptions on already existing solution, we still wanted to test a prototype, which gave us valuable insights into how people understand and perceive the functionality. We then used the results in further design iterations.

Especially complex it became when dealing with mobile implementation, as a single sign-in had to handle not only the sync flows, but also subscription of Pro mobile features.

Especially complex it became when dealing with mobile implementation, as a single sign-in had to handle not only the sync flows, but also subscription of Pro mobile features.

Going mobile: Don't diverge far from industry standards

It's not wise to reinvent the wheel. Especially when people are so used to the browsing experience on Chrome with its 60% market share. We kept it close to our hearts and tried to keep the interactions similar, adding our own bits of flavour to show the unique value of the mobile offering where it made sense. Based on our testing, this approach worked.

Make the core value prominent

The basic value of the browser is its security. It's represented by the shield icon, the same way as on the desktop. It's a signifier that makes the value always present without majority of users ever having to tinker with the settings. For the 20-30 % of advanced tinkerers, a simplified set of security & privacy features is hidden behind the icon, with an option for expert techies to set their advanced security preferences. This line of thinking provides a funnel in which needs of all types of users should be met while the value is present to all. The VPN stands out as the major value proposition of the product, therefore constant iteration on the flows is needed in order to meet those sales targets. As a baseline, we gave it it's separate screen with multiple options to upsell to premium.

Consider major use cases

The originally acquired mobile solution featured a different mental model - it used concept of 'zones' to create different browsing setup for multiple VPN locations. However, based on our testing, it was very difficult to understand and didn't follow any major mental models people associate with mobile browsing. Therefore we iterated and eventually changed 'zones' to 'browsing modes'. This was immediately understood.

We eventually simplified the number of modes to reflect on two major use cases with an option to create your own custom mode if specific VPN setup is regularly needed: Secure Mode - a regular browsing mode with a set of customizable options, like VPN or adblocking for your everyday browsing needs Secure & Private Mode - used primarily if people want to stay private when doing those embarrasing searches (as opposed to Chrome's incognito, which doesn't really keep you private from your internet service provider or employer - surprisingly high number of people don't know that). The presence of VPN deals with these issues, even in the regular secure mode. On top of that, this one deletes the data automatically on exit.

Icon & Branding

Prior to launching the product, an icon test was ran with various styles and colours to see the user's reaction and CTR rate. Evenutally, this was the winning one, which final design I got to refine.

Thank you for your time!

Credits

Team Avast, including Martin Smrt, William Drewett, Zbynek Sterba and others.