VROOM SERVICE

Project for UI/UX Bootcamp from University of Massachusetts Amherst

Design a customer facing digital interface for a car rental service.

Project Duration: 3 Months

Vroom Service is a car rental service with an antique website in dire need of a redesign. Its outdated, sparse, and confusing design are negatively impacting business.

I will create a modern and full featured design focused on greatly improving the user experience.

It needs some work

Personal Objectives

Take ownership of various roles that are part of the product design process: User researcher, UX Designer, UI Designer
Practice UX research techniques such as competitor analysis, user interviews/testing, and heuristic analysis.
Create a complete and functional prototype in Figma.
Show mastery of Figma tools including local variables, interactive components, variants, and overlays.
Build all Figma components from scratch. No Premade Templates!

RESEARCH

UNDERSTANDING USERS

I conducted short interviews with 5 people to gather information on user expectations for a car rental site. I also showed the interviewees the current Vroom Service site to get feedback on what could be improved in the redesign.

Interview Questions

Tell me about the last time you rented a car, how did you do it? Online, over the phone, in person, etc.
Walk me through the process you would take if you wanted to rent a car online?
When you rent a car, do you prefer to pick the location first, or the type of vehicle?
How do you prefer to rent a car? In person, over the phone, online, etc.

*Showing them the ABC Rentals website*

How do you feel about the layout, are things easy to find, do they make sense?
What do you think of the colors and fonts used? What reputation do they evoke?
Can you show me how you would rent a sedan from this site? Where would you start?
Would you feel comfortable putting your payment info into this website? Why or why not?
On a scale of 1 to 5, How likely are you recommend this service to your friends?

Click to view full interview responses.

Takeaways

Everyone preferred to start a rental online
People care more about where they pick up the vehicle than they do about what vehicle they get
People thought the current site was confusing and untrustworthy
Some people has trouble reading the homepage
Nobody understood how to start a rental on the current site

The user interviews revealed that people are confused by and suspicious of the current design. It's hard to read, poorly organized, and so outdated it's interpreted as untrustworthy.

Heuristic Evaluation

Evaluating the current site on the 7 Facets of User Experience as defined by Peter Morville of Semantics Studios.

Findable: The search bar claims you can search for vehicles by name, brand, stock #, and more, but the user has no way of knowing what vehicles are available without searching.

Accessible: The small text in a light color mixed with the cyan gradient in the background makes the site difficult to use for those with even slight vision issues.

Valuable: The apparent availability of only 2 vehicle types makes the service seem lacking in comparison to competitors who offer many vehicle types and make it apparent on their respective homepages.

Credible: Users found the website to look untrustworthy, some even suspected it of being a scam.

Useful: The website includes elements that are not useful for the target user and is missing elements that would be useful.

Useable: The website is not usable because it lacks basic features the end user expects and needs, like the ability to see the where the business is located and other useful contact information.

Desirable: The extremely sparse and outdated design of the website makes it undesirable to most users.

Competitor Analysis

Analysis of website features.

Summary of strengths and weaknesses.

Through competitor analysis the issues with the current Vroom Service site become apparent. Most competitors have a way to start a reservation prominently featured on their respective homepages. The Vroom Service homepage has no such feature. The absence of helpful and necessary features such as a way to browse vehicles or cancel a reservation make the current design ineffective.

Design

Task Flows

Rental Process

Cancelling a Reservation

Creating an account

Information Architecture

Wireframes

Menu bar for quick access to essential functions

A way to start a reservation is prominent on the homepage since it's what most users want to access first.

A carousel of images shows what vehicle classes are available.

A prompt to sign up for a member account

A content list is attached to the bottom of each page. If a user really can't find what they're looking for, it will be directly linked in the content list.

A bread crumb bar shows users where they are in the rental process.

A filter function allows users to filter vehicles by specific attributes such an passenger and luggage capacity.

Each vehicle class is shown in its own info frame. Clicking "View Details" expands the info frame to show more about the vehicle.

At the check out phase, an info panel summarizing your reservation is shown. This allows users to check all vital reservation info, such as where and when to pick up and drop off the vehicle, the type of vehicle, and add ons.

Refinement

User Testing

I used the wireframes to make a fully interactive prototype of the website. This allowed me to test the design with several people so I could validate and improve elements of the design before moving forward. All test subjects were explained what a wireframe is so they understood they were critiquing function and not aesthetics.

For the tests I asked users to complete several tasks that can be done on the site

I also asked users to take some time to play around with the prototype while I observed. I wanted to watch people use the site completely undirected so that issues I didn't anticipate might show themselves.

Reserve a compact SUV for 3/3/24-3/8/24 add insurance and a child seat to your order and then check out.

Create a new account on the site, then log in and update your driver information.

Cancel a reservation with the confirmation number 1234567890

A screenshot of the Figma prototype.

Incidents and Improvements

Every user was easily able to complete all the given tasks and the feedback was generally positive, but a few incidents that happened during testing highlighted areas I could still improve.

Incidents

One user tried to click the breadcrumb bar to go back and was surprised when nothing happened.

One user didn't notice they had successfully logged in because (other than the log in window disappearing) there was no indication anything had happened . The same confusion happened when they tried to look up the reservation to cancel and it loaded instantly.

A user clicked on one of the images in the vehicle carousel on the homepage, and was confused when it just brought them to the browse vehicles page instead of giving them info about the specific vehicle they clicked on.

One user wanted to start a reservation, but wasn't on the homepage, which is the only place you can start one from. They were confused why the reservation tab in the menu bar didn't include a way to navigate to the reservation starter.

A user was looking at the browse vehicles page and found the vehicle they liked, but they wanted to start a reservation from there.

Improvements

Clicking on a bread crumb bar to go to a previous step in the process is a common and expected behavior. I updated the prototype to include this functionality.

Users were confused when an action that typically takes a moment happened instantly. Although loading time is not necessary in a figma prototype, it's normal on real websites and apps, so it's absence caused confusion. I added a brief loading animation to the log in window and the reservation look up window.

I changed the functionality so that clicking on a specific vehicle not only brings you to the browse vehicles page, it also scrolls to the vehicle you clicked and expands its info panel.

I added a standalone reservation starter page and linked it under the reservations tab in the top bar. This way the reservation starter is easily findable, regardless of what page you are on

I added a start reservation button to the vehicle info panels. It allows a user to start a reservation directly from the browse vehicles page.

Prototype after improvements were made.

Click to view wireframes

Visual Design AND Branding

Vroom Service needed a look that is distinct among the current landscape of rental services while still looking like a car rental site. I was inspired by the idea of a roadtrip and maps, and the site's visual design reflects that. I used photography of wide open roads and people enjoying roadtrips. The copy is also roadtrip themed.

Color

Keeping with the theme of a roadtrip, the color palette was inspired by road maps.

A deep blue for water
A sage green for land
An off white for paper

The 3 main colors are also used in gradients and photo overlays across the design.

I checked my color palette with Adobe's accessibility tools to make sure people with impaired vision or color blindness would be able to use the website. The color palette passed both the contrast test and the color blindness test.

Typefaces

For the main typeface I chose Roboto, a sans-serif typeface with rounded letterforms and open, neutral proportions. Its versatility makes it suitable for a variety of applications in digital interfaces.

Bayon is used for certain large headlines on the Vroom Service website. It's an all caps condensed typeface that's good for large titles and headlines. In the Vroom Service interface Bayon is used to "shout".