Website Landing Page Design

Functionality

The Wander Wheels landing page is a highly visual and interactive entry point for users discovering the brand for the first time. This online touchpoint introduces the core features of our project-custom van conversion, AR interaction, and mobile app integration. While it’s not a fully developed website, the landing page captures the brand’s ethos and product offerings, creating a unified platform experience.

Its core functionalities include:

– Informing users about the Wander Wheels brand and concept.

– Showcasing key conversion models: Voyager, Wayfarer, and Evergreen.

– Displaying an overview of the AR functionality with a scannable QR code.

– Encouraging users to download or engage with the mobile app.

– Providing straightforward navigation and consistent visual branding.

Design Software

I designed the landing page using Figma, allowing a seamless design process aligned with the existing mobile app prototype. The platform’s real-time collaboration, component structuring, and prototyping features were particularly beneficial for creating a visually engaging and responsive page. 

Design Process

Initially, I aimed to create a fully functioning website to complement the app experience. However, as I delved into 3d modelling and AR implementation, I realised they would take longer than anticipated. The modelling process was particularly challenging due to the learning curve associated with Blender and issues with re-topology. Consequently, I decided to limit the scope to a single landing page, focusing on quality and consistency over volume. This shift allowed me to deliver a strong, brand-aligned page that captured the essence of Wander Wheels without compromising my project timeline.

Image 1: This image presents the completed layout of the Wander Wheels landing page as designed in Figma. It showcases the visual arrangement of sections such as the hero banner, AR showcase, and customer review slider, providing an overview of the brand-consistent interface.

Prototyping

The landing page design adhered to the principles and styles established within the mobile app. I employed:

– The brand’s colour palette (Meadow Green, Mantis Green, Pebble Grey) for a clean and grounded look.

– The typography system features Montserrat, Lora, and Hind Madurai for visual consistency.

– Minimalist iconography and smooth layout transitions to simulate a real-world interface. I also prototyped interactive elements, including hover states, parallax-style section transitions, and hover CTAS, to create a more dynamic user experience.

Image 2: This reference demonstrates the interactive prototype within Figma, showing how drag and click transitions were applied to simulate user navigation. The flow captures the basic interactions between the different sections and user journeys on the page.

Completed Design

The final layout consists of the following sections:

– Hero Banner with tagline and CTA button (“Start Your Build”).

– Conversion Models showcasing visual previews and short descriptions.

– AR Showcase featuring a QR code for mobile viewing.

– Customer Review Slider with rotating testimonials to enhance credibility and user engagement.

–  Another banner with tagline and CTA buttons (“Discover More” and “Start Your Build”).

– A call-to-action Footer encourages downloads and social engagement. This page encapsulates the Wander Wheels mobile app experience in a desktop-friendly, quick-loading format. 

 

Below is a preview of the Wander Wheels website landing page design and a direct link to the Figma file. This link allows viewers to explore the interactive prototype, view the layout, and examine the design elements in detail, including transitions, hover states, and user flow. https://www.figma.com/design/6THEr6761OlBnLduZVPXOu/Wander-Wheels?node-id=48-6251&t=5irErY8asrmFADN9-1

Video Demonstration of Website Functionality
A short video documents the landing page in action, highlighting the application of hover effects, scroll animations, and transitions. This visual presentation enhances the prototype by demonstrating its intended interactivity and smooth user experience.

Website Breakdown: Contribution to Project Objectives

The landing page functions as a key marketing and engagement tool. While the app handles immersive interactivity and AR integration, the website provides visibility and quick user onboarding. By summarizing the concept and offering links to the mobile platform, the landing page supports our project’s objective of increasing accessibility, informing potential buyers, and elevating the digital van-buying experience. It maintains brand consistency and communicates our unique selling points, such as mobility, customisation, and technological integration.

Time Management Reflection

At the project’s outset, I aimed to build a full-scale website with multiple pages, supporting user logins, feature previews, and customization tracking. However, as I developed the 3D models, it became clear that modeling, UV mapping, and AR setup would require much more time and skill refinement than initially anticipated. This realization led me to opt for a single, well-crafted landing page. As the project progressed, I recognized that a high-quality landing page would enhance the overall presentation and serve as a valuable alternative channel for showcasing the Wander Wheels brand. This pivot was a strategic response to time constraints and resource limitations, allowing me to deliver a polished, cohesive experience within the scope of the major project. This landing page reflects the value of flexible project planning and highlights the importance of aligning deliverables with evolving priorities. It successfully contributes to the brand’s storytelling and user engagement goals, reinforcing Wander Wheels’ core values and visual identity.

Image 4: The Trello board captures the task management and progression of the landing page design. Although not fully completed, the board illustrates key decisions and milestones. Due to time constraints, many of the wireframes were conceptualized mentally and directly translated into high-fidelity design in Figma, bypassing traditional sketching or paper prototyping stages.

Conclusion

The Wander Wheels landing page is crucial in bridging the gap between the mobile app and potential customers by providing a visually engaging and informative first impression. While it is not a full website, this single-page design effectively showcases the brand identity, highlights the integration of AR features, and enhances user interaction.

Moreover, some users prefer a traditional method of exploring a business through a browser-based website. Including a functional landing page ensures accessibility for a wider audience, including those who may not be ready to download an app but are curious about the brand. This strategic addition reinforces the project’s goal: to create a modern, inclusive, and immersive camper van buying experience tailored to diverse user preferences.

Image & Icon Reference Note


The visual content featured in the Wander Wheels landing page design—including photographs and icons—was sourced using Figma plugins PEXELS and ICONIFY. These tools provide access to royalty-free image and icon libraries directly within the Figma interface. Due to the nature of these plugins, proper citation for individual assets is not always accessible. However, all content used adheres to the standard usage rights provided by the respective plugins, which are intended for educational and non-commercial design purposes.