Executive summary
We took a sidelined browser extension with 12M+ installs and brought it back into the spotlight. Along with a brand new visual style, reformed information architecture, and a revised feature set, we introduced an interactive “Privacy Advisor” guide system.
Through meticulous design and development process, our team delivered a completely refreshed product to the praise of our users and leadership. Avast Online Security & Privacy extension successfully returned to the field and started to play an integral role of a major digital touchpoint both for our existing and potential customers.
Team
Product owner: Petra Moravcova
Product design lead: Dmitry Shkaev
Discovery: Petr Augustin
UX researcher: Natalie Schinkova
UX writer: Alysa Yamada
Engineering lead: Jiri Pojezny
Quality assurance: Victoria Usan
Product marketing: Andrew Stark, Joe Bosso
Web design lead: Matej Portes
PR: Marina Ziegler, Mike Healey, Stephanie Kane
Sales & in-product messaging: Veronika Konecna, Lukás Bláha
Documentation & support: Vojtech Holub
Localization: Jan Fiala
Product design lead: Dmitry Shkaev
Discovery: Petr Augustin
UX researcher: Natalie Schinkova
UX writer: Alysa Yamada
Engineering lead: Jiri Pojezny
Quality assurance: Victoria Usan
Product marketing: Andrew Stark, Joe Bosso
Web design lead: Matej Portes
PR: Marina Ziegler, Mike Healey, Stephanie Kane
Sales & in-product messaging: Veronika Konecna, Lukás Bláha
Documentation & support: Vojtech Holub
Localization: Jan Fiala
Problem statement
Amid controversial events surrounding Avast’s subsidiary company Jumpshot and its shutdown in January 2020, the browser extension called “Avast Online Security” (AOS) was an immediate product that had to fall from grace — it was one of the tools entrenched to manipulate user data. That practice was put to an abrupt end, and the company made a U-turn to focus on protecting the privacy of its customers instead.
AOS was put into maintenance mode, its user base and store reviews taking a noticeable hit. After dust settled, it has been lying on the shelf for over a year. In the meantime, privacy became a key pillar of Avast’s commitment to digital freedom and one of the cornerstones of the upcoming rebranding.
With that, it was time for such a high volume and high impact customer-facing product to get back on track and start bringing real value to our users.
Goals
▪️ Revisit an outdated framework and create a new vision for it through design thinking.
▪️ Outfit the product with a new visual style and branding to launch alongside the flagship product called Avast One in late 2021.
▪️ Design, develop, and introduce a set of features centered around our users’ privacy.
▪️ Create both top-of-the-funnel acquisition and end-of-the-road retention user experiences.
▪️ Build integrations with our contemporary product lineup and pave the road to the future integration with the flagship product.
Design process
In the core of our design process we employed a classic double diamond model. Initial project kick-off and discovery phase was covered by my teammate Petr Augustin, who did a great job of preparing the vast amount of material while exploring multiple potential options.
I took up the torch when it came to narrowing down the scope, defining the problem, expanding design work from concepts to high fidelity stage, testing, and delivering the final results.
New information architecture
When defining new IA, our first approach was to retain the single-screen framework and use widget-style cards. I quickly discovered that it won’t be ideal, because:
❗️ It doesn’t have a focal point on the main screen.
❗️ Multiple jobs-to-be-done would compete for user’s attention.
❗️ Tons of controls would further dilute the experience.
❗️ UI space could be utilized more efficiently.
❗️ There’s more features packed in now than it was before, and we’ll need to support the addition of new ones down the road.
With that in mind, I came up with new information architecture, which helped solve all these issues:
🔸 Focal point is immediately clear, so when you look at the screen you know what’s it about and what to do with it.
🔸 Jobs-to-be-done are separated into their own sections and not interfere with each other.
🔸 There’s always a single primary action (and sometimes a secondary one), further supporting a streamlined user journey.
🔸 With this significant layout change, we are able to add more meaning and details to each facet of the product without cramming everything together.
🔸 Much needed breathing room allowed us to create significantly more value for every feature, and any upcoming additions to the set would be comfortably accommodated thanks to the sidebar.
There were a lot more variables that affected the decision-making process. Each UI element and user journey were scrutinized and iterated on. For the purposes of this case study let’s keep it simple and look at the refined, post-feedback screens.
Prototype
After multiple rounds of presenting the new concepts to the stakeholders and gathering feedback both from designer peers and engineers, I got a green light to produce high fidelity assets (shown on the illustration above) and build a prototype in Figma. With this prototype we were able to collect more feedback both internally and externally. Qualitative user testing was conducted with three target groups:
👥 People who were already using this browser extension,
👥 people who were using our products and are familiar with the brand,
👥 and those who were just your normal random participants from different backgrounds and not our users.
User experience research outcome
The UXR results were positive. People really liked the new light visual style (especially the ones from the first group), and they had a blast navigating through the product.
There were a few instances when some people did not understand the meaning of a feature, as the concept itself was alien to them. We addressed that by making occasionally verbose copy more simple and concise — in some places literally replacing a paragraph with a single line of text — and providing a link to the relevant help section on the website.
We also noted and documented all spots when someone thought about where to click a tad bit longer, struggled to find an action, etc, so I could hone rough edges like that as well.
Handoff
After a couple more iteration cycles, we were pretty happy with the new designs, so it was time to hand them off to our developers. As a designer, I always try to support the devs’ workflow by including them in the process as early as possible and providing them with meaningful bits of work, as the project moves forward. With this approach, they are having much easier time with their sprint planning, and could hack away at the foundation, while the hi-fi designs are being prepared and finalized.
Some examples in this project were:
⚡️ Early prioritising and settling in on a group of features that we’re keeping or letting go. This allowed devs to lay solid backend by both refactoring old code and starting to pour concrete for the new features.
⚡️ At the same time we've been discussing and framing a general structure, so people would have an idea what to expect when it comes to frontend development.
⚡️ Designing and shipping collateral items as soon as possible to get them nice and ready before frontend engineers will become super busy with the main UI. In our case it was things like the new look for Privacy Advisor messages, developing new interactive guides, updating static web pages, and covering messaging in various scenarios (”What should we say, if user does X?”, “How might we Y?”, etc.)
During development I’ve been having a lot of back and forth communication with engineers to ensure everything is going according to the established vision. After we began to have visuals produced, it was important to start regular sessions to polish any rough spots that we’ve been founding. Working remotely, I was lucky to be located in the same city as our main frontend dev at that time, so we used to meet, sit down and work together.
Localization to 20+ languages
AOSP is available globally and upon any release or update has to be localized in the following languages: Czech, Dutch, French, German, Italian, Japanese, Polish, Portuguese, Russian, Spanish, Arabic, Danish, Finnish, Hungarian, Chinese, Korean, Norwegian, Slovak, Swedish, Turkish (the list expanded in 2022).
This added an additional level to the challenge. One of the examples of multiplied complexity was producing promo materials required for delivery across various online stores (illustrated below). Another example was the variability in text length for different languages, sometimes very significant and UI-breaking. Big kudos to our QA for catching every single instance where that was a problem, so we could fix it in a timely manner.
How we measured success
Avast has a plethora of very powerful and sophisticated tools to establish and track basically any metric you can imagine (all stripped of any personal data, of course). This is definitely a benefit of working as a designer in a big tech corp. Some of the things we looked at:
— New onboarding
Completion rate and how many features were opted in right away. In about a year in, as we moved some features to a paid tier and generally introduced more of them, the onboarding changed a lot. Essentially, we’ve shortened and simplified it to drive users to the main UI as fast as possible.
— Product adoption
Over the first 30 days: when and how often people engaged with the product and for how long. Uninstall rate was also measured as a part of this metric.
— Usage & interaction
More specific data on how people were using the product and actively engaging with each feature. This helped us a lot to learn what brings the most value to our users based on their preferences.
— Privacy Advisor
One of the feature-specific metrics. How many users complete the guides, how deep do they go, which guides are the most and the least popular, platform rankings, etc.
— Campaigns
Engagement with promotional in-product messaging, a key metric for our sales department. While the extension was not supposed to have any direct monetizaton, it was important to leverage it as a gateway to a number of the other products. This approach changed down the road, when we’ve introduced a subscription-based model, so the full feature set became a part of the suite.
— Feedback
Net promoter score, surveys, and built-in quick feedback forms. We kept track of the product reviews dynamic on Google play store (and other less popular stores). As the product continued to evolve, we've been conducting more user testing as part of our regular work.
— Churn and retention
How many people we’re acquiring vs uninstalls after redesign. Here we saw an uptick in uninstalls right after the release. There is a very simple reason for that. Some people had the extension installed for ages and completely forgot about it, because it was in a hibernated state with zero communication for so long. Now, when they saw a message about the new version, they realized they didn’t want this product, and went about removing it. So, after this wave naturally came down after a few days, we started seeing the installs hugely over-performing the uninstalls, which was driven by promo campaigns, mostly through Avast Antivirus, which started to offer its extension companion once again.
Results
🔸 After redesign, Avast Online Security & Privacy 2.0 became a powerful and important tool that works as a standalone offer and serves as an integral touchpoint of the holistic customer experience. I’m surprising myself with this fancy wordsmithing, but it is what it is!
🔸 With a new shiny look and feel as well as fully reimagined UX, AOSP was the only rebranded product launched alongside the flagship Avast One in our latest design theme.
🔸 We created a new major open marketing selling point and differentiator.
🔸 Added new first purchase sales touch points based on user activity, providing opportunities for effective cross- and up-selling to our other products.
🔸 We simplified navigation across all privacy settings making it much more effective to go through jobs-to-be-done journeys, confirmed by multiple metrics.
🔸 We introduced an interactive Privacy Advisor feature to guide users in real-time and protect their personal information on popular platforms like Facebook, Google, Twitter, and more.
🔸 Increased general awareness about privacy issues and solutions to them comparing to the previous version.
🔸 Our stakeholders were very happy with the outcome, all the way up to the c-suite level.
Personal takeaway
It was a fascinating design-driven project. I’m very grateful for this opportunity to run a big part of the design process and see the success of our efforts. Huge thanks to all people who participated in this initiative, I loved every minute we spent working together.
By the end of my time with the company, AOSP was the product I felt the most emotional attachment to. After redesign, it began to bring a lot of value to the people and became much more delightful to use — a combination of what ultimately matters most.
