Designing a Landing page for Advenza; A sports equipments rental service.

Aniket
8 min readJan 2, 2024

--

Let me take you through the design process of a Landing page for a Adventure sports equipment rental.

A quick Introduction

This project was undertaken as part of the assignment for the 10k Designers Cohort. In this case study, I will describe the process of designing a landing page for an Adventure Sports Equipment Rental company called Advenza (Fictional).

▶️ How this Case Study will be presented-

  • My design process, in detail.
  • The visuals, iteration and final prototype.
The Design Process that I followed
The Design Process that I followed

👾 Here’s the prototype if you want to look for the Final design.

🔍 Reseach

  • What I am going to do?
  • Why I am going to do it?
  • How it is going to help the user?
  • What is the audience of this topic?

What I am going to do?

  • User-Centric Design: I created a user-centric design, placing the needs and desires of your target audience at the forefront. This will ensure that the landing page is intuitive and easy to navigate, encouraging users to explore further.
  • Engaging Visuals: Visual appeal is crucial in capturing users’ attention. I used vibrant and energetic visuals to showcase the sports equipment available for rent, allowing users to envision themselves enjoying their favorite activities, yet keeping it subtle and simple.
  • Clear Call-to-Action: To increase conversion rates, I strategically placed clear and enticing call-to-action buttons, leading users to sign up or browse the available equipment seamlessly.

Why I am going to do it?

The goal is to create a landing page that not only reflects the professionalism of your sports equipment rental platform but also drives user engagement and conversions. By focusing on user-centric design principles and engaging visuals, we can establish a strong connection with potential users, encouraging them to take the desired actions on the platform.

How it is going to help the user?

The landing page will provide an easy and convenient way for sports enthusiasts to find and rent the equipment they need. By presenting the available equipment with captivating visuals and a user-friendly interface, we can offer a seamless experience for users, making it effortless for them to pursue their passions and enjoy sports activities.

What is the audience of this topic?

The target audience for this sports equipment rental platform would primarily consist of sports enthusiasts, fitness enthusiasts, and individuals who enjoy outdoor activities. It will cater to a wide range of users, including beginners who want to try a new sport without investing in expensive equipment and experienced athletes seeking high-quality gear for their adventures.

This research helped me focus on the direction for landing page copy. I knew that my landing page should convey how the platform solves all these problems for them.

The other part of the research was the content, structure for the landing page, and subject matter, so I searched for other such platforms both in my niche as well as any other categories in general.

As I was going through other landing pages, I came across the AIDA Framework, which helped me to create effective content for my landing page that converts.

▶️ Getting in what was taught to us; the AIDA Framerwork

The AIDA model represents the 4 stages a user goes through before making a purchase decision. It is just like the typical marketing funnel used here to motivate them to book their first session.

Let’s break it down to bit, to get better understandig for the model.

During my research, I also used ChatGPT as my creative partner.

  • To get a better understanding of problem space
  • I used it to brainstorm different ideas
  • For copywriting
  • And to build on top of what I already knew.

I always made sure to make the required changes in the content generated by ChatGPT and try to make it more personalized for my use case

📑 Information architecture

After doing research, I moved on to information architecture. Here I used my research to plan how and in what priority the information will be shown to a user and how different sections will be arranged, The AIDA framework shown above helped me immensely to focus and create landing page copy.

A top-level section-wise breakdown of the landing page helped me gain more context and I got a good direction to move ahead.

✨ Visual Inspiration/Moodboarding

I spent a lot of time gathering good visual inspiration and put them all on my Figma file to reference later on. I also visited lots of well-designed and high-converting landing pages from various categories. This Research helped me in the following ways :

  • To find inspiration for visual design.
  • To understand the structure of their landing page.
  • To figure out the content sections.
  • To identify the UI patterns that were similar on almost every landing page.

What really helped me later in the design process was bucketing various sections from different landing pages, and adding comments about what I liked from each section.

Mood boarding/ Visual Inspo

✍️ Wireframes

To quickly lay out all the information, and before jumping into visuals,

  • I decided to do some initial sketches on paper, as it helped me iterate quickly.
  • After getting down my initial ideas on paper wireframes, I jumped into Figma to build and iterate upon them.
  • The main objective for iterations in this phase was to nail the layout & content

Making high-fidelity wireframes gave me a head start when I started with visual design as I had mostly finalised the layout and content

High Fidelity wireframing

🎨 Colors and Typography

  • I wanted to present a high-contrast and vibrant look for the landing page to which the audience would relate.
  • I selected a bright Blue as my primary color because it ignite the user’s passion for sports and outdoor activities while conveying a sense of trust and reliability in the platform’s services.
  • For my heading font, I was looking for something bold and stylized yet Simple. After trying a lot of fonts, I decided to go ahead with Poppins.

✨ Visuals and Iterations

Finally the Visuals which you might have been waiting for…

1. Hero section

The hero section is the first thing a user sees when he lands on the webpage. It serves as the first impression or the Attention part of AIDA. Therefore, the hero section had to be a banger, something that successfully grabs user’s attention, so they will continue to scroll through the page, else they might drop off

Knowing this, I was very mindful of what information I should present in this section.

I decided to phrase a brief value statement that encapsulated the overall benefit of using the platform, and since one of the main objectives of this landing page is to increase the retention of users, I decided to add a CTA for users to sign in or signup so the activation can be done.

Hero Section

2. Features Section

Now that we have the users’ attention from the hero section. I wanted to present some information that tells the users what’s unique about the platform and how it can help them get the equipments easier.

Categories Section

3. How it works

Now that we’ve users interested as well in the platform, it was time to build desire which I did through testimonials and showing them how easily they can get their first equipment.

Functioning Section

4. Testimonials

This is one of the sections which provides the user with proof of work, it showcases the testimonials from other enthusiasts who have been successful in excelling in their athletic journey after joining the platform. These testimonials help in building the user’s trust.

Testimonial Section

5. Rent equipment

Now that we have even created a desire in the users from the above sections, it’s time to show them the action that they need to take.

CTA

7. FAQ Section

In this section, I focused on any questions people might have after going through the landing page. The FAQ section has:

  • Most common and essential questions answered already.
  • A contact us button for any further queries.

This is also a common feature that I noticed in most of the landing pages during my research.

FAQ Section

🔥Now with all that combined, Let me just show how that adds up and make a eye pleasing, simple and super finctional landing page.

Final visuals of the landing page.

That’s it.😁

Thank you for your time, I really appreciate you reading and going through my design process with me. If you have any feedback or any question, always feel free to connect.

Connect with me at Twitter, or LinkedIn.

Here’s my website have a look here; avernicus.com

Hope you have an amazing day! ❤

--

--