User Experience (UX) Best Practices – An Atlantic Canada Perspective

Grant Patten, Digital Media & UX Specialist | Atlantic Insurance Broker, April 2017

User experience (UX) can be defined as the totality of the experience a user has when interacting with a (usually digital) product – their impressions and feelings, whether they’re successful, whether they feel like coming back again. For brokers, this digital product is usually their website and/or mobile app. Following a UX design process generally means conducting some user research and appropriately planning the design of the site before development. Why follow this process? As Roger Pressman stated in his book Software Engineering: A Practitioner’s Approach, “for every dollar spent to resolve a problem during product design, $10 would be spent on the same problem during development and $100 or more if the problem had to be solved after the product’s release.” It therefore pays to follow a UX design process, and one Atlantic Canada brokerage did just that for the development of its website: Cheep Insurance (cheepinsurance.ca), which was named a CSIO Technology Leader (scoring 100% on the CSIO Tech Scorecard), and is focused on providing a simple digital experience for today’s modern consumer.

The Planning Stage

“In terms of research, we did an extensive survey when coming up with the brand concept and we had about 200 people who completed that, which was really helpful in the creation of the brand,” says Jennifer Jackson, Director, Business Development & Operations at Cheep Insurance. The mascot – a cute red bird named Cheep Charlie – brand colours, logo and company name were all largely determined via this survey. “Consumers in the survey indicated that they would like a more fun, cheeky brand concept, so we went with ‘Cheep’ instead of the more straightforward ‘Cheap’ and came up with the little bird mascot to tie it all together.” Jackson and the team of web freelancers she had hired were then able to take this brand concept and build on it to create the entire, unified look and feel of their online presence.

“We did a lot of competitive analysis before designing the site,” says Jackson. “We focused mostly on directs when doing this research because we liked the unified look and feel many of them had with their sites. But one brokerage we did look at was Insurance Jack out of Ontario; we really liked the clean look and feel of their site. We also did some analysis of lead aggregator sites, e.g., Kanetix, LowestRates, because they seemed to get a lot of conversions. And then we also looked at some companies in the US that were doing really well, e.g., GEICO, State Farm and took inspiration from them.”

Jackson’s team put time into creating and revising wireframes before moving into development. Wireframes are essentially blueprints that provide a visual guide, representing the skeletal framework of a website. “The initial website team consisted of one designer and two developers and after meeting with them and discussing the goals and user needs of the project, the designer went away and came back with some wireframes. We then went back and forth with him to get the designs tweaked to where we wanted them, and then he handed the wireframes over to the developers for implementation.”

Design & Implementation

Upon implementing the design, Jackson immediately enabled Google Analytics (GA) to measure her website performance and determine if users were taking the actions she wanted, i.e., conversions. An important factor in determining conversion success is the effectiveness and appropriate placement of the calls to action (CTAs) on your site. These tend to be large buttons with call-out text such as “Get a Quote!” but many factors go into determining if users actually engage with that CTA, including appropriate colour and sizing. “In GA, you can look at heatmaps to see where people are pausing with the mouse and where they’re scrolling, so we set up goals in GA to look at scroll percentage,” reveals Jackson. “This shows us users scrolling through 25% of the page, 50% of the page, 75% of the page and so on. We’ll then try to place our CTAs strategically so that if there’s an action we want them to take and most people are only getting 25% down the page, we’ll place the CTA above that point for example. We also removed our social media icons from some of our conversion-focused pages because we found that having more than one CTA can confuse users. So we keep it very simple, i.e., ‘this is the action we want you to take and there’s nothing else you can do.’ I think this simple design approach has improved our conversions.”

The use of authentic-looking, impromptu imagery of people throughout the Cheep Insurance website is also an effective design choice as there has been research indicating the power of faces in user experience. When users can relate to the images they see, it influences whether or not they stay on your site. Standard stock photos – bland, rehearsed, inauthentic – are typically less relatable. Where possible, use real photos that appeal to your target audience and reflect your brand. A number of websites featuring beautiful, high-res, free photos have been created as a reaction against traditional stock imagery, including Unsplash, Pexels and Death to Stock.

That said, images must be used carefully – through testing, Cheep Insurance found that full-colour, full-brightness images distracted users from noticing and following through on CTAs. However, by darkening those same photos, they took on more of a background quality that kept users engaged while drawing more attention to CTAs, leading to improved click-through and conversions.

In terms of what is next on the UX horizon for Cheep Insurance, Jackson indicated that they’re looking at integrating live chat on their site and making video part of their communication strategy. Learn about other brokerages that are demonstrating UX design best practices by visiting the CSIO Technology Leaders page on CSIO.com.