Avast Secure Browser
A new browser built around security and privacy that still had to feel familiar from the first minute.
- Company
- Avast
- Role
- Product designer, UX for the MVP
- Team
- PMs, devs, UX research, UX writers, 2 designers
- Result
- Shipped in 9 months, in 30+ languages
Context
In June 2017 I joined the team building a new version of Avast's browser, Windows only for the first release. I started out owning both UX and visual design. A second designer joined two months later and took over most of the visual work, so I could focus on flows, structure and testing. Several features came from other Avast teams, so a lot of the work was coordinating with their designers, plus user researchers, UX writers, PMs and developers.
The problem
Research showed two things that pulled against each other. People knew online threats existed, but most didn't think about them much, even when shopping or banking online. And they were conservative about browsing. They didn't want new ways of doing something they did every day.
So the browser had to make protection visible and explain why it mattered, without feeling unfamiliar. Building on Chromium solved the familiar part. Tabs, address bar and settings worked the way people expected, which let us spend the design effort on the security and privacy layer.
We set three goals for the MVP:
- Familiar from the first minute. No new patterns where an existing one works.
- Security and privacy up front. Avast's features should be easy to find and recognise, not buried in settings.
- Explain, don't just switch on. Show people why each feature is worth using.
One place for protection
The core of the MVP was the Security & Privacy Center: every protection feature in one place, opened from an Avast icon in the toolbar. I sketched several structures, from a settings-style list to a grid of feature tiles, then built the strongest as mid-fidelity prototypes and tested them with users.
The tests gave us the finding the rest of the design was built on. People who had said they didn't care much about security paid attention once the features were visible in the browser. The final Center uses tiles, each showing its state and a single toggle or action. Opening a tile shows a lightbox with what the feature does, why you'd want it, and a pro tip.
Built-in add-ons
Research also showed which extensions people already relied on, so three came built in: Adblock, VPN and Video Downloader. Each one got a small panel from the toolbar with its state, one main control and details on demand. That way they looked like part of the browser rather than add-ons from three different teams.
A pattern library for a spread-out team
The Avast design system was still being built, and our team was spread across several countries. I started a pattern library for the browser, covering buttons, switches, icons and windows with their states and specs. It kept design and development aligned, and the plan was to grow it into a full library with assets and code snippets.
Testing to launch
Every major part went through a usability test, with static mockups, interactive prototypes or early builds of the browser. Final designs were made with the visual designer and UX writers: high-fidelity mockups in Sketch and InVision, micro-interactions in Origami, and specs in Zeplin. The browser launched in more than 30 languages, so testing the translated copy was its own workstream.
Once the first functional build existed, we ran remote usability tests on the scenarios that mattered most: the security features, the built-in add-ons and how they fit into normal browsing. We fixed what the tests found. One feature wasn't ready, so we moved it to a later release instead of shipping it half-done.
Launched to pilot countries in February 2018 and in all countries a month later.
What I took away
Visibility changes behaviour. People told us security wasn't a priority, and then engaged with it as soon as it was in front of them and explained in plain language. The other lesson was about workload. I designed two or three parts at once, for several development teams, with priorities shifting every week. That only worked because we communicated constantly and kept shared specs up to date.