Care Companion

The Easy Way to Manage Your Doctor’s Appointments

A smartphone screen displaying a healthcare app with a masked medical professional giving a thumbs-up and a button labeled Learn More. The text reads Care Companion. Trusted by caregivers, loved by patients.

Overview

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.

Research

Personas & User Flows

Designs

Deliverables

Accessibility

Key Takeaways

A chart with multiple colored circles illustrates an effective website organization strategy.

Competitive Audit

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.

A research interview guide for a care companion app shows participant criteria and research questions, highlighting user-focused content design, booking processes, pain points, competitor experience, and desired features.

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.

A professional profile for Sarah Wilson, a 35-year-old marketing manager and mother of two, highlighting her bio, goals, frustrations, and how user-focused content design shapes her preferred platforms for managing healthcare check-ins.

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. 

A journey map for Sarah Wilson tracking emotions and tasks across six healthcare steps—using user-focused content design—to highlight login, screening questions, submission, confirmation, updates, waiting room, and follow-up with improvement opportunities at each stage.
A website sitemap flowchart with a clear site structure, starting from Homepage and branching to Search, Browse, New Appt., Help, Log-in/Sign up, Appt. Que, and Foster/Other, each displaying their subcategories below.

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.

A user flowchart for a mobile app or responsive website build shows screens and pathways for signing up, logging in, scheduling appointments, viewing details, and receiving confirmation, with decision points and navigation arrows connecting each step.
A script for a Care Companion app displays four prompts, using content structure planning to guide users in creating a profile, updating medical info, scheduling and checking in for appointments, and reviewing details. A System Usability Scale checklist is shown below.

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.

A user interface design sample showing buttons, icons, a hamburger menu, dropdown, chips, actionable icons, and a color palette with blue, green, purple, and gray color circles at the bottom for design consistency and easy editor content updates.
A typography guide for Work Sans font, designed to support a maintainable design system with styles for headlines and paragraphs—ensuring design consistency across H1 (Semi-Bold/30px), H2 (Semi-Bold/26px), H3 (Medium/24px), H4 (Medium/18px), and Paragraph (Regular/18px).

Final Designs

After iterating on the feedback receive during testing and implementing the design system a final prototype was designed.

Accessibility Considerations

A digital interface shows a WCAG compliant color contrast checker tool over a medical appointment app, displaying doctor profiles and a “New Appointment” button, with color values and accessibility ratings for an accessible design.

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.

A typography guide for Work Sans font, designed to support a maintainable design system with styles for headlines and paragraphs—ensuring design consistency across H1 (Semi-Bold/30px), H2 (Semi-Bold/26px), H3 (Medium/24px), H4 (Medium/18px), and Paragraph (Regular/18px).
A user interface displays doctor profiles, appointment buttons, and a map with Sacred Heart Medical Center RiverBend’s details. A comment box overlays the map, supporting accessible website design with descriptive alt text for the image.

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.