Car charging made easy

Electric Vehicle Charging Station Finder

ZapEV project hero image

How can we make finding charging stations as easy as finding gas stations?


ZapEV is a location-based responsive web application that helps electric vehicle owners find charging stations near them and their searched destination.

View the Behance version of this case study here.


UX & UI Designer


Nov 2021 - Feb 2022


Prott, Adobe XD

Project Type

CareerFoundry student project


As fossil fuel resources wane and the negative environmental effects of their consumption are starting to be felt around the world, the electric car industry has stepped up to fill in a new, more environmentally friendly role in the automotive industry. As the supporting infrastructure is still being implemented, finding charging stations can still be difficult for electric car owners. They tend to be decentralized, disorganized, and are often broken down.


The expanding pool of electric vehicle drivers need charging stations outside their home that are easy to find and as easy to use as gas stations. ZapEV attempts to fill this role by providing EV drivers with an accurate, efficient, and easy to use location-based search engine for EV charging stations.

The Process


Competitive Analysis

Of the various EV charging apps available, PlugShare and ChargePoint are the biggest competitors with the highest ratings on app stores.

  • Large existing active community
  • Largest collection of stations 
  • Shows stations from multiple networks
  • Fewer and confusing filters
  • Trip planner feature only works on iOS and the web app.
  • Clunky user interface
  • Shows real time availability and can reserve stations
  • Provides charging activity details (speed, price, distance)
  • Fewer stations
  • Many think that the app only includes charging stations within the ChargePoint network.

ZapEV can cut into this increasingly crowded market by providing real-time information on charging stations of various networks.


User Interviews

I conducted user interviews with three EV drivers who fit the target profile. I was most interested in their common pain points and what kind of information they look for when searching for a station.

Original hypothesis

Lack of stations and slow charging speed means EV drivers have to plan ahead.

Charging EVs takes longer than filling up a gas-powered car, so I thought EV owners must plan their charging and avoid charging stations that are occupied.

  • Users want a reliable, trustworthy, and centralized source of information for charging stations, regardless of the station's network.
  • Users prioritize information such as availability & access, charging speed, and price.
  • All of the feedback could be condensed into one need: convenience.

"Sometimes I feel like there's too much information. I wish there was a filter."

"I feel like I need to download a new app every time I go outside the Tesla network"

My original hypothesis assumed that people plan ahead and find charging stations ahead of time, but the increasing number of charging stations available makes that largely unnecessary.

Revised hypothesis

EV drivers look for whatever is most convenient at the moment.

Especially for shorter trips, EV drivers just want to use whatever is convenient at the time. "Convenience" may look different depending on the user or the situation, but regardless they should easily find charging stations that fit their needs in the moment.


User Personas

The following three user personas summarize the various goals, motivations, and frustrations found in the user research.

Monica's user persona thumbnail



The Planner

Organized, Curious, Anxious

Age 31 | Mechanical Engineer

Los Angeles, CA

College Graduate

Long-time partner

background quotation mark

I get range anxiety whenever my battery gets below 50%, so I like to top it off whenever there is an easily accessible station nearby.

Why an EV?

Monica moved from NYC to LA, and needed to purchase a new car to accommodate the commuter lifestyle. She bought her car after exhaustive research because it fit within her budget, and had the added bonus of making her feel socially responsible. She initially feared the effect charging would have on her schedule, but felt better once she knew Tesla had a well-established infrastructure of Superchargers throughout California.


Monica makes time to visit her friends and family who live across the Los Angeles area, so she is often driving into unfamiliar neighborhoods.

Goals and Motivations
  • To find charging stations close to her destination, often while out running errands or near new restaurants.
  • Arriving at a station that is broken
  • Not knowing if a charging station is available
Car make and model:

Tesla Model 3

Owned since:

August 2021

Justin's user persona thumbnail



The Analyst

Adventurous, Laid back, Detailed oriented

Age 35 | Software Engineer

Mountain View, CA

College Graduate

Married with no children

background quotation mark

I don't often have to charge outside of Tesla's network, but whenever I do, I'm surprised by how often the information is incorrect, difficult to find, or simply unavailable.

