My role - User interviews, product strategy, UX & UI design, interaction design
Feature
Team
Product Manager
2 Developers
Data Analyst
QA
Background & project goals
The app was experiencing a lot of drop-offs by EV drivers due to inactivity.
The ChargeNow app is used by EV drivers to find chargers, charge their car and pay through the app. The product team wanted to increase user activity on the app, by adding a new feature that would separate us from competitors.
KPIs
We came up with a hypothesis that with the implementation of this feature, the user activity would increase by 25%
The feature itself might not directly generate revenue, but creating key performance indicators, the performance of the feature will be measured in these aspects to understand the patterns of user activity and the impact on revenue generation.
Problem
Existing research showed that drivers had a problem trying to find an available charger especially during peak hours
The customer experience team had gathered feedback that the EV drivers often faced uncertainities finding an unoccupied charger, especially during peak hours or when in unfamiliar locations.
Solution and features
I designed a feature from 0 to 1, that would help EV drivers plan their charging trips efficiently to skip wait times
Popular times is an interactive forecast feature that displays real-time availability and weekly forecasts of a charger.
Popular times section
Interactive graph with 24 clickable bars, each representing an hour
Real-time animated bar
Collapsible section that reduces cognitive load
Time and day selection
Help texts linked to status bar of the charger
Help text provides explanation on the bar height
Tabs show availability forecast of a selected day
Info pop
Provides transparency to users about data gathered.
Gives an overview of how the data can be interpreted
Research insights
I spoke with EV drivers to understand the major pain points
I interviewed 5 users who ranged from a rookie to an experienced EV driver to understand their problems and expectations.
Distance
Driving to a preferred charger is far and can result in energy loss
Plug compatibility
Driver might not get a plug that fits with the vehicle's charging port
Wait times
Most chargers in the city are occupied and hence wait times can be longer
Information accessibility
There is uncertainty in the info for the user to know when a charger will free up
Competitor analysis
Looking into our direct competitors, I found that none of them showed availability of a charger in real-time.
I benchmarked 6 competitors, to find commonalities and uniqueness. Most of them showed availability forecast of an entire charging station with multiple, which is not helpful for a driver who is looking for a specific charger.
Collaborating with the product team
Before jumping to design, I defined user stories with the PM to help myself understand context, needs and desired outcomes
As an EV driver...
I need to know when is the best time to charge my vehicle during peak hours so that I can avoid waiting.
I am planning a long drive and I want to know if I can find an available charger, without worrying about running out of battery.
I collaborated with the PM & developers to understand tech constraints, APIs and possibilities
The solution was designed based on these possibilities
API available to fetch live status of each charger at a charging station.
Forecast data is based on last two weeks of charger availability.
The charger availability forecast data is related to the plug type selected
Design process
Based on competitor analysis, I wanted to create a feature with better accessibility standards
I focused on these principles that helped me think through my designs-
Accessibility
Visual hierarchy
Relatability
A. Figuring out the placement
After an A/B test with users, I found that version B was preferred over A due to the info relatability and visibility of the section.
Forecast information changes based on the plug type selected. Users in the interview mentioned that pricing is also important while choosing a charger.
Version A
Feature will appear hidden from the viewport.
Users cannot relate the feature to the plug selected on the top.
Version B
Section is closer to plug selection; hence it is relatable.
Pricing display is not hidden from view port.
Collapsible section
Section is collapsible to reduce scrolling and cognitive load.
Provides more visibility for pricing display in the viewport.
B. Designing the section
The section will be collapsible with labels to accommodate the pricing information below it
I designed an overview for showing the status of the charger in the collapsible view, as it's easier for user to scan before opening the section to analyse the data. Iterations are under NDA and hence only mock-ups that did not make it to the project are shown here.
This is an idea that I thought of to show colour coded labels that reflect the live status of the charger.
Expanded view with status label. This idea did not make it through as you can see why, below.
The content had to be translated into 8 European languages. The characters count increased and the design did not prove to be scalable because of spacing and readability issues.
This is a coded PoC that shows the character count increasing when translated.
This is the final design "Version 1" that went live. During the implementation phase, there were tech constraints that prevented us from implementing advanced features (it will be implemented when version 2 will go live.)
C. Building design components
I used nested components method in Figma to build the feature from scratch. It resembles a cell, where small components (atoms) are put together to form larger components (molecules and organisms).
D. Designing edge cases
Talking to developers during design sprints was super helpful to identify edge cases.
Sometimes, there are user scenarios where the data might not be available at a charging station or it takes a lot of loading time to display.
Loading state
Data not available
Key learnings
The feature evolved based on users' feedback on readability, comprehensiveness, and usage patterns.
While many ideas have been gathered through user feedback, it can be enhanced further. Initially, it will be observed in its Version 1 stage to gather user activity that will help in the implementation of Version 2.
Break- even phase of the business had an impact on the feature's implementation.
During the company’s transition, limited developer capacity led to advance features being put on hold to prioritise other tasks. This taught me that compromises are sometimes necessary to meet business needs while ensuring the solution remains as usable as possible.