Avast Secure Browser

Product design  ·   UX/UI   ·   Web design   ·   Illustration   ·   Branding

b-2

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 designer duo, 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 designer 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.

Security & Privacy Center

The core of the product offering is called a Security & Privacy Center. It's a settings page where users manage their security features and preferences. It's currently aimed at a more advanced user, with presets for a regular user still to be explored. The features listed in the Center are mostly background functionalities, but some do require for the user to interact with them via a UI dropdown as part of the main taskbar, e.g. Adblock or Hack Check.

b-3-3

No phishing allowed in these waters

Part of the Avast Secure Browser's proposition is a proprietary technology of automatic blocking of malicious pages and downloads. Different use cases had to be considered for the downloads to not only block downloads that have a positive match depending on a file type, but also the cases when the user has other antivirus software installed or if the engine can't determine whether the download is malicious. This was particularly important so as not to unnecessarily block user's workflow. The research that we had conducted seems to suggest people prefer convenience over too many restrictions.

b-46

Bank Mode

Redesigning Bank Mode, which was part of the previous browser solution, was one of those projects where we wanted to apply the proper product design workflow, from identifying pain points, to iterating, prototyping and testing different solutions to find the optimal one.

Bank Mode is technically a separate desktop that isolates user's browser session so no spyware can detect what user types, nor take screenshots of their display. The biggest pain points we identified in the previous solution, apart from the outdated design, was:

•   non-existent onboarding and help section

•   frictional navigation pattern when switching between desktops

•   missing language tools (which was especially important for users who type and switch keyboard regularly - copying and pasting between regular desktop and bank mode is prohibited)

•   unclear messaging and some user flows

 

Onboarding

Introducing simple onboarding dialog helped the user understand the context of switching the desktops.

Image not found
Navigation concept A and B

The old navigation pattern was using a concept of moving between screens horizontally with arrow buttons. This type of navigation didn't feel coherent, as the buttons were placed in different areas on each desktop due to technical restrictions of regular Windows desktop. We wanted to update the navigation by creating a pattern that would keep the placement of the switch navigation in the same position. We called the first concept the 'Thumbnail Switch'. It failed when testing the prototype.

Image not found

The second pattern we were iterating on was the 'Minimize' concept used as a traditional pattern of opening Windows apps, since Bank Mode is technically an app. This concept was too meta, since it involved minimizing not only the Bank Mode within Windows, but also different apps within the Bank Mode. It was another no go.

Navigation concept C

With the third iteration we got the closest to perfection. Switching between desktops with consistent tabs provided users with a stable navigation pattern in one place. This performed well in prototype testing, so we had it developed confidently. However...

Image not found

The biggest learning on this feature redesign so far came in a form of user feedback once the design went live. Although the tabs helped objectively to navigate better between desktops, the tabs were covering parts of content which a few users reported as an annoying issue. I got back to iteration mode and eventually landed on the exactly the same pattern where we started - switch buttons. Don't fix what isn't broken. Duly noted.

Image not found

Engage. Reengage. Engage again.

User engagement is another area where we've continually iterated and tested different concepts. It is a very difficult market to compete with giants like Chrome or Firefox, that's why various tactics, assumptions and cross-product promotions get tested over time. From the initial setup screen, contextual messaging to product walkthroughs (which unfortunatelly is still on the roadmap), it's a long, never ending process. What seems to be working the most is being as simple as possible in messaging, using proper bradning to buy into the brand authority, and keeping the product (not only within the enagagement) as close to industry standard as possible. Most importantly, using simple laymen terms to explain the product value and then stepping aside to give the reins over to the user.

b-123

A door to secure browsing

No product is of any use unless it's value is explained and sold to the user. It's usual that marketing and web teams handle the product pages, but we decided to go ahead and design one within the browser team ourselves, so that the information provided would be most relevant to our knowledge of the user, as well as visual presentation tied into the product ecosystem. The page is using the design system template created by Avast web team, who recently developed an updated the brand's visual identity, which I like a lot. Well done, guys!

b-27

Product icon

Prior to launching the product, an older version of the product icon had to be updated and tested in order to be visually aligned with Avast's brand, as well as stand as a proud member of the community of browsers in the world.

b-16

Show must go on...

This is the longest project I've had the opportunity to work on. It's still in a growing phase and many more iterations to come to attain it's respectable place among the browsing superpowers. Currently we're working on bringing new and updated features like Adblock 2.0 (properly researched and tested to cater to the most important user needs), browser sync and most importantly, updated mobile version to not only narrow the gap on feature parity between the mobile and desktop, but also to bring it closer to the mobile industry standard and use cases for private and secure browsing. Stay tuned, the case study is coming soon...

Next project