When diving into the browser shopping extension redesign, an extensive study had to be done to understand the problems and pitfalls of the original solution in order to give it a boost in terms of design, usability and eventually, revenue.

The not so Good, the Bad and the Ugly

As a part of designer duo we started with a deep dive into competition analysis. The land of shopping browser extensions that provide contextual deals and coupons based on the pages people browse is vast and the products varied mainly in terms of their functionality. One thing that became obvious was how similar they were in their execution.

Apart from the outdated interface of the top screen ribbon, lack of brand-product fit and unique value proposition, often irrelavant results, no customizability options and most importantly, annoying behaviour by popping up on every product match without any smarts under the hood to provide personalised results based on the current user's needs.

Diving in

Competition analysis, Swot analysis, perceptual mapping and design execution of different solutions - all these served us as a basis to kickstart our product roadmap and iteration process. One important thing we were sure we had to try to tackle is the brand-product fit. How can we tie security (as the core of Avast's offering) together with online shopping?

Our iterations started with the ribbon layout to not sway too much from the original design. It's limitations became obvious soon - although the value the ribbon layout provides by not covering the content of the current user's page is important, the way it overwhelms the screen by the strong visual contrast (the way web used to look like in the 90's), the rectangular shape that makes the offers uncannily ad-like, the size of images too small to provide enough incentive to click through, all these made us realize this direction is a no go.

Gradual improvements

Eventually we settled on a dialog design overlaying the content. The main reasons being: 

•  it provided a natural frame for any number of offers and coupons to be easily scrollable

•  the offer cards could be of flexible size to display any number of information

•  the flows and interactions resemble the familiar layouts found in mobile devices

•  the design could be kept clean & lean while still very noticable

•  a similar dialog design is used by the most popular of the shopping extensions - Honey

Notify me well or not at all

This is where our own assumptions fell flat and the biggest learning of the project happend for us. We thought people would be enticed by the animated icons to click-through the notification in order to see the deals. They didn't. Once the novelty effect wore off, these became repetitive and quickly dropped their click-through rate. We had to reiterate to reintroduce a notification without any visual fluff. One that would show the value as the very first thing. Not any value, the best value deal. The click-through rate soared as a result.

Quality & credibility

The great analytical minds on our team helped us with the quality of the offer matching by analysing and creating a ranking system in the backend that would not show the low-quality matches at all. Introducing the user rating of the coupons prior to the content changes played an important role. The reduction of low quality offer shows increased the click-through rate overall. Less is indeed more.

A security company and a shopping extension are a weak match. Although this is not an ideal product strategy, we knew we had to update it's lost security offering of secure shopping to give the product it's credibility back.

All aboard!

The onboarding into the product was another area that required some thought. The insights we got from the Avast research team on how using carousels as a way of explaining the value of the product hadn't worked for other products in the past led us in the right direction. We got rid of the carousels on a landing page and showed the product directly. The recipe that eventually worked was: explain the value in the simplest possible way, show the real product, don't overwhelm the user and most importantly, give him a clear call to action. The old onboarding left people in the dark, as in order to experience the product, they had to stumble upon in by browsing shopping sites. A very broken experience.

Visual design

The final visual direction of the project is a result of months long journey of multiple iterations and feature additions. Good design has to mature and only time and consecutive A/B testing can validate where we went right and where wrong.

To make the design / development hand-off bulletproof, we got in the habit of annotating the designs with visual cues. It's been my experience that this simply reduces the amount of needing to feedback the code over time. Even though we used design inpector tools like Zeplin.

Further explorations

Nothing is ever perfect. Although the new design helped boost revenue and reduce churn, it's far from ideal. We have continually looked into different layout options and how to present product matches in a more natural, non intrusive way. It seems to best way forward will be making the offers eventually part of the webpage content itself, but this will require further testing and implementation.

Also dive in