Redesigning the TELUS home page
Overview
After identifying a drop in conversions on our homepage carousel offers, I was tasked with designing a new layout that would maximize TELUS conversions while improving the overall UX for visiting customers.
Tools: Figma, Figjam, Adobe Analytics, Google Meet, TELUS Universal Design System (UDS)
As you can see from the data below, engagement of CTA’s on the carousel decreased incrementally the further along in position, which is expected user behaviour, as customers typically do not have the patience to explore all the slides of offers in the journey. See the stats below.
Discovery
Carousel CTR issues
Previous TELUS homepage (above fold)
I had a hypothesis that updating the home page to a new multi-item carousel would drive better engagement with offers and could be an opportunity to improve accessibility by removing the autoplay feature. Below you can see my exploration of such a component to introduce to the Telus Universal Design System. I also wanted to introduce bento-style feature tiles to increase visibility of the best merchandising offers.
Design
Exploring a new multi-item carousel
Below is my rationale for the new design, where I outline the UX principles it adheres to and the various operational/practical benefits. This deck was used to explain the strategy behind my approach to key business stakeholders.
Design
Design analysis of new user experience
The new carousel design allows users to see more offers at once, and in a more readable format. One of the changes I made was how copy was structured, ensuring that text only wraps to a max of 3 lines when necessary in these cards for headlines, and that copy be minimal overall in the new cards.
Design
New offer carousel
-
By making the whole card clickable as a CTA, it eliminates the need for an additional button which clutters the space. This keeps the design more minimal and visually aesthetic.
-
We created guidance of 3 lines of copy max for all headings in carousel, and 2-3 lines of copy max for subcopy.
-
The badges in the top left help users to quickly scan content and identify the type of offer they might be searching for
Governance files were created for the teams that would be populating the offer content on the new homepage. I highlight things like image ratio and formatting, copy parameters, grid spacing, alignment, and more.
I mocked up the governance for the mobile version so we can visualize how this new design would work when responsive, and outlined any necessary guidelines.
After testing the new home page design in a live environment against the current one, all the performance indicators in the 50/50 AB test proved successful. You can see in these screenshots that the CTR increased to 6.35% from 4.83% on the original. The cart finish rate also improved to 55.2% from 44.8%. Everyone was happy with the new design, including customers.
Analytics
A/B test results
summary
Old vs. new design
Old Design
Large drop off in banner CTR as you go through carousel items on page - Carousel limits visibility of offers on page, since they are hidden in the other slides
Autoplay feature creates poor UX experience for users navigating offers, especially those with accessibility needs
Key promotions are buried, leading to missed engagement—only 16% scroll reach below the fold.
New Design
New multi-item carousel makes better use of screen real-estate to surface more offers to user (on desktop) while keeping copy and clutter minimal
Optimal number of feature tiles are visible above the fold inviting more engagement for our top offers
Interactive card components in carousel allow are more minimal, while still providing all the necessary information a customer needs
Use of ‘See details’ modal in top section allow extra, less relevant, marketing content to be hidden from view
