Open Road Rentals, an outdoor vehicle rental responsive website was created as a UX/UI case study for the Google UX Professional Certificate program. As a lover of the outdoors, I designed this app as a one-stop-shop for outdoor vehicle rentals.
My role as the sole UX Designer encompassed everything from research to design and development.
Problem
Outdoor adventurers looking to rent outdoor vehicles for weekend trips or longer excursions often face confusion when coordinating vehicle rentals with suitable campsite bookings. Existing platforms fail to offer a seamless, all-in-one planning experience.
Solution
Design a responsive web app that allows outdoor enthusiasts to easily compare and book both vehicle rentals and compatible campsites – all in one place. This streamlined approach simplifies trip planning and fills a gap in the current market.
To begin the research process, a competitive audit of three competitors was performed to asses their strength and weaknesses.
User Research Study
To gain deeper insights into the key features and pain points a user survey was conducted on 8 participants. The target audience was adults ages 25-70 who enjoy the outdoors.
User Insights
Comparison tools
Provide comprehensive filtering and sorting options.
Campsite booking
Allow users the ability to book campsites compatible for their selected vehicle.
Simplicity
Need for a simple, streamlined booking process.
Vehicle Information
Provide sufficient vehicle information.
Persona
A persona, Emily Carter, was created based on interview insights. Representing the group of users and their challanges.
Journey Map
Before sketching individual screens, a user journey map was created to track Emily’s progress throughout the application.
Sitemap
It was time to focus on the sites hierarchy. A sitemap was created to capture all aspects of the features that I aimed to include.
Wireframes & Low-Fidelity Prototype
With pen and paper, I drafted wireframes using crazy 8’s that were then refined and translated into a low-fidelity prototype using Figma. Interactivity was added to the low-fidelity Prototype for testing purposes.
Usability Testing
Two remote usability studies were conducted with a 5 participants in each study. Results from these tests prompted the following modifications:
More information needed to be added to the pick-up/delivery process, causing users confusion.
Mobile header menu needed more of a margin as it was not entirely below the fold.
The browse tab needed to include campsites.
Design System
Created a design system for uniformity in the final designs. The design system followed Google’s material design and WCAG 2.0 guidelines to ensure compliance.
Final Designs
After iterating on the feedback receive during testing and implementing the design system a final prototype was designed.
Accessibility Considerations
Color Contrast
To ensure compliance with WCAG 2.0 for color contrast, I created an accessible color palette using Figma’s “Use Contrast” plugin.
Text Hierarchy
Text hierarchy was created and implemented for users to easily distinguish between different sections and types of information, while also providing a clear structure for screen readers.
Alternative Text
I created alt-text for all images, to support developers and users with screen readers, ensuring a more accessible experience for individuals with visual impairments.
Final Thoughts
While creating the Open Road Rentals responsive website, I learned the importance of user feedback. Understanding that this web application is for the user and should reflect their needs goals, and feedback. While it can be hard to separate myself emotionally from the design it is needed and beneficial for the end user.