Configurable Comparison Chart for Mobile

Image alt tag

Customers Love Comparison Charts

We knew our customers liked comparison charts based on years of optimisation and user testing results. Comparison charts are an efficient and effective way to convey large amounts of information in a digestible and discoverable way. We needed to find a way to leverage the benefits of comparison charts for the smaller viewport sizes of mobile browsers. Unfortunately we hadn't leveraged this insight effectively on our mobile website, so I initiated the project in tandem with our PM team and Dev team. As well as conceptualising the approach, I also took the lead on the UX and visual design process.

Competitive Analysis

It was important to benchmark what other competitors were doing, so we did an analysis across a range of industries. Some of the companies we looked at were competitors (Avast, AVG, MacAfee) and others were leading online retailers (Amazon, Best Buy, Apple).

We wanted to find best-in-class ideas and explore the value of each approach to find any potential gems we could leverage. Through this process were were able to identify a number of common approaches to presenting products features.

Tell The Story of Your Design

Wireframes

Initially it was useful to put together some wireframes to quickly figure out how the page would come together. I created some low fidelity wireframes to map out how the configurable comparison chart could work. I used Figma to create my wireframes and also to create some quick prototypes to test the interactions of the drop downs as well as the informational expanders. I also wanted to be able to run them through user testing. I went through three iterations before landing on a set that I was confident would work.

User Testing

Before going too far with the idea I wanted to validate it with user testing. We already knew that our users liked comparison charts, however this was a new approach so I needed to be sure it would resonate. I started qualitative testing during the wireframing stage to make sure customers would understand the concept. I targeted the tests at 25+ and all testing was remote and unmoderated.

I found that test users responded favourably to the idea, they liked the pinned product name and pricing, the expandable features and the switchable side-by-side products. It was promising validation of the core ideas and gave me confidence to continue.

Tell The Story of Your Design

UI Design

The visual style had to adhere to the existing brand and style of the website. All the imagery, fonts, styling and colours aligned with the global brand guidelines and worked with the broader context of experience flows that customers would come from. The design was created to consistently integrate seamlessly with the wider mobile web experience.

Customers exploring our site needed a seamless experience which inspired confidence and helped them make an informed purchasing decision. Being able to compare different products side-by-side helped customers quickly understand the differences between our offerings and help them to make the right purchase for their situation. Helping users make informed choices helps achieve business goals through less confusion and more traffic to conversion.

A/B Testing

After visual design was completed, we ran the concept through A/B testing for 4 weeks. The concept was a success. We received positive user responses in qualitative testing and validation in A/B testing. The new challenger beat our control experience, adding $250k additional annual revenue and improving the customer experience of the brand.

4
Iterations
12
Screens
2%
lift in conversion
$250k
additional annual revenue

Final Thoughts

Initially this project was risky because the business hadn't done anything like this before. As the initiator I needed get multiple stakeholders onboard so the project would be prioritised and resources could be allocated. Although there were internal challenges, I was keen to solve this existing problem. How do we effectively communicate relevant information about Norton's products on a mobile device? There's limited space to communicate large amounts of information but it could be done if we organised the information in the right way. I was worried that this solution wouldn't help customers understand our products enough to buy. However the final output worked, and we were able to help users understand and make informed purchasing decisions. This contributed to a positive lift which the business was happy about.