Open Road Rentals

Research

During the user research phase for Open Road Rentals, I utilized both qualitative and quantitative methods through a competitive audit and a user research study. This approach yielded valuable insights into user needs and preferences, along with a thorough understanding of the market landscape. The findings indicated that users are dissatisfied with their current experiences and pointed out significant gaps in the market.

Competitive Audit

The competitive audit involved a detailed analysis of two direct competitors and one indirect competitor of Open Road Rentals to assess their strengths and weaknesses. I conducted a thorough examination of each competitor’s website and mobile experience across several categories, including General Information, First Impressions, Interaction, Visual Design, and Content.

Competitive Audit Report

After conducting the competitive audit, I created a report to summarize the findings and give a clear look at each competitor's marketing strategies, strengths, weaknesses as well as market gaps and opportunities.

User Research

To gain deeper insights and identify the most critical features for Open Road Rentals, I conducted a user research study with eight participants. Each participant was asked to rank a set of features from 1 to 10, with 1 representing the highest priority and 10 the lowest. This study provided a clear understanding of the key features that should be prioritized in the design process.

Pain Points

With the competitive audit and user research study, I understood the pain points of the user and came up with the following objectives.

• Need for a simple, streamlined booking process

• Provide sufficient vehicle information as well as comprehensive filtering and sorting options

• Provide vehicle comparison tools

• Allow users the ability to book a camp site compatible for their selected vehicle

Persona and Journey map

Building on the insights from the competitive audit and user research, I created a user persona and journey map to ensure a seamless experience and workflow throughout the responsive website.

Persona

Problem Statement:

Emily, an adventurous freelance designer, often encounters a cumbersome vehicle rental process filled with insufficient vehicle details and overly complex booking steps, which significantly hampers her ability to plan spontaneous trips efficiently.

User Journey Maps

Mapping Emily's user journey provided a clear structure for the responsive website, cementing the importance of a user-friendly platform that simplifies the planning and and booking process.

Sitemap

A site map was then developed to inform strategic information architecture decisions, enhancing overall website navigation and ensuring a comprehensive experience across all devices.

Paper Wireframes

In the initial design stages for Open Road Rentals, I created paper wireframes to map out essential components and navigation paths. This method enabled me to explore various configurations efficiently. After developing multiple functional and visually appealing components, I combined them into a final wireframe, which was then prepared for implementation in Figma.

Paper Wireframes Screen Size Variations

Given that Open Road Rentals is a responsive website, I developed wireframes for desktop, tablet, and mobile screen sizes to ensure compatibility and maintain consistency across all devices.

Digital Wireframes

Transitioning from paper to digital, I refined the wireframes for Open Road Rentals into high-fidelity versions through multiple iterations, focusing on user flow and strategic placement of buttons and visual elements on the homepage to enhance the user experience and simplify navigation.

Digital Wireframes Screen Size Variations

On identifying the structure of the responsive website, I designed digital wireframes for the required screens.

Low-fidelity Prototype

Desktop

Tablet

Mobile‍

The prototypes were then designed into an interactive prototype that would be used for the initial usability study. This early version focused on user flow and interaction, enabling me to gather feedback and make necessary adjustments to improve usability before moving to more detailed design stages.

Usability Studies

To refine the app design, I conducted two unmoderated usability studies with a group of five participants in each. These studies focused on understanding how users interact with the app and identifying pain points in the user flow. Each participant was given a set of prompts that would walk them through the app. Participants were asked to record their screen as well as record their audio and think out loud during their experience.

Findings 

• Users had a hard time with the mobile site as the top bar was not over the fold and was not easily accessible.
• Users found the browse tab confusing because the dropdown menu was not fully developed, making it difficult to navigate through options
• Users experienced confusion regarding the pick-up/delivery process because the low-fidelity prototype lacked clear information on this aspect.

Design System

Before proceeding to the mock-ups, I developed a design system grounded in color theory and the WCAG 2.0 design guidelines. I selected neutral tones centered around browns to evoke a sense of nature and the outdoors. For the primary font, I chose Inter due to its clean, readable style, and its rounded design enhances the natural theme, contributing to a cohesive user experience.

Mockups

In the mock-ups, I applied the design system alongside insights gained from the usability study. I enhanced the pick/delivery buttons by adding a description for the delivery option beneath the "Show More" button for each listing. Additionally, I adjusted the navigation bar for mobile devices and expanded the browse dropdown for desktop.

Hi-fidelity Prototype

On completing the wireframes, low-fidelity prototypes, and usability studies, the mock-ups were then designed into interactive prototypes that were ready to be handed to a developer. Interaction was created for website, tablet, and mobile in-order to create a responsive website, comprehensive for all device types.

Desktop

View prototype

Tablet

View prototype

Mobile

View prototype

Impact

While Open Road Rentals was developed as a learning tool to advance my skills and not a live site. After completing the site, I pilot tested the website, tablet, and app versions on 8 participants to better understand the overall effectiveness of the design. Users praised the layout as 'very user-friendly and visually appealing,' highlighting the intuitive design that enhances their experience. The seamless ability to book everything from rental vehicles to campsites was particularly well-received, with one participant noting, 'I wish Outdoorsy had this as an option.'

Color Contrast

To ensure the website complies with WCAG 2.0 standards for color contrast, I developed a color palette that adheres to AA or higher requirements. Utilizing the Figma plugin "Use Contrast" I verified that these standards were consistently met across the entire responsive website. This approach enhances accessibility for users with visual impairments.

Text Hierarchy

While the design system facilitates faster implementation and creation of the overall design, it also supports the establishment of a structured text hierarchy. This hierarchy enables users to easily distinguish between different sections and types of information, while also providing a clear structure for screen readers.

Text Alternatives

Many users with impairments require text that can be converted into other formats. To ensure accessibility for all users, I created alternative text (alt text) for all images, which not only enhances user experience but also aids developers and ensures compliance with WCAG standards.

Learnings and outcomes

• Designing for different devices

Recognizing that the website would be the primary means of interaction with Open Road Rentals, I utilized a graceful degradation approach to enhance my understanding of designing for all device types while prioritizing the desktop experience.

• Designing for accessibility

While accessibility has always been a key consideration in my designs, this project deepened my understanding of how accessibility functions across different devices and the most effective ways to implement it.

• Importance of testing

The testing process provided valuable insights into my limitations as a designer. Initially, I created the website with minimal consideration for accessibility. However, the testing phase compelled me to shift my focus from aesthetics to functionality, highlighting the importance of inclusive design.

Next Steps

• Continuously update the user interface based on user feedback and usability testing. This ensures the design remains aligned with evolving user needs and technological changes, maintaining high user satisfaction.

• Broaden accessibility testing by including users with diverse abilities to uncover additional improvement areas. This step will make the platform more inclusive and compliant with accessibility standards, broadening your user base.

• Implement advanced analytics to gain deeper insights into user interactions. Analyzing user behavior in detail will guide targeted design improvements, optimize user flows, and enhance overall engagement and retention.