Role: Solo UX/UI Designer
Timeline: 6 months (Feb-Jun 2023)
Tools: Figma, Illustrator & Photoshop
The Challenge: Making EV Charging Effortless
Imagine being an electric vehicle (EV) owner navigating the complexities of charging—finding the right station, understanding energy management, and customising charging sessions. Many EV users struggle with an interface that doesn’t prioritize their needs.
That’s where my collaboration with FELEXeCHARGE began.
The goal?
Design a seamless, user-friendly app that connects EV owners to FELEXeCHARGE’s Load and Energy Management System. Unlike their web platform tailored for business partners, this app would put users first, making energy management simple, intuitive, and personalised.
Key Focus Areas
1. Easy Signup:
Making registration simple and clear for each user group.
2. Charge History Tracking:
Helping users easily view and analyze past charges.
3. Charging Preferences:
Letting users choose and access charging options effortlessly.
4. Live Charging Updates:
Giving real-time alerts before, during, and after charging.
Check out the FELEXeCHARGE app in action here.
Understanding the Users: Research-Driven Design
A great product starts with understanding the people who will use it. Through user research, it became clear that we have two distinct groups: Residential Charging Users and Workplace Charging Users. I prioritised understanding the needs, pain points, and desires of both user groups to ensure the design addresses their specific contexts and challenges.
Bringing Users to Life
To further refine the design, I created personas representing key users within both groups. These personas helped humanize the data and provided a clear picture of the daily lives, needs, and frustrations of residential and workplace charging users. By developing detailed personas, I was able to ensure the app's features were highly relevant and intuitive for its target audience.
Residential Charging Users Personas
Goals:
-
Charge during off-peak hours to save costs.
-
Ensure the EV is fully charged by morning.
-
Have control over charging times.
Pain Points:
-
Unpredictable charging times.
-
Limited chargers in her building.
-
Needs easy monitoring and scheduling.
Background:
Caroline charges her EV at night to save on electricity costs. She needs the car ready by 7 AM and uses the app to schedule the charging.
Behaviors:
-
Charges between 10 PM and 1 AM.
-
Uses apps for managing freelance work.
-
Environmentally conscious, prefers green energy.
Caroline
Goals:
-
Ensure the EV is fully charged by morning.
-
Find quick charging solutions.
-
Have flexible charging times.
Pain Points:
-
Slow charging times.
-
Uncertainty about charger availability.
-
Needs fast results.
Background:
Tobias often needs his EV fully charged in the morning for work and has tight schedules.
Behaviours:
-
Charges last minute, often around midnight.
-
Relies on quick charging.
-
Comfortable using apps for work and time management.
Tobias
Workplace Charging Users Personas
Goals:
-
Charge during discounted hours.
-
Ensure the EV is fully charged by the end of the day.
-
Track charging history for future planning.
Pain Points:
-
Charging sessions interrupted by work events.
-
Worries about missing the discount window.
-
Slow charging speeds.
Background:
Sara charges her EV at work to take advantage of company discounts, typically between 10 AM and 1 PM.
Behaviours:
-
Charges during specific hours for cost savings.
-
Prefers apps for real-time updates.
-
Needs predictable charging outcomes.
Sara
Goals:
-
Charge quickly to be ready for meetings.
-
Monitor charge levels in real-time.
-
Avoid waiting for charging stations.
Goals:
-
Charge quickly to be ready for meetings.
-
Monitor charge levels in real-time.
-
Avoid waiting for charging stations.
Background:
Tom charges his EV in the morning for business meetings but often faces competition for chargers.
Behaviours:
-
Charges early in the morning.
Prefers fast-charging options.
Uses apps to optimise charging times.
Tom
User Journey Map
I used user journey mapping to create a holistic view of the entire user experience, focusing on the sequence of actions and touchpoints users encounter. It helps identify pain points, optimize touchpoints, and uncover opportunities for enhancing the overall user journey.
User steps
Awareness
Consideration
Onboarding
Charging & Monitoring
Completion & Insights
User Actions
-
Users hear about Flexecharge through work programs, app stores, EV forums, or social media.
-
Users explore the app’s scheduling, cost-saving, and monitoring features.
-
Users register, set preferences, and connect their EVs to available chargers.
-
Users schedule charging and monitor progress (home at night, workplace during the day).
-
Users receive charging reports, check energy savings, and adjust future schedules.
Pain Points
-
Lack of knowledge about optimized EV charging solutions.
-
Concerns about compatibility with home/work chargers.
-
Complex setup process or unfamiliar interface.
-
Uncertainty about charger availability, slow charging speeds, and competition for chargers.
-
Lack of insights on cost, energy efficiency, and missed charging slots.
Touchpoints
-
Website, social media, app store, workplace communications.
-
App exploration, employer incentives, user reviews.
-
App setup, user guides, customer support.
-
Mobile app notifications, smart scheduling, charging stations.
-
Usage reports, cost analysis, charging history in the app.
Opportunities
-
Targeted marketing via EV communities, workplace partnerships, and sustainability initiatives.
-
Highlight cost savings, smart scheduling, and real-time monitoring features.
-
Simplify onboarding with step-by-step guidance and seamless charger integration.
-
Enable real-time charger availability updates, priority booking, and smart scheduling.
-
Offer personalized reports, energy-saving tips, and predictive scheduling.
Scenario Mapping Workshop: Aligning with Stakeholders
With the survey findings in hand, I facilitated a scenario mapping workshop with FELEXeCHARGE stakeholders. We identified the app’s primary user groups and their distinct needs, ensuring the design aligned with business goals while prioritizing user experience.
Online Surveys: Gathering Actionable Insights
I kicked off with comprehensive surveys, reaching 64 participants from diverse backgrounds to learn about their charging behaviors, frustrations, and expectations. The survey consisted of 16 questions, and using data visualisation techniques, I was able to extract key insights. Below, I’m sharing the most important findings that had a direct impact on shaping the app's design, ensuring that it addresses users' needs effectively.
1. Where do you usually charge your EV?
3. Importance of Charging Control
5. Comfort with Automated Suggestions
2. Familiarity with EV-Customized Charging Apps
FEELS
4. Top Priorities When Customizing Charging Sessions
6. Likelihood to Use the App
Key Findings from User Survey
The survey revealed key user needs, like managing charge amounts, optimising schedules, and reducing costs. This data guided the app design, ensuring it’s intuitive, relevant, and focused on improving the user experience.
User Flow Charts: Defining the Journey
To create a smooth experience, I designed user flowcharts that map out key steps for each user group, from sign-up to tracking charge history.
-
For residential users, the flow is straightforward—select a charge amount, choose a vehicle, confirm, and complete the session.
-
For Workplace users, the flow includes extra steps. They may receive a warning if their pick-up time is changed due to priority charging. They also have the option to enable boost charging, which could impact other users’ charging speed.
These differences ensure each user group has the best experience for their needs.
Start
Choose Charging Plan
Workplace / Residential
Residential Plan
Workplace Plan
Log in/Sign Up?
Custom or Instant Charge
Log In page
Sign Up Page
Customize Charging
Instant Charging
Choose Pick-up Time
Choose Vehicle?
User Chooses Vehicle
Save
User Selects Time
Confirm
Residential Charging Prototype
Style Guide
Typography
Aa Dosis
Header 1
Medium, 25pt
Header 2
Medium, 20pt
Body text
Medium, 18pt
Body text
Medium, 12pt
Body text
Bold, 12pt
Color Plate
Primary Colors
#009EE3
#2441B2
Secondary Colors
#FFFFFF
Tertiary Color
#BAFF9A
Background Color
#FE805A
#E7F6FF
Text Colors
#00000
#009EE3
#FFFFFF
Buttons
Primary Button
Secondary Buttons
Tertiary Buttons
Inputs / Form Elements
Mobile Keyboard
UI Components
Menu Bar (Navigation Bar)
Product Menu
Usability Study Insights
I conducted remote moderated usability testing with 10 participants to evaluate the usability and functionality of the Flexecharge app prototype.
-
Charging Start Timeline: Added to help users see when their EVs will start charging.
-
Queue System: Implemented for residential users instead of rejecting charging requests due to insufficient power.
-
Workplace Charging Interruptions: Introduced a warning system for users affected by prioritisation rules.
-
UI/UX Enhancements: Adjusted button design for clarity, improved charge history visibility, and optimised info sign placement.
-
Sign-Up Process: Simplified by removing unnecessary fields and adding RFID input guidance.
-
Charging Screen: Improved visibility of charge time and speed.
-
Shorter Info Texts: Replaced long descriptions with concise bullet points for better readability.
-
Speed Up Charging: Consider limiting access to high-priority employees.
What I would do differently
-
Expand User Testing – Increase participant diversity for broader insights.
-
Enhance Customisation – Improve smart scheduling and automation.
-
Improve Real-Time Feedback – Add interactive elements for clarity.
-
Refine UI Simplicity – Ensure efficiency without overcomplicating features.
-
Study Long-Term Behaviour – Analyse how user habits evolve over time.
-
Conduct Competitive Research – Benchmark against other EV charging apps.
-
Iterate & Validate – Test improvements with both qualitative and quantitative metrics.
