Avast Secure Browser is a chromium based browser with emphasis on security & privacy to serve as a more private alternative to Chrome when swimming the wild waters of the internet. 

As a part of a team, I've had the opportunity to embark on a mission of launching and improving the product, making a mark among the security & privacy enhanced browsers like Firefox or Brave.

My role originally started as a UI designer, eventually forming into an overall product design role. 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, privacy, account, onboarding and settings features, 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.

Product design work is a never-ending iterative process. A built-in Adblock is 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 and easier to understand was born.

Adblock v1

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.

The most complex feature I've had the oppotunity 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.

Flows example of cross-platform sync - Android / iOS

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.

Security & Privacy Center 

The core offering of the product lies in it's added security & privacy component. All of these settings can be set in a Security & Privacy Center. The dashboard layout works primarily for the advanced audience, as the messaging is based around technical functionality, rather than simplified benefits point of view.

Hack Check functionality has been especially well received, as it automatically checks for password leaks to the dark web and notifies you if you've been breached. I've had the opportunity to design the flows and functionality. 

Going mobile

No browsing experience is complete without continuing your session on any device that is available to you at any given moment. This is why Android and iOS versions were a must. When approaching mobile redesign, we decided to abide by some of the rules that we observed worked in the desktop version:

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

Branding and illustration

To relax the technical aspects of the product and create an emotional connection with it, I was tasked to come up with illustrative style that would complement the browser UI, be consistent with other Avast products and not overpower the interactive elements at the same time. As it usually is, this was a slow burn kind of project and the style evolved over time. 

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.

Keep on keeping on

This is the longest project I've had the opportunity to work on. It's still in it's growing phase and many more iteration, tests and user research need to be done for this product to attain it's respectable place among the browsing superpowers of the world.