COLORADO CARSHARE WEBSITE REDESIGN
Improving the user experience of booking a car
I don't know anyone in my hometown of Denver who doesn't own a car. So when I moved back home after living carless in New York City for several years, I was thrilled to discover Colorado CarShare. Their offerings of on-demand, short-term car rentals (similar to the more ubiquitous Zipcar model) offered the perfect supplement to my other transit options of cycling and occasionally tolerating the unreliable local public transit system.
But I've found Colorado CarShare’s reservation system clunky to use at times (both their desktop and mobile versions. They don't have an app). I wondered whether other users faced the same challenges I did. And if so, what a redesign of their website might look like, and whether it would bring in more members.
Roles
UX Researcher
UX/UI Designer
Visual Designer
Software
Notably
Figma
Maze
Stark
Whimsical
Project Type & Team
Academic for Designlab
(Real nonprofit, hypothetical project)
Hours
80
Project Overview
Project Objectives and Deliverables
Research what matters to users who rent cars and/or live car-free
Conduct user interviews, including usability tests of the original website, to determine opportunities for improvement
Reinvigorate the visual design (including color scheme and typography) and create a new UI kit
Create MVP (minimal viable product) of a prototype of the car reservation flow.
Why It Matters
Addressing climate change has never been more important. Not to mention, a recent population surge has caused unprecedented local traffic jams. Colorado CarShare offers a vital service to the local community by giving more residents the options of only using a car when they absolutely need one. They also offer hybrid and electric vehicle options!
Design Challenge
How might I find and address gaps in the usability of Colorado CarShare’s current reservation process?
Research
User Interviews
Objectives
Identify what users value in the car rental process
Identify gaps in the usability of Colorado CarShare’s current site (at the time of this project)
Process
I went through a digital walk-through of the car booking process (showing both mobile and desktop views of the current Colorado CarShare website. I asked each participant general questions about what decisions they would make on each screen. This process also revealed information about participants’ values when looking for any type of car rental.
Participant Overview
Context
Colorado CarShare's model overtly includes older adults in their client base. You’ll see below that due to time and resource constraints, the majority of participants in my user surveys were under 40, so I did my best to diversify overall research participants in user interviews by specifically recruiting older adult participants.
Participant Demographics
5 participants
Gender identities: two men, two women
Ages: all over 60
Location: Littleton, Colorado Springs, and Denver
All new to Colorado CarShare
Limitations
The participants were all middle-class. With a bit more time and resources/access, I would have included lower-income individuals, One reason for this is that Colorado CarShare's nonprofit model values ensuring carshare access to low-income communities.
Gender identities: two men, two women
All participants were car owners and have never used any other car share programs such as Zip car
All have rented cars in the past through traditional rental businesses like Hertz and Enterprise
Colorado CarShare’s homepage
Findings
Participants viewed the overall process and business model as a plus
Participants generally liked the concept of the CarShare program. Some remarked that the reservation process seemed relatively simple at first glance. But when they were presented with various tasks and scenarios, participants showed subtle negative emotions or comments.
“Wow! I love that this would let me book a car without having to wait in those long lines in person to get a key and sign annoying paperwork!”
- Jennifer, 60-year-old female in Littleton, Colorado
A page on ColoradoCarShare’s website that explains their booking process
Some participants assumed they didn’t have the capacity to book a specific car make/model (even though they do in fact have choices)
Colorado CarShare’s choices include a variety of trucks, sedans, and electric vehicles (more on EVs below). There are also various features on cars such as All-Wheel drive. This is also important because All-Wheel Drive cars cost more per hour, and you’ll see in my user survey summary below that price is very important to users.
“I’m not going to know what kind of car I’m renting?”
- Carl, 72-year-old male in Denver
The search results page in the booking process
Participants didn’t realize when they had inadvertently selected/booked an electric car (EV) even though gas engine cars were available.
This matters for two reasons: first, Colorado CarShare’s offering of EVs might put them at an advantage point over many of its competitors that don’t have EVs available. So customers that value the environment need to be aware of this value. Second, user interview participants noted they’d feel uncomfortable driving an EV without advanced preparation and research about how to charge one.
“A Nissan Leaf isn’t something I’ve heard of before.”
- Beverly, 70-year-old female in Colorado Springs
A confirmation page after booking a Nissan Leaf (an EV)
User Surveys
I wanted more data to add to my research on user interviews, so I also conducted user surveys. I wasn’t able to access Colorado CarShare customers as participants in the time frame of this project (Colorado CarShare declined my inquiry to complete this research as a volunteer). But I hypothesized that data on any type of car rental or share would be valuable for my redesign.
Competitive Analysis
Because participants in both surveys and interviews shared a high familiarity (and satisfaction) with the booking process at traditional rental car companies, I wanted to consider how I could emulate those companies’ designs. While a minority had experience with car share companies like ZipCar, I still wanted to factor their approach into my design as well. This is for two reasons: first, they are more direct competitors to Colorado CarShare, and second, of the survey participants who had used a car share program, all of them said they were very positive experiences.
I researched the designs of Hertz, ZipCar, and GoGet and created an extensive comparison chart of their business models that I outline the highlights of below.
Highlights
Larger-sized images of vehicles
Icons communicate car features
Tags highlight important features of cars
Hourly listing of price in bold text
Large map view easily communicates the geographic location
Time availability by the hour is displayed prominently using a color-coded slider
Traditional Rental Car Company vs CarShare:
An Important Distinction
It’s valuable to point out the distinction between traditional car rental companies and car share programs because it influenced my decisions and approach to the competitive analysis and, later on, design decisions. Car share programs like Zipcar and Colorado CarShare are different from traditional rental car companies because customers have to be members in order to reserve car share cars (usually through an application process and paying a recurring membership fee). Car share cars are also typically booked on a much shorter-term basis than a traditional car rental. (For example, a car share customer might use a car for a few hours to run an errand, whereas a rental car company usually requires cars to be rented at least by the day.)
Define
User Personas
Comparing the user surveys (most participants were between the ages of 25- 40) and user interviews (of people over the age of 60), it was clear that there would likely be a range of different types of users. I created user personas to show the differences to consider in design.
User Journeys
I created user journeys based on the personas above because I was imagining a hypothetical scenario of presenting this case study to Colorado CarShare and needing to rationalize why a redesign would serve their customers. You’ll see that in Ralph’s journey, he experiences negative emotions in the booking process in general. Jen, a more frequent user of the car share program, navigates the reservation process fairly effortlessly until she overlooks that she inadvertently booked an electric vehicle.
Ideation
Making a Car Reservation
Task Flow
I compared a task flow of making a reservation on Colorado CarShare’s current website to decide how to adapt a task flow in my design. In user research I found that a simple process with as few steps as necessary was important. In the task flow I made for my design I merged the search tool and results display into one screen so that I could simplify the flow (these are two separate pages on Colorado CarShare’s current site).
Wireframes
With my task flow as a reference point, I first sketched out several iterations of what the visual design would look like in the high-fidelity prototype. I selected a final version based on feedback from peers and completed wireframing in Whimsical. I explain my design decisions in the slideshow below.
Some of my initial sketches I before moving into the wireframe process
Brand Refresh
My final step before I moved into the prototyping phase was to select a color palette and typography that would make my redesign consistent and fresh.
A style title with a subtle brand refresh
Design Decision Overview:
I didn’t want to deviate too far from the original styles on the current website, so I incorporated a blue palette similar to the hue in their original design and added these new colors to their original logo.
I added a more neon blue in order to have certain elements on the site pop out and feel more energizing. My goal here was the style would reflect some of the bold steps the organization is taking related to climate change and electric vehicles.
I changed the headers to Outfit Bold font to give the site more character.
I changed the body text to Open sans to increase legibility (the original site uses a serif-based font).
I tried to find photographs of people with cars so users could more easily envision themselves driving. The original site has photos of cars, or mountains, or people, but usually not in the same photograph.
Prototyping
High Fidelity Prototype
Before I moved into the prototyping phase, I outlined the tasks I anticipated asking users to complete in usability tests. I referenced these tasks and the wireframes above to make the final prototype:
Sign in to account
Search for a specific location and start date
Analyze search results
Locate where a car is on the map by hovering over its card
Scroll through different vehicles
Get more detailed information on one of the cars
Select “Book Car”
Realize the car is an Electric Vehicle
Return to search and filter for a pickup truck
Filter pick up truck and adjust time using the slider
Book car and read the confirmation page
The full task flow of my prototype. I go into details about my design decisions below.
More details about my design decisions
Element #1
A homepage that showcases the best Colorado CarShare has to offer
I hypothesized that most current customers would likely sign into their account to access what they needed, so I kept new users of Colorado CarShare in mind when designing the home page.
Many user research participants were unfamiliar with what a carshare even is, and what sets it apart from rental cars or Uber/Lyft. So I added a clear, "skimmable" explainer close to the fold to help new users understand the model.
I also showcased the different types of cars Colorado CarShare offers (AWD, EVs, and pickup trucks) because this “fleet” sets it apart from one of its major competitors, Zipcar.
Because user research showed that users care a lot about price, I highlighted that Colorado CarShare offers additional value in their pricing beyond just the car rental. They offer a comprehensive insurance package and gas reimbursements. This wasn’t immediately apparent on their website, so I wanted it to stand out.
Element #2
A search tool and results page that communicates a lot of information about each car
The map view taking up half the page is new to Colorado CarShare's design. I added it based on user research participants' values of knowing the geographic location of the cars. This is modeled after multiple competitors’ designs.
The cards on the left-hand side are also new to Colorado CarShare's design and go into much more detail than what is on the current site. On them, I used different fonts and styles in a visual hierarchy to help point out important features about each car. Remember user persona Jen and the journey map that shows her frustration when she realized she booked an electric car without knowing it? I had her in mind when adding in the bright blue tags above each car make and model.
Element #3
Booking information that clearly shows price and reminds users about important details
As I mentioned above, one of my main design goals was to ensure users were fully aware of the type of car they were booking, especially if they had selected an All-Wheel Drive that costs more or an electric vehicle that drives and powers differently.
Because user interview participants expressed nervousness and a lack of experience with driving electric cars, I included resources on EVs below the fold. (Colorado CarShare currently explains EVs in a confirmation email that has the font/character size and no images throughout.)
Because user research indicates that price is key, I included a transparent breakdown of the final cost estimation of the trip in bold (and another reminder that gas and insurance are included). Colorado CarShare’s current design does not display taxes or fees in the booking process.
Element(s) #4
Filter and Slider
Remember how the user persona Ralph wanted to use Colorado CarShare to rent a pickup for a few hours? I included the filter tool to make sure he could easily find what pickups were available. Colorado CarShare does have a filter on the current site as a popup. I changed this to an accordion style to be more aligned with other competitor designs.
The time slider on the bottom of each “car card” was one of the most challenging parts of the design process. Indicating car availability by the hour is important to a carshare program because, as users rent cars on a highly short-term basis, it’s very helpful for them to be able to see if another user has booked the car on the same day. This alerts the user that they must have the vehicle back by the specified time and can not extend their reservation. I modeled this slider based on different competitor designs. It’s different from the current website, which displays availability in a static grid view.
Element #5
A confirmation process that both shows and tells users what to expect during their reservation
The confirmation page demonstrates to users their reservation is complete and includes links to information they might need during their reservation (i.e., how to modify the trip or submit a gas receipt). This page would be accessible at any time in the users account).
As noted above, Colorado CarShare’s current confirmation is in an all-text email. I included photos of what to expect when accessing the vehicle so that new users to the car share model would feel as comfortable with the process as possible.
Knowing that most users would only have mobile device availability during the actual time of their reservation, I also wanted to include a mockup of what a mobile app screen could look like. It includes large buttons for easy access to the most important needs they might have during the trip.
Test and Refine
Incorporating feedback from users
Usability Tests and Revisions
Testing Methodology
Completed in real time over Zoom
5 participants (the same participants who participated in the user research interviews)
All participants were able to successfully navigate through the majority of tasks I asked them to complete in the reservation process. A particular task I watched closely and asked lots of questions about was whether participants would realize if they had booked a specialized vehicle, such as an electric car. All did.
Other observations of users revealed some opportunities for improvement as outlined below.
A different map icon indicating vehicle locations
In the first iteration of my design, I used the Colorado CarShare logo to indicate the location of vehicles on the map. Three out of five participants took a significant amount of time deciphering the geographic location of vehicles and two expressed that the logos indicating car locations were confusing. I changed the icons to cars based on a participants’ suggestion.
Moving important information above the fold
On the book and confirmation page, not a single user tester scrolled the screen, which meant that they didn’t see information explaining how to operate the cars. Users told me they would have read that information if they knew it was there, and considering that many users felt somewhat nervous about driving an Electric Vehicle (even if they were a bit intrigued), it is important for them to see information that might make them feel more informed and comfortable. So I altered the page design slightly to move the header of “Electric Vehicle 101” slightly above the fold. (One of the ways I did this was by collapsing the cost breakdown into an accordion style.)
Further considerations about the slider
When I asked users to change the time on their reservation to one hour later, all users did this by going to the tool bar at the top of the page. When I guided their attention toward the slider on each car card, there were mixed results about its usability. Two users weren’t able to decipher what the colors meant on the slider. Those same users plus an additional person did not understand how to interact with the slider.
As noted in my design decisions outlined above, the slider is important because it shows users who mostly rent cars on an hourly basis whether there is a booking immediately before or after a reservation they might make. This helps them be more aware if there would be possibilities to extend the trip during the reservation and whether another user is relying on them to return the car on time.
I decided not to make any changes to the design of the slider, and instead note it for future consideration. This decision was based on the following:
Users can modify their reservation time in a different way (as they did in the tests, by using the tool at the top of the page).
The slider was based on other competitor designs, which suggests that users might eventually learn how to interact with this tool.
To change the slider, I would have wanted to do more research on effective UI, and this type of research didn’t fall within the scope or time frame of this project.
Conclusion
Key Learnings and Reflections
What I valued most about this project was being able to engage with user participants who are in an older generation than others whom I’ve interviewed for other projects. Watching user interview participants engage in Colorado CarShare’s current online reservation process really demonstrated the importance of thoughtful design that is user tested, as there were several steps along the way in which users were showing frustration (as exemplified in the user journey maps I made). This could possibly indicate that some potential customers might give up entirely, which would lose crucial business.
As I noted above, I wasn’t able to access real Colorado CarShare customers and I would be very curious what the user interviews would reveal if that had gone differently. In an ideal world with better access to survey participants, I would have conducted two surveys. The first would be similar to the one I created for this project, but I would try to engage a much more diverse pool of participants than those who participated in this project. Secondly, I would create a survey in which only those who had experience with car share programs of the exact model of Colorado CarShare could participate. Data about general rental car experience is valuable, but I wonder whether I would have seen different problems to solve in a survey that isolates car share users.