Open Road Rentals

Research

Competitive Audit

I analyzed 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.

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

Through the competitive audit and user research, I identified key user pain points:

• 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

I created a user persona and journey map to ensure a seamless experience and workflow throughout the responsive website.

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.

Journey Map

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.

Ideation

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.

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.

Low-fidelity Prototype

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 usability studies with a group of five participants in each study. These studies focused on understanding how users interact with the app and identifying pain points in the user flow.

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

With a solid design system in place, the project moved to high-fidelity mockups. Focusing on refining the visuals to reflect the findings of the usability study.

Usability Studies

To refine the app design, I conducted two usability studies with a group of five participants in each study. These studies focused on understanding how users interact with the app and identifying pain points in the user flow.

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

With a solid design system in place, the project moved to high-fidelity mockups. Focusing on refining the visuals to reflect the findings of the usability study.

Hi-fidelity Prototype

Interactivity was then added to create the final deliverable, a fully functioning web app, ready to be sent off to a developer. Interaction was created for website, tablet, and mobile in-order to create a responsive website, comprehensive for all device types.

View Desktop Prototype

View Tablet Prototype

View Mobile 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.