ViaLynk - Consumer EV Charging App
Redesigning the map experience for 20,000+ EV drivers to find available charging stations quickly and confidently.
Project overview
Usability outcomes
USABILITY TESTING
Time to find an available charger and select the station. The original map took 2-3 minutes.
FINAL DESIGN
Baseline measured on the original map. The redesign time comes from round 2, which tested my first redesign with an optional availability filter. Each round had 15 drivers.
What drivers told us
Research conducted
We ran two rounds of in-person sessions with 15 drivers each. Round 1 tested the original map, and round 2 tested my first redesign. In each round, twelve participants were drivers at a mall where ViaLynk chargers were installed, recruited on site with a $5 gift card, with different people each round. The other three were colleagues who charge there daily and joined both rounds.
Every participant did the same task: open the map, find an available charger where you are parked, and select the exact station number.
I timed each session from opening the map to selecting the exact station, and logged taps, manual zooms, wrong selections, and whether drivers finished or gave up. The three daily users finished faster but needed about the same number of taps, which pointed to the interaction model as the source of friction. The time figures on this page are observed ranges from these sessions.
Key Insight: drivers check availability before distance.
A nearby charger only helps if a driver can use it. Drivers wanted to see which stations were free before they started navigating, and repeated zooming felt stressful when the battery was low. Finding out late that a station was taken was the most frustrating moment in the flow.
Why the previous design failed
The original map showed every station with the same blue marker, so drivers had no way to judge availability at a glance. As station density increased, the map became harder to use and pushed drivers into slow, manual exploration. Some drivers gave up partway through and switched to another charging network or called support to start a charge.
Design Goal
Help drivers find an available charger nearby with less zooming, clear visual signals, and predictable interactions.
Key Design Decisions & Tradeoffs
Decision 1: Introduced color-coded availability
What changed
In my first redesign, the map opened on all stations in blue, and drivers could turn on an availability filter that showed available chargers in green.
Testing showed the filter was easy to miss, which led to Decision 5.
Tradeoff
The markers show availability only. Charging level, cost and other details stay in the filters and the station view.
Why
Drivers needed to see availability before tapping into a station.
Left: Available chargers show in green. In a few places, a location with none available stays on the map as a gray (0) marker.
Right: All stations in blue, the default in the first redesign.
Decision 2: Implemented clustering to manage density
What changed
Stations group into clusters based on density.
Circular clusters group stations across more than one location.
Square markers show a single location, with the number of stations there.
Tradeoff
Individual stations stay hidden until the driver zooms in, which keeps the map readable.
Why
My first color-coded version showed every station as its own marker. Green and gray made availability easy to scan, but in dense areas dozens of markers overlapped and were hard to tap. Availability and density had to be solved together, with a hierarchy that changes as the driver zooms in.
Left: My first color-coded version, with every station as its own marker.
Right: Clustered by scale.
Decision 3: Enabled progressive zoom through interaction
What changed
Tapping a cluster automatically zooms in to the next level of detail, down to individual stations.
Tradeoff
Drivers have less manual zoom control in exchange for faster access to detail.
Why
Drivers wanted to reach a station quickly while scanning for availability, and manual zooming slowed them down.
Decision 4: Added filters and search bar
What changed
Added a search bar for direct location lookup.
Added filters for available chargers, charging level, and free chargers. The filters open in a bottom sheet, so the map stays visible while results change.
Tradeoff
Additional controls increased visual density on the map.
Why
Drivers wanted faster ways to narrow options without repeated zooming or trial-and-error.
Decision 5: Made availability the default view
What changed
The map opens with the available-only filter on. Drivers can switch to all stations in one tap.
Why
In the second round of testing, the filter was optional. 8 of 15 drivers turned it on without being asked, and 7 never found it. The core task depended on drivers discovering an optional control, so I made it the default. Making it the default also removed the one or two taps it took to turn the filter on.
Tradeoff
Drivers who want to see every station need one extra tap. I kept the switch visible because an unavailable charger may be occupied or briefly offline, and drivers still want to see stations they know. I verified the new default in design QA. There was no third research round.
On by default in the final design. All stations is one tap away.
The Before/After Experience
Before figures are observed ranges from testing the original map. The redesign time comes from round 2.
This would’ve saved me so much stress last week when I was almost out of battery. I can actually see which stations are open without clicking on every single one.
Frequent ViaLynk User
After launch
The team saw app downloads and charging sessions increase after launch. I no longer have the exact figures, so I'm not stating a percentage or attributing the change to the map alone. The core discovery model is still in production.
What this taught me
Availability is the first thing drivers check, so it should be the first thing the map shows.
A dense map stays readable when color, shape and grouping follow consistent rules.
Zoom, clustering and filters work best when they are designed together as one system.
Reflection
If I revisited this work, I would define success metrics before launch so I could report outcomes after release as well as test results. I would test very dense urban areas earlier to tune clustering thresholds. Availability still relies mainly on green and gray, so I would add a second cue, such as an icon or shape, and run a full accessibility review.