ECAR
UX DESIGN AND USER RESEARCH
An online marketplace for eco-friendly car rentals. Search, learn and book the perfect earth conscious car based on the location you’re traveling to. Save the environment by booking a car suitable for your destination’s environmental needs.
ROLE
UX Designer and UX Researcher
SKILLS
Wireframing, prototyping, research, testing, and responsive design
TIMELINE
1 month
TOOLS
Figma and Photoshop
Project Overview
ECAR is an online marketplace for eco-friendly car rentals. The website is designed for desktop and mobile. It’s a P2P (peer-to-peer) service that connects people who want to rent out their car (host) with people who are looking for short-term and long-term rentals when they travel. ECAR also educates people on the best types of cars for the weather conditions and environmental settings their users are in.
Process
01 〰️ Empathize
Understanding the problem
I defined the root cause of the problem users face when trying to find eco-friendly cars. I developed an understanding of the target user’s goals, needs, frustrations, feelings and thoughts on sustainable options for car rental services. Also, gathered research to understand the design problem.
Product Goals
Create an easy car rental search and booking experience with resources on eco-friendly cars so that customers can drive sustainably.
Problem
I conducted surveys from 10 potential users on their particular pain points when finding and booking sustainable cars online.
01 —
There needs to be integrated educational guides on car rental websites so that users could learn more about the ecological impact the cars have.
02 —
There is never a sustainability option for browsing and booking car rentals. Having a filter just for sustainable cars would make the experience of selecting a car a lot more streamlined.
03 —
There aren’t ways where car owners to market their cars to the right renters. Car owners find that when they’re listing their car for rent, it just gets lost in the large inventory of other cars.
01 —
Increase brand recognition with a scalable and flexible design system. Maintain a consistent user interface and experience. Increase efficiency when designing.
02 —
Integrate educational guides to the website. Customers love customization and informative tools to make decisions.
03 —
Rent more sustainable cars than other car rental services. Build a simple and seamless browse, search, and check out experience.
How might we build an online carsharing service with customized sustainable vehicle options?
02 〰️ User Research
Qualitative data to inform design decisions
I interviewed 5 participants to gather qualitative data on their key motivations, pain points, and goals for renting eco-friendly cars online. Also researched design patterns for e-commerce flows and created competitive audits. My research spans across user research and market research.
Research Background
I conducted interviews and empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research were adults with licenses who love to travel and being conscious about the planet. This user group agreed with the assumptions I originally had about the app. Research shows that users want the least amount of steps possible to finish the booking process. Vehicles contribute to the biggest causes of global warming and air pollution. Users want to learn more about the environmental impact of the cars as well.
Research Questions
When conducting research, it’s always essential to create questions to help structure the depth of the kinds of research we want to find. These questions are for user, market, and product research. These are the 5 essential questions that help frame the right kinds of research to build the product.
What are the best ways to filter results to optimize customizations for the user?
What are the environmental impacts of using gas vs hybrid vs electric cars?
How can we streamline the check out experience?
How can we tell a story about the rental cars?
Why should we suggest driving more sustainably on online carsharing services?
Competitive Analysis
Researched and compared three competitors within the online car rental industry.
03 〰️ Analysis
Analyze user insights and research
I defined new design goals and main features based on research and data from interviews and competitive analyses. Then, I created a user persona to define the target audience.
User Personas
Before I start designing, I take a deep dive into what our ideal user would be. We gathered insights from the user surveys we created earlier to figure our who our target user is. We ideally want to target users that are legal to drive. The legalized car rental age in the US is 18+. This app aims to target those who love to travel but also want to make an impact towards renting more sustainable cars.
User Journey Map
These are the steps a user takers when using the website. The ultimate goal is for users to book a car from a host and enjoy their drive.
Insights From User Research
Locate electric charging station locations
Conveniently map and locate charging stations. Users don’t want to rent a car if there are no nearby charging stations.
Easy search, book, and check out experience
Users say that if the booking experience requires too many steps, they are more likely to exit the website
Keep filters simple
Users get overwhelmed with the endless filter options. Less is more and people can easily choose from less options to make better decisions.
E-commerce personalization experiences
Research from Epsilon states that 80% of customers are more likely to make a purchase is when brands offer customized experience.
Storytelling sells cars
When hosts list their cars for rent they should be able to tell a story about their cars. This provides individuality when customers are trying to book.
Mobile Design
Users often book from their phones when they’re on-the-go. They want an easy UX with simple mobile features.
03 & 04 〰️ Design and Test
Build wireframes, mockups and prototypes
The design and testing phase is an iterative process. First, I created a design system with scalable and flexible features to ensure visual consistency. I built wireframes then tested them with 5 participants. After usability testing, I created new designs based on pain points and observations from participants. Then, I built the prototype and mockup of the app.
Low-fidelity Prototype
I created low-fidelity wireframes in two phases: pre-test wireframe and post-test wireframe. After I got feedback for my pre-test wireframe, I iterated the post-test wireframe to adjust to the user’s needs.
These wireframes were designed before usability testing. They were quickly designed after sketching concepts for the app.
Participants
Male and female genders
Ages 21+
Live in USA
Eligible to legally drive (license required)
Methodology
Testing the app on a group of 10 participants.
See what kinds of information on the environmentally friendly features of each car people want to learn about
Collect data on how many rentals we get
We will see if the user flow is successful if we get more conversions (for rentals)
Performing User Testing
User Testing Questions
Is there enough information on the eco-friendly facts about the car?
Are users converting into sales?
How can we make the website simple to use in the least amount of steps?
How many users convert with mobile design vs desktop design?
Do users have the same shopping experience on mobile and desktop?
Are the features overwhelming for the user?
Pain Points
After designing the low-fidelity prototype, users tested the app to see where they ran into issues with the features of the app.
Not enough filters to tailor their search
Users feel like there aren’t enough filters to really customize what they really wanted
Users want to see reviews
The original lo-fi prototype did not have a reviews section to see other renter’s experience with the host.
Maps feature could be more interactive
Users would like to zoom in and out and see more recommendations
Users want more information on driving in certain weather conditions
Users want to feel safe choosing the right care for the certain weather conditions they’re going to be in.
User Tests: Findings
I conducted two rounds of usability tests. Each round was helpful in building the wireframe and prototype. Findings range from design aesthetic to functionality.
Search function
Users already know they want to rent a car for their trip and want to easily find the search function on the website.
Education
Users would like to see more information about the environmental impact of the cars.
Instant Booking
Users want quick instant booking to checkout without host approval. Great for those who need to rent last minute.
Themes
Confused on how to use some of the features
2 out of 5 total participants said that some of the buttons weren’t easily clickable.
“Is this supposed to be clickable?”
— 24 year old traveler
Doesn’t know how to navigate website
3 out of 5 total participants said the navigation
menu is confusing to use.
“Can the menu have more pages?”
— 30 year old driver
Booking is confusing
2 out of 5 total participants said figuring out how to book took too long.
“Is there a more instant way to book?”
— 27 year old participant
Design System
This is the design system that drives the look and feel of the website. The important parts of the design system are the brand identity and components.
Hero section search bar
Similar to the Airbnb website, this website will have a search feature right on the hero section of the home screen. It is the first thing people see when they are on the website.
Car rental details
This is the page where we could learn more about the car and book from this page. As users scroll, there is a pop up CTA that stays fixed at the bottom of the screen so that users can quickly book.
Search results
I chose editorial-style photos for the car rentals. The bold and captivating images of cars gives the user a feel for the environment they’re driving in.
Wireframe to Mockup
After designing the wireframe and the usability study, I used the design system to add in color, typography, images, and UI components to make the app come to life.
Search function hero section of the homepage
The search function of the website is the most important because it’s where people start their booking experience. There inputs for location and dates and times for pickups. Once the user clicks on the search bar, it’ll expand to a large search function where people can specify where and when they need their car rental.
High Fidelity Prototype - Mobile
After building mockups, the next step was to create interactive prototypes of the app
Filter your search results
You can filter and browse through your car options. Also, zoom in + out for the the map feature.
Car rental information
I went with more of an editorial style of design for the mobile version instead of the usual “boxy” style of design I’ve seen from other car rental websites. Hosts should tell a story about the experience driving their car. Renters should feel like they’re getting a taste of a completely different driving experience.
Booking experience
Book your stay with various payment options. There is also a “reserve now, pay later” feature so that people can book quickly without having to pay in full right away.
Homepage
Simple homepage design with a lot of CTAs to link to other pages. Also, designed a mobile menu with a search feature.
Sitemap
High Fidelity Prototype - Desktop
Responsive Design (Progressive Enhancement)
Designed mobile first. This is the desktop version.
Interactive navigation
As the user scrolls, the search bar animates into the navigation bar. This is inspired by the search hero sections from the Insider Intelligence and Airbnb search bar.
Search Function
The search function is the main feature of the website because it’s where people search for their car rentals. The inputs include where they user is traveling, pick up time and drop off time.
Best eco-friendly car for the snow
This website also suggests the best car for the environment you’re traveling to like snowy conditions, mountains, coastal areas, and deserts.
Get to know your car and the driving experience
I went with an editorial-style of design because users should feel like their reading a story by the hosts about how special their car is. Most car rental websites have a very mundane and boxy style. Users should feel like they could build a connection with their host.
Homepage
Users should feel like ECAR is also a reliable source for travel. They can also search cars by destination to see what kinds of amazing cars they can try out in other cities. Cars also have green scores to rank how great they are for the environment.