3M Always on Page Optimization
UX, UI & Visual
Brief: An always-on campaign is being implemented to the Car Personalization page of the 3M website. Task is to make sure that the page flows seamlessly from paid ads to when users land on the page. Currently, client noticed that the existing layout may not be the best.
Disclaimer: The goal is not to revamp the current page as it is newly built, and replicated from global.
Overview
-
UX Findings
-
Low Fidelity Wireframe
-
Concept & Key Messaging Framework
-
Content & Banner Visuals
UX Findings
User comments
• I just want to see the product and samples of it on a car
• I want a gallery of colours against my car
• I need to see how it looks, and the cost
• I assume that different installers will quote me different prices – this is a concern for me
• I prefer the Audi Configurator website – link here
Solutions &
Objectives
Business
• Locate the nearest installer
• Read more about our products
Users
• Make it easy for users to find the products
• Make it easy for users to find installers
• Make it easy for them to compare installer price (KIV)
Wireframe
Old design
Proposed design with new KV
Content Flow
Hero Banner:
Target 2 main user-types
-
People who know about 3M products and want to look for installers
-
People who want to learn more about 3M products
Section 1: Car Personalisation
Description is added in to provide quick understanding before user commit to learn more
-
People who know what product they are looking for
-
People who want to learn more
Section 2: Interactive Hotspots
For users who are not sure which category does the product that they are looking for fall under, these hotspots will help them to identify it wuickly.
There is also an additional CTA to locate an installer.
Section 3: Profile Types
-
For people who are still unsure of what products best fit their needs
Section 4: Find an Installer
-
Specifically for users who want to find installers
I had also made some low hanging fruit changes such as adjusting the height of the banners as the old design was too long.
Content & Key Messaging Framework
A copywriter took the lead for this. Will not be able to showcase.
Content & Banner
Disclaimer: Banners are taken from wireframe screenshots with HTML texts. Thus, some footnotes on the banners. These are the chosen copy and banners for the different pages that flow from the main page.
Car personalisation page banner
Car wrap page banner
Paint protection page banner - GIF
Colour options pdf banner