Why an EV?

Justin and his wife are planning for a child and purchased a car so they could adjust their lifestyles and schedules accordingly. They decided on a Tesla SUV because they are both conscious of their environmental impact and for the long-term cost savings.


Justin is often outside, whether hiking in the woods or surfing in the ocean and is not afraid to take his car on long arduous journeys (as long as he's done some minimal research beforehand).

Goals and Motivations
  • To find stations in new areas or cities on longer trips
  • Having to sort through the reviews and descriptions to find stations that are legitimate
  • Driving to an 'available' station to find a non-electric car parked in the spot
Car make and model:

Tesla Model Y

Owned since:

October 2020

Gabrielle's user persona thumbnail



The Saver

Nurturing, Creative, Conscientious

Age 39 | Professor

Los Angeles, CA

College Graduate

Married with two children

background quotation mark

I need a centralized app that gets to the point and tells me what I need to know without a lot of work on my end.

Why an EV?

Gabrielle and her husband chose to go electric with their second car as a cheaper option (as gas prices increased over the years and making use of their home's solar panels). They are happy with it for local driving, but have a second car for long-distance trips and separate commuting.


Gabrielle is often busy on the go commuting to work, chauffeuring her children to their activities, and running errands.

Goals and Motivations
  • To find cheap charging stations efficiently and easily
  • To get a good understanding how much she is paying per charge
  • Needing to download multiple apps to charge at various stations
  • Arriving at the address listed for a station, then driving around a big lot to find it
Car make and model:

Chevy Bolt

Owned since:

June 2021


Minimum Viable Product (MVP)

Using the user personas as a starting point, I created a list of "jobs to be done" (JTBD) in the app, and whittled down the list to only the ones required for the app to function, forming the backbone of the Minimum Viable Product (MVP).

map pin icon
Search a location for nearby stations
information icon
View detailed station page
navigation icon
Navigate to location
filter icon
Filter results
tips icon
Leave comments and tips
warning icon
Report issues
check in icon
Check in
MVP Hypothesis

I believe that by centralizing the source where EV drivers find charging stations, they will choose this app over the competition, which typically specializes in a single network of charging stations.


User Flow Diagram

To understand how users would navigate through the app to perform each task, user flows were made for each JTBD, and then combined to form the user flow diagram below.



Usability Testing

Exploratory Sketches

Using the user flow as my map, I hand-sketched low-fidelity wireframes for each screen, re-drawing as needed to see what worked best.

first iteration sketch of low-fidelity wireframe
One page of exploratory wireframe sketches
Usability Testing Tasks

I imported the best of these sketches into Prott to create a prototype, and tested four users who were asked to complete the following tasks:

  1. Log in to your account
  2. Search for stations near your destination and filter the results
  3. Choose a station and navigate to it
  4. Report an issue
  5. Check in
  6. Add a tip

Through the usability test, I found the following issues with my design. I revised the wireframes and redrew them digitally in Notability.

Key Finding #1

Station preview did not look clickable

The station preview on the map results page did not look interactive, thus testers were not inclined to tap it to reach the station's detail page.

Solution: Use more visual cues to show interactivity

I chose to put the preview in a card format with a drop shadow.

original map with station preview

Original home screen/map

revised map with station preview

Revised home screen/map

Key Finding #2

Searched location icon was unclear

The map with the search results showed the searched address as a location pin, but it was unclear what it represented.

Solution: Add distinguishing colors and the searched address
original goal category selection page

Original map search results

revised goal category selection page

Map search results

Key Finding #3

Blank home map was disorienting

This was one downside the lack of detail in the low fidelity sketch, but without a map and location pins, it was difficult for the user to orient themselves.

Solution: Have the home page/map's default show current location and nearby stations

This will also have the added benefit of eliminating one step if users are searching for stations near their current location.

original home screen/map

Original home screen/map

revised home screen/map

Revised home screen/map


Revised Low-Fidelity Wireframes

I addressed the usability issues found in the testing by redrawing the screens digitally in Notability. This allowed me to wireframe more efficiently because I could copy and paste reused elements like buttons, icons, and text inputs.

low fidelity home screen
low fidelity log in
low fidelity map with search dropdown
low fidelity search results on map
low fidelity map with station preview
low fidelity results list with filter


Mid-Fidelity Wireframes

mid fidelity home screen
mid fidelity log in
mid fidelity map with search dropdown
mid fidelity search results on map
mid fidelity map with station preview
mid fidelity list of results


Mood Board

In order to clarify and visualize the overall feeling for this app, I created a mood board based on keywords that best represent how users should feel about  ZapEV.


Efficient | Friendly | Harmonious | Sustainability | Convenience


Many of the images represent an idealistic and utopian perspective of our technological future. Pastel color palettes create a soft and natural vibe that reflect the sustainability motivations behind electric vehicle technology.

The Atlantic by Chinworth from BehanceFuturistic City for InSights Magazine by Sam Chivers from Behance
Airport of the Future by Sam Chivers from Behanceroad trip map by Leah Kelley from PexelsA Day in 2050 by Oberg from Behance
Workplace isometric illustration by MAUCO from BehanceDocs Homepage UI by Koklyuhin from Dribbble
electric car charging by Kindel Media from Pexels


Style Guide



Display: Bree Serif


Headings: Montserrat


Body: Segoe UI

Color palette
Light Gray










Muted Blue




Imagery & illustrations

ZapEV's UI will primarily contain maps, icons, and text, but certain screens, like the sign-in page and confirmation screens, can benefit from illustrations that communicate the brand's values. The illustrations below are rounded and made from simple shapes, aligning with the brand's friendly identity.

general illustration for ZapEV
illustration for 'currently charging'
illustration for reporting an issue
System Icons
back icon
exit icon
search icon
hamburger menu icon
previous search icon
Menu Icons
profile icon
bookmark icon
car icon
charging icon
filter icon
Station Icons
price icon
operating hours icon
information icon
tips icon
check in icon
photos icon
Status Icons
"Available" icon
"In use" icon
"Not available" status
"Issue reported" status
UI elements
Dropdown Menu
dropdown menu
Text Field
text fields
Search Bar
Search bar
Filter Label
Toggle on


Toggle off


Checked checkbox


Toggle off


Radio Button
Selected radio button


Deselected radio button



The Final Design

ZapEV mobile mockups
Search for a station
high fidelity home screen

Begin with a map centered on the user's current location.

high fidelity home screen with search dropdown

Tapping on the search bar shows suggested and recent locations.

high fidelity search results on a map

Search results are first displayed on a map.

high fidelity search results in a list

With the search results in list form, users can scan for more detailed information.

Filter Results

Users can filter results based on their most prioritized criteria, like price, network, and speed.

high fidelity filter menu

Filter Menu

high fidelity filtered search results on map

Filtered results on a map

high fidelity filtered search results in a list

List of filtered results

Preview a station

By tapping on one of the location pins for a station, a small card will appear with its most pertinent information and primary actions. If the user wishes to view more information, they can tap the preview card to access the full station page.

high fidelity search results on a map with preview information
Touring the station details

A station's page has all of the information most EV drivers need to decide if they want to charge up there. This includes pricing, stall availability, operational hours, charging network, and accessibility. Users can check in to record their usage and let other drivers know when the stall is in use. Tips also alert other drivers to the nuances of each station.

high fidelity station details page
Report Issues
high fidelity provide details of issue

Provide details of issue

high fidelity confirmation of issue report

Confirmation of receipt

Check In

Check in to stations to let others know that a stall is in use.

high fidelity check in screen

Check into a stall

high fidelity filtered search results on map

Provide details

high fidelity confirmation of check in


Add a tip

Leave a tip to let others know how to find or use the station properly.

high fidelity add tip screen

Provide tip

high fidelity confirmation of tip submission



What went well?
  • New and informative insights from user interviews
  • Clear feedback from usability testing
What did not go well?
  • Overcomplicated first prototype's task flow
  • Learning curve with the low-fidelity prototype software
What could be better?
  • Revisit designs to match industry standards better
  • Limitations of a student project meant lack of resources for recruiting users during research phase. I was only able to interview Tesla drivers, so the findings were narrow.

Nest Egg