Kia: Homepage Carousel CRO test
Kia had some data feedback where their mobile homepage carousel wasn’t performing how it should. Users may have not realised that the component is a carousel, resulting in slides being overlooked, increasing reliance on the dropdown. Also, accidental taps on the ‘Discover more button on small screens can disrupt the users’ experience.
The supporting data
The carousel pagination isn’t very visible. Items in earlier positions receive significantly more engagement, while those after the first slot get 1% of clicks. Some items also receive more interaction via the dropdown than the carousel itself.
Hypothesis
If the carousel buttons is automated and/or the buttons made clearer e.g. easy to tap UI elements, it will be easier for users navigate - therefore increasing the page exploration and engagement
Research
I looked into best practice articles from Nielsen Norman and Baymards as they are good references to go by for anything UX related.
For visual references, I looked at competitors and any non motive examples which showed best practice accessibility principles.
Wireframes
I had quick brainstorm of wireframing and then went into designing high fidelity designs.
We wanted to test what would work better if carousel buttons would work below or in the center.
I also made sure that UI elements were accessible either by adding a gradient background or a background container which housed the pagination.
For the automated designs, making sure we could implement a play and pause button so users are able to take information in their own time with a tracking too.
Low fidelity wireframes
High fidelity wireframes
Review
We had a review call with developers and then with the client. Unfortunately, it was not possible to do the automated designs as we didn’t have full flexibility with what we could do but the following designs were signed off.
Results
We had an assumption that Variant C would get the best results and it did. This was then implemented to to the live homepage.