Case study of how to improve users engagement with a feature - From ideation to final visuals
Visual of the final page for part exchange of the cars
THE ROLE
Carwow
Web
Involvement
UI / UX Design
Year
2019
Web
Involvement
UI / UX Design
Year
2019
THE PROJECT
Carwow makes choosing and buying a new, or used car easy and enjoyable. Users can compare the best offers from local dealers and get the car they want at a price that's right.
At Carwow, I joined a product team focused on helping users to sell their car. It was a recent proposition from carwow. When I've joined the product team, there was already an existing journey so users can get an evaluation for their car.I have worked on this project as the only designer, in a cross-functional team with a product manager and a few developers.
USER JOURNEY
I've established a user flow to visualise the journey from the Showroom to the result page where users get the valuation of their car. Afterwards, users have to request a call back with the carwow partner "The Car Buying Group" and exchange by phone to get a final guaranteed price.
User flow for part-exchange
CHALLENGE
At each stage of the funnel we were losing a certain number of users. Looking at the percentage of drop-off, we quickly realised there was a problem of engagement. When landing on the result page where users see the estimation of their car value, only 13% were engaging with The Car Buying Group to get a guaranteed price.
We knew there was a problem with this specific metric as users from other sites are 30% to engage with The Car Buying Group after getting an estimation range. This meant there was a problem with carwow result page.
Hypothesis
By cleaning up the page, integrating a Live Chat and improving the messaging, we can improve the engagement with The Car Buying Group.
INITIAL RESEARCH
Key ideas
The goal of the redesign was to make users engage with The Car Buying Group, by any way. To do so, I had several key ideas.
• Adding a Live chat to remove "hassle" of having to request a call back
• Moving key informations further up (above the fold)
• Adding two input fields to select date and time within the page
• Tweaking the messaging as it was unclear users would chat with The Car Buying Group and not with Carwow
• Moving key informations further up (above the fold)
• Adding two input fields to select date and time within the page
• Tweaking the messaging as it was unclear users would chat with The Car Buying Group and not with Carwow
Wireframing phase
I've started by doing some rough sketches. Afterwards, I did some quite high fidelity wireframes. I've shared with my team the two variants below.
The variants mainly differ by the placement of the CTA, organisation of information. In V1, I've favoured instant ways of communicating (Live chat and "Call now"). In V2 I used a small picture of the car, in V1 it was more a very short description of the car.
Wireframes for mobile
UI DESIGN
Design directions
In terms of UI design, I've wanted to keep it clear and simple, so it doesn't take much time to be built and tested. I've used components (grid, fonts, elements) from our Styleguide.
UI Visuals
There has been a few changes between the wireframes and the final design:
• Firstly, I then thought that, because there were too many buttons on the page, the phone number could just appear in all letters instead of adding an other button. I made sure the phone number was still clickable on mobile.
• I've also reduced the amount of details users see about their own car as it was taking a bit of space on mobile. I thought users already knew these informations and were more interested in getting their estimation. They could still access their registration number and other details about their car by clicking on the CTA "Car details".
• I tweaked again the copy to improve clarity, transparency and trust.
• I've also reduced the amount of details users see about their own car as it was taking a bit of space on mobile. I thought users already knew these informations and were more interested in getting their estimation. They could still access their registration number and other details about their car by clicking on the CTA "Car details".
• I tweaked again the copy to improve clarity, transparency and trust.
Responsive result page
TEST & RESULTS
Below you can see the final design that we tested, as an A/B test, versus the previous version of the page.
As a result, we've seen an increase of the engagement with The Car Buying Group.
Comparison before / after - above the fold
