Work iSelect

  • Wireframes & Prototypes
  • Interface design
  • Digital style guide
  • Front-end development
  • Digital Art Direction

Each year iSelect provide millions of Australians expert advice on some of life’s most important purchase decisions. After a competitive pitch Icon’s digital team were engaged to review and redesign the iSelect website, and develop a sophisticated digital style guide used to roll-out their other business verticals in a consistent manner. The project was an exciting collaboration aimed at lifting conversions without sacrificing brand personality.


A collaborative effort

Projects of this size are not a solo act. iSelect's management, marketing, developer and analytic teams were involved from the get-go with big ideas and a passion for client satisfaction. Icon's role was to help distill a vast requirements list into immediate fixes and long-term user experience and design lifts. Our two teams worked side-by-side during critical deployment stages, and regular WIPs kept everyone on-task and motivated. User and site metrics also helped refine deployments in an iterative manner.

This is how great projects are conceived, developed and delivered – by building cross-business teams, inspiring new approaches, and delivering measurable results.


Finding the right approach

All good product design starts with wireframes and high-fidelity prototypes. They give our designers and clients the ability to rapidly prototype ideas and functionality before committing to the build. 

Overhauling iSelect's sales funnel was a particularly complex undertaking that required a major usability review, and extensive cross-team development and integration time. Dozens of prototypes we're tested and refined before our teams settled on the best approach.

Prototypes were then converted to static UI designs before being coded and integrated into a live digital style guide.


A pattern library, more than a digital style guide

You've never seen a style guide quite like this. Forget font rules and clear space diagrams – we're talking an interactive pattern library containing every element of a project broken into discrete cut-and-paste code blocks. It's a website for building websites!

The guide allowed iSelect's in-house team to rapidly deploy perfectly styled pages and campaigns on-brand and in record time.