PawTracker

This case study details the comprehensive design process undertaken to create a user-centric and visually appealing landing page that effectively addresses the challenges.

Context💼

This project is a part of an assignment given by 10kdesigners cohort.

Project brief: Design a simple one-pager website/landing page which is visually appealing as well as have great user experience.

Project timeline: 2 weeks

Problem statement💡

Design a landing page for a GPS collar manufacturing company for pets 🐾

Checkout the final design incase you are in a hurry!

Let’s dive into the process now!

How did I get to the final solution?

To avoid getting overwhelmed by the long and complex process, I decided to breakdown the process into smaller steps which helped me to focus more on the outcome.

My design process (Non-linear)

Research 🔍

But why would Manufacturers require a website?

They faced several key challenges and the major problem that were identified are:

Limited online visibility

Lack of information

Limited reach

Credibility and trust issues

Minimal customer interaction

Difficulty in showcasing products

Missed sales opportunities

These were some major concerns that manufacturers were facing and wanted the best solution resolving these all challenges.

Competitor Analysis 📈

After analyzing the major pain-points, I conducted thorough examination of competitors which helped me identify strengths and weaknesses in their landing pages.

Competitor Analysis

Information Architecture 🖇️

To structure my information and simplify it, I used AIDA model. The AIDA model describes the four stages a consumer goes through before making a purchasing decision: Attention, interest, desire, and action.

AIDA Model

On the basis of this AIDA model, I created an Information Architecture of my landing page to organize the content in a hierarchy that prioritizes essential information about the GPS tracking collar’s features, benefits, and usage.

Information Architecture

Wireframing ✏️

After creating IA, I started creating the paper/low-fidelity wireframes to outline the structure and layout of the landing page. This step ensured that the key elements, such as product images, descriptions, and calls-to-action, were strategically placed to guide users through a seamless and informative journey.

Wireframes

Visual Design 🎨

A visually appealing and pet-friendly color scheme was chosen to evoke trust and connection. High-quality images of happy pets wearing the GPS tracking collar were integrated to showcase the product in real-life scenarios.

Style Guide

After several iterations and combination, I finalized this logo which aligns with the brand’s values, target audience, and the overall image of the landing page.

Logo

Moodboard 🖼️

Inspiration was drawn from various sources, leading to the creation of mood boards that captured the essence of the brand. The mood boards helped establish a cohesive visual language, ensuring that the landing page design would resonate with the target audience.

Moodboard

Final version? Haha, it’s never seems like final..

After almost more than 40+ iterations and trying out different layouts and tweaking elements, I finalized this as final version!!😝

Final Design

Let me take you through the each-sections to show why I made some decisions -

1. Hero section

As the hero section is the first thing users will see, it makes it the most important part of the website. With clear and concise copy, the hero section’s aim was to capture user’s attention and make it relatable to the product.

Hero section

2. Featured section

Right after the hero section, I wanted to showcase the social proof to build the trust of audience. Keeping the featured section with top companies helped me to achieve it.

Featured section

3. Key Features

To keep the users engaged and capture their attention towards our product, this section was beautifully placed right after the featured section. This section mainly aims to showcase the top features we are offering to them.

Key features

4. Product showcase

As they will already have a clear idea of what features are we offering, I decided to include this section here to convert their desire into actionable output. This section provides comprehensive descriptions of each GPS tracking collar, including specifications, features, and wide-range of color options.

Product showcase

5. How it works

Once the user decides to buy the collar, the right step straight after it was to provide a simple step-by-step guide on how to use the GPS tracking collar. I had included images and number of steps for better understanding.

How it works section

6. Testimonials section

To tackle credibility concerns, customer testimonials and reviews were prominently featured on the landing page. Trust badges was included to reassure potential customers about the reliability and effectiveness of the GPS tracking collar.

Testimonials section

What did I learn? 💼

➡️ Keep iterating. Take feedback, implement the feedback and test it again.

➡️ Keep track of time so that you don’t lose the track and focus on the important things first.

➡️ More time you invest in designing information architecture and wireframes, more easy it becomes while designing the visuals.

➡️ It is very important to document everything along with designing to capture the thought process you followed while take decisions.

It’s a wrap! 🥂

Thank you so much for taking the time to read my case study! I truly appreciate your interest and hope you found it insightful.

If you have any feedback or just want to say hi, I’d love to hear from you. Feel free to connect with me on Twitter(Okay “X” 😅) and LinkedIn. Your thoughts and suggestions are always welcome!

A big shoutout to all my mentors and the amazing folks at 10kdesigners for invaluable feedback and support!

Interesting fact:- If you long hold the clap button you can give up to 50 claps on Medium 😁

Wait! I guess you dropped something❤️

Also, I’m open to Product Designer opportunities. Do reach out if you’d like to work with me or collaborate on some projects.

➡️ LinkedIn, Twitter, or Instagram