Background

In November 2013 comparethemarket.com.au was a desktop only web comparison platform. The Australian version of the very successful UK business, started up in 2011 and was beginning to find its feet.

The desktop model from the UK needed to adapt to the modern technology as traffic  coming to the site from tablet devices and mobiles increased.

Working with the development team our job was to build a responsive, modular and user friendly User Interface.

Design methods

A word on limitations

In an ideal world, we would have dived into user research from the get go, but the business was not willing to fund the time and effort involved.

This was initially a technology lift only, to build a UI that could be iterated upon and allow the business to benchmark its mobile and tablet customer experience.

Competitive analysis

The first step was to review what we had, and what had been done. This involved competitor research, and a lot of responsive design reviews.

The main and only competitor at the time was iselect.com.au which had been in operation for a few more years and was more established in the market. I did an end to end review of their journey and took note of what we could leverage, and where we should be different to make our system more user friendly.

I also reviewed tons of responsive websites, as this was still new for major sites and ecommerce, there were no standards or best practices to lean on. A lot of the work end up being experimentation and iteration through the design process.

Define

From my research and conversations with internal stakeholders, I defined some key guidelines for the design.

  • Make the forms simple and clean
  • Use whitespace well
  • Use colours sparingly
  • Progressively disclose details
  • Add functionality on top of a solid base
  • Use standard components as much as possible

Ideate

The next step was to start designing. Creating wireframe designs and concepts for feedback from the project team and developers.

The developers were vital to this process as they were deciding on which framework to build upon at the same time. With the design influencing, and being influenced by those discussions.

The designs were broken down into 3 main stages of the user journey

  • Quote forms
  • Results and comparison
  • Online application

The first and third elements were fairly simple to design. The results and comparison is were the real design problems arose.

Quote and application forms

I based the form elements off the Twitter Bootstrap 2 framework the dev team had decided to use. To keep the dev scope down we decided to skin the existing components and use them as close to native as possible.

I decided to adopt the touch friendly button style from the mobile design across to the desktop system for consistency and so users could see what choices they had made at a glance.

This meant that the form design UI was a relatively simple and quick task. What we could then concentrate on was how many steps the journey would be split into, and what questions were asked and in which order.

As we knew we would be implementing an A/B testing system on top of this platform, we decided we would change very little so we could compare the new UI’s impact on conversion rates when it launched.

Results and comparison

This section of the site incorporated 2 screens:

  • The results page where users see their quotes side by side to compare their price and features
  • The product info page where users can see a product in detail and begin an online application

A major cornerstone of the brands messaging was the ability to compare products “side by side”. This became quite a point of contention when it came down to the mobile design, simply because putting 2 products vertically side by side was information overload and forced the UI into a very cramped position.

My initial design showed a single product at a time and have users swipe left and right between products to compare. However, feedback internally was that it was not a true “side by side comparison”. Any compromise was made more difficult by the legal requirement to display all product features and exclusions on the initial result screen. This meant that we had to show all the high level information for 2 products side by side on a mobile device (remembering that at the time, the most popular phone size was an iPhone 4, 320px by 480px)

Another design challenge was how to effectively design a filtering system for the results that was user friendly but did not occupy too much space on all devices. The final design used a filter tab bar on desktop and tablet and a modal display on mobile, this kept controls at the users fingertips, without giving them information overload.

The results themselves were laid out in a matrix style layout, with each “row” of details being expandable, allowing for a more detailed comparison of products in the continued “side by side” style.

I was lucky enough to work with a fantastic content writer, who was excellent at reviewing and improving the UI microcopy as well as the guiding language to help users through the process, her contribution improved the end product an immeasurable amount.

Prototyping

Once we had sing off on a the layout for the 3 steps of the journey, I started building designs for different user scenarios.

I decided to use Invision for this for 2 major reasons:

  • Centralised feedback: This was a very important project internally with a lot of stakeholders. We had many meetings and show and tells already. Feedback had been very verbal and ad hoc, and I needed to start getting things in writing and in one central area. Invision comment mode allowed me to centralise discussions and concentrate on required changes only.
  • Visual communication: because of the importance of this project, we needed to be able to visually show what the changes would look like to everyone. Having prototypes in invision allowed all stakeholders to review the design changes in their own time. It also allowed me to build out multiple user scenarios and show the breadth of the work required to justify timeframes.

The prototype was reviewed internally many times over for feedback, review and legal and compliance sign off. We also took the CEO through the design a few times.

As this was such a cornerstone design process for the rest of the company’s quote and sale platform, the approval process was exhaustive and detailed.

The designs were signed of and completed in about 3 months, although that was a far cry from the initial (optimistic) 6 week timeframe.

Testing

We engaged an external company to conduct a usability review of the prototype with user testing in their labs. The results and recommendations were incorporated into the design as minor changes.

The biggest piece of feedback was that users had difficulty seeing the pagination controls on the results page for the desktop version. The touch devices left and right swipe was intuitive, however traditional pagination controls weren’t working.

I changed the results to more clearly show that users were seeing the first 4 results of many via a counter. I also changed the pagination to be more visually impactful and repeated down the page to be more accessible at all times.

Once we had reached a stable working version of the new design we  brought in an external agency to review the accessibility of the design to adhere to WCAG guidelines.

Build and launch

During development I continued to work closely with the development team during the entire build, test and release phases.  We would often collaborate at their machines on minor UI tweaks and front end changes in order to achieve the best outcome.

I really enjoyed working with the dev team on this project, they were as keen to create a fantastic new UI and UX as I was and it showed in their dedication to details and willingness to discuss any issues they spotted.

I was part of the user acceptance testing phases of the build, signing off on the UI and consulting on the motion and interaction layer as well.

Impact

When released the design was accessed on 3 key business metrics across the 3 major device types (Desktop, Tablet, Mobile):

  • Quote complete (getting to results page)
  • Application start (beginning an online application)
  • Application complete (Completed online sale)

For desktop users, the numbers didn’t change from the original design, this was not  huge surprise as we had not changed the quote process or the product offering.

The major impact was on the tablet and mobile devices that were the core of this design project. Mobile and tablet quote completions increased considerably.

The application start and complete numbers did not change for mobile and tablet devices. This was a disappointing result for the business, but personally not one that surprised me. What we did see was an increase in people saving their quote details on mobile and returning on desktops later, as well as an increase in calls to the phone lines after mobile or tablet quotes. This followed my suspicions that users would use their mobile or tablet to do initial price checking, then follow that up with a more thorough scrutiny process and purchase later.

The UI I designed for the health insurance journey was then used as a baseline for the rest of the comparison journeys on the site.

I continued to iterate the design for the health insurance journey over the next few years. We overhauled the results page and product information pages a year later after conducting many A/B tests.

As of writing this, the UI design is still in use at comparethemarket.com.au 🙂

Shout outs to Kev, Guillaume, Leto, Luke, David, Louisa, Mark, Tim, Shaun, Vicki, Nicki, Grainne, Kirsten and Andrew

Requirements
  • Fully Responsive
  • On Brand
  • Multi-channel
  • Accessible
Deliverables
  • Hi fidelity mockups
  • All Front End breakpoints
  • Modular UI library
  • UI Guidelines
Tools used
  • Adobe Photoshop
  • Adobe Illustrator
  • Invision
  • Paper prototypes