TransprousLanding

How We Designed a Landing Page That Converts

TIMELINE

Aug - Sep 2021

MY ROLE

Web & Visual Designer

TOOLS USED

Introduction

Transpro Us Corp specializes in motorcycles, scooters, and other vehicles designed for food delivery workers and eco-friendly transportation. Our products are built to help users navigate city environments quickly and sustainably.

The Problem

Transform Us Corp's landing page wasn't working. People visited the page but left quickly without even looking at the products. This meant the company was missing out on potential customers.

Why it Wasn't Working:

The way the products were shown was dull and didn't grab anyone's attention, and it just a picture that doesn't allow users to click it.
It was difficult for people to figure out what made each product special, especially compared to the competition.
The way products were presented made it difficult to navigate and bad layout overall.

The Goal

Clearly communicates product features and benefits:

This makes it easy for visitors to understand what the product does and how it can solve their problems.

Increases engagement and stay on the website longer:

Enticing visuals, interactive elements, and clear navigation encourage users to stay on the page longer and learn more about the products.

Drives conversions:

A simple path to explore product, strong calls to action (CTAs), and trust signals all contribute to converting browsers into paying customers.

Current Landing Page Analysis

Visual Appeal & Design

Are the images and overall design dull and uninspiring?
Do the images showcase the E-Bikes in action (riding in the city, parked conveniently)?
Are the fonts easy to read on all devices and appropriate for the brand image (active, reliable)?

Product Presentation on landing page

Is it difficult to understand the features and benefits of each product?
Does the landing page focus on how the product solve user problems or improve lives?
Are there clear calls to action (CTAs) encouraging users to learn more about specific E-Bikes models?

Consumer Voice

Solution & Draft

The design focuses on a visual storytelling approach. High-quality images will do the heavy lifting of explaining the product and its benefits, while concise text complements the visuals and guides users towards CTA. The user interaction elements within the image slides will further encourage users to explore and engage with the product information, keeping them on the website longer.

A clean and modern design with a clear hierarchy of information will improve user experience and guide users towards key content.
A high-quality image showcasing E-Bikes in action will be the first thing users see. Keep it simple and let the image speak for itself.
Highlight key features and benefits in the product display slides, also creating user engagement as they transition.

Our draft outlines the purpose of each section, creating a storytelling flow that guides users through the website. This flow aims to enhance user understanding of our product, extend their time on the site, and ultimately convert clicks into sales.

High Fidelity

Interactive Elements

Product Slider

This slider allows users to click an arrow, making the bikes move to the left, much like cars driving by.

CTA button - "Star Your Adventure"

The button functions like a charging battery, once fully charged, it energizes you to begin your journey.

User Testing

I conducted a user test with five people to see how my new landing page works. The main goals were to check if users can quickly understand what the website is about, keep them on the page longer, and get them to click through to the products. We focused on how easy it is for users to navigate the page and interact with features in the “Product slider”.

During the user testing, I observed that users were eager to engage with the product slider because it was interactive and effectively showcased the product. This aligns with our goal of encouraging users to stay on the site longer and interact more. In the third section titled "Start Your Adventure," the button also featured a small UI that drew their eyes and encouraged them to click it. This UI animation successfully highlighted the button, increasing its visual appeal and prompting more interactions, which further supports our objective of increasing user engagement and encouraging clicks.

Conclusion

The new landing page for Transpro Us Corp successfully resolved the issues that previously hindered user engagement and conversions. Integrating interactive product sliders and conveying important product information, has significantly improved user interactions and time spent on the page. The action call of a small button, the "Start Your Adventure" button, we've created a more dynamic and appealing user experience. These improvements have not only made the website more visually attractive also guiding users towards clicks in and making a purchase.

Key Learning

Having a strong excellent design choice, but user testing can get unexpected insights. It's essential to validate designs with real users to ensure that what looks good on paper actually performs well in practice.

Adding interactive elements lets users feel more involved and in control of their browsing experience, leading to greater interest and engagement with the content.