Star RV
Overview
Meticulously crafting a visual identity and user experience that would distinctly position the StarRV Website in a league of it’s own
Client
Star RV
Technologies/Services
React
GraphQL
TypeScript
Next.js
Strapi
Tailwind CSS
Radix UI
Mux
Jucy Group, a leading camper van and rental car company in Australia and New Zealand, embarked on a mission to redefine the RV website landscape following their acquisition of Star RV. Wanting to do things a bit differently to other rental websites, they turned to Voyage to craft an immersive and captivating online experience. With clear navigation, simplified headers and segments, and a striking emphasis on visuals, the new website inspires adventure in people of all ages.
The Star RV website centres around the concept of "Star Stories" where the vivid adventures and personal narratives of Star RV users can take centre stage. This inspired the creation of a multimedia-rich digital experience that relied heavily on engaging videos and captivating imagery to narrate these stories, serving as the storytelling canvas.
Leveraging pivotal partnerships
We partnered with Thread, a creative studio versed in storytelling for brands to help bring the adventures to life. Together we meticulously crafted the visual identity and user experience that would distinctly position the Star RV website in a league of its own.
Prototyping in Figma to realise visual excellence
From here we embarked on an iterative prototyping journey, translating design thinking into interactive Figma prototypes. The essence of Star Stories was our guiding light, bringing our design decisions together with key strategic intent. Through intentional placements of videos and images, our aim was to not only captivate users' attention but also immerse them in the genuine RV experience, ensuring that brand storytelling resonated with authenticity.
“This project was exciting and filled with challenges that pushed our team to learn and evolve. The incorporation of Mux for handling videos and the adoption and success of a fresh design system featuring Tailwind, CVA, and Radix paves the way for future projects.”
Tim Avni - Senior Developer, Voyage
Leveraging advanced tech stacks to realise value
Our tech stack was instrumental in turning design visions into reality. By utilising the capabilities of React, TypeScript, and Next.js, we sculpted a dynamic and high-performing frontend, harnessing the efficiency of statically generated pages. Our project was built on an advanced design system anchored by Tailwind CSS, which enables rapid iteration, scalability and consistency.
Ensuring accessibility for all users
When approaching the project build we wanted to make sure we were meeting accessibility standards, so we integrated Radix UI, a low-level UI component library with accessibility built in from day one. Alongside Class Variance Authority (CVA) to manage styling variants, this helped form the foundation of our design system. Development was further enhanced through the utilisation of Storybook for isolated UI component construction, making sure we had a comprehensive and efficient approach to building modular elements.
Leveraging Headless CMS with video and personalisation functionality
To empower the content management process, we integrated Strapi as the backend CMS, streamlining the process for effortless content updates. As a headless CMS, Strapi is designed for content-rich experiences, which was exactly what we needed for StarRV. It greatly simplifies content management, from creation to consumption, across all digital devices.
A pivotal part of the backend was the need to support unparalleled video experience. While imagery was important, video allowed us to convey the evocative emotions of travel, sharing star stories of those who found something special with StarRV. Instead of relying on conventional video platforms such as YouTube or Vimeo, we implemented Mux. This technology allowed us to exercise greater control over video playback and presentation, ensuring a personalised, immersive encounter for users.
Taking an iterative and quality driven approach
Iterative development and rigorous quality assurance ensures we can preview our work at every stage, while also enabling quicker testing and the merging of new features. It also allows us to monitor performance, accessibility and adherence to best practices, with automated reports offering insights into what’s working and what can be improved.
Our work with StarRV was a resounding success, as we were able to deliver against our client’s core objectives. We made sure editing and managing the site was simple and easy for the StarRV team, visitors to the site could easily find stunning and personal travel stories about trips throughout Australia and New Zealand, and those who had booked with the site were encouraged to share their own stories to keep the site fresh and engaging. The end result of the back and frontend work was an uptake in vehicle bookings, as people were inspired to explore their backyard and beyond.
“After the website's public launch, we received an overwhelmingly positive response from users. During user testing, there was a clear demonstration of genuine enthusiasm for the captivating design, immersive videos, and engaging storytelling. Notably, the Star Stories feature played a pivotal role in our success, effectively inspiring users to embark on RV adventures.”
Tim Avni - Senior Developer, Voyage