EASY EV
A responsive map system for EV travelers designed to help with range anxiety.
UI/ UX design . Branding . Responsive
Project
The Covid 19 pandemic has people wanting an escape from the mundane; to venture out, to see and experience outdoors. EASY EV aims to help EV travelers do exactly that; without all the worry.
But to begin with, are there any products addressing this available in the market already? what are the issues (if any) with the current offerings?
Process
Approaching the project with Design Thinking methodologies,
I gathered the goals, needs, wants, and pain points of potential users.
Looked at the market offerings and studies exploring sustainable travel.
Defined the problem statement.
Designed a probable solution based on the data gathered.
It all boils down to the question…How can traveling in EV be made hassle-free?
Product
EASY EV is a map system designed to help with multiple scopes needed to plan and execute a road trip. The main driving force of the design was to help with reliability (online & offline).
EASY EV is also designed to be responsive across multiple devices for ease of use. This project is done as a part of Designlab’s curriculum.
Scroll down to read the case study or use the sidebar to view particular sections
Research
Interpret
Resolve
Design
Test
Research
PLAN | COMPETITOR ANALYSIS | USER INTERVIEWS
Plan
The plan was to…
Understand how people plan & go on road trips.
Find out their motivation to choose EV (or otherwise).
Get to know their wants, needs, and pain points.
Understand our competitors and their offerings.
Competitor Analysis
I looked at competitors in the market; what they provide and what they lack. Some of these were suggested by research participants and were added later on. This helped me understand the market gap.
Findings
Planning for a road trip in today’s scenario is very easy... for a car powered by gas.
What about traveling with an EV? One would need to
Find a route with charging stations.
Plan for the extra time spent in charging (slow or fast).
Find and book EV-friendly stays.
Currently, EV users use different apps for each action listed above and some find the whole process cumbersome and take a gas car instead.
This is a space that needs to be filled. A responsive web app that offers all this and more would be a great tool for the User and a profitable business model in this rapidly growing market.
User Interviews
1:1 user interviews were held via zoom with current and prospective EV owners. They were asked about the current products used for this goal (if any) and to prioritize certain features offered by direct and indirect competitors based on their needs. The answers have been quantified and presented below.
87% of users wanted an online tool to help them efficiently plan a trip
75% - 100%
100% wanted EVs for Eco-friendly traveling.
87% wanted to download the route offline with all its amenities and links to charging stations and stays.
75% needed a live interactive map to suggest routes and amenities nearby.
≈50%
Have range anxiety and fear of charge running out.
Needed to know and save all the available chargers en-route ahead of taking the trip.
Have taken their EVs for long-distance and have had a positive experience.
12% - 37%
37% use their EV for daily commute to work, groceries, etc.
25% wanted EV for safe traveling (due to the pandemic) but were hesitant to take it long distances.
12% wanted EVs for cost efficiency.
Inferring from the above…
Users understand the positive impact of EV. But there is a bit of hesitancy due to “Range Anxiety”, a well-known term in the community.
There is a need for offline reliability; to be able to access all the information needed.
To summarize, they want an intuitive map (online and offline accessible) for an anxiety-free experience.
Interpret
PERSONA | STORYBOARD | BUSINESS MODEL CANVAS
Persona
Two different personas emerged from the initial research findings and they both had needs that were mostly similar; but factors like social, familial, and personal brought about a nuanced difference that was of equal importance and had to be addressed.
Provisional personas
⬇
Persona: Nadia
Persona: Tara
Storyboard
Storyboarding the possible scenarios my personas would find themselves in, equipped me to better understand the research data and possibly prioritize features. It also helped bring about a visual map of where to start designing.
Stories helped imagine the possible scenarios EASY EV could help with.
Business Model Canvas
EASY EV's business model canvas explains how this would work as a profitable & sustainable business. We keep up the revenue stream, working with key partners and giving free access to the users.
Business model canvas explains the product’s sustenance.
Resolve
INFORMATION ARCHITECTURE | SKETCHES | WIREFRAMES
Information Architecture
Site Map
EASY EV being a map system, the home page was where most of the user action took place. The site map is minimal in listing out primary, secondary, and tertiary navigations and works as an environment here.
Task Flow
The main task flows back and forth across multiple devices (desktop, phone, car screen, etc) and had to be considered crucial, particularly for this UX. Eg: The user may plan a trip on their desktop and navigate either with their phone or with their car’s interface.
Sitemap
Task flow
Sketches
I began sketching the pages informed by all the above interpretations. I focused on one flow and wanted to try and incorporate the key takeaways.
For a user to plan and execute a road trip, how should the flow be designed? Below shown, are a few screens taken from the flow.
Sketch: Home Page - Enter Destination
Sketch: Route Suggestion
Sketch: Customize & Download for offline use
Mid-Fi wireframe: Home Page - Enter Destination
Mid-Fi wireframe: Route Suggestion
Mid-Fi wireframe: Customize route - Add stops, stays, etc
Mid-Fi wireframe: Customize route - Download for offline use
Wireframes
The Mid-fidelity wireframes were developed from the sketches. The screens as seen above are influenced by the design patterns used by Google Maps. Considering the many no. of users have already learned to navigate Google maps I am confident the new app will take users no time to get accustomed to. I have tweaked the patterns for further ease of use (eg. The sidebar is on the right parallel to the mouse’s location).
Based on the research data, Prospective users use their desktop to plan a trip and while executing prefer phone or their car’s interactive interface. A complete flow involved different devices. Below shown are some key screens for mobile view.
Mid-Fi wireframe: Responsive Screens- Phone view
Design
BRAND | UI KIT | HI-FI WIREFRAMES
Brand design & UI Kit
EASY EV’s brand image was designed based on strong inferences from findings. Minimal, light, powered, reliable were some of the keywords that helped with the brand and interface design. I went for colors that would be visually pleasing and placed them minimally wherever I needed to draw the user’s attention and for easier wayfinding.
Brand design & UI Kit
Hi-Fidelity Wireframes
I kept the Hi-fidelity prototype to be minimally viable addressing the most important user need and visualizing them. Below are some key screens addressing them.
Home Page
Route Selection
Customize route
Customize route: Find EV friendly stays
Customize route: Download for offline use
Save customized route for offline use
Test
USABILITY TEST | FEEDBACK GRID | ITERATIONS
Usability Test
With the key flow ready, I wanted to evaluate users’ interaction and experience with EASY EV to understand their pain points, behavior with the product, negative and positive emotions, and modify the final product to make it more usable and accessible.
Testing was done in-person (have participants test out the Figma prototype on laptop) and remote (moderate and observe users testing the prototype via Zoom). The findings have been listed in a feedback grid.
Feedback Grid
The feedback grid helped me categorize my findings from user testing into 4 categories:
What worked well
What needs to change
What were the questions users had?
Were there any new ideas or suggestions that could be incorporated in the future?
Iterations
I addressed the “Needs to change” column from the feedback grid keeping in line with the MVP. The iterations have been listed below with relevant descriptions.
Key iterations were made based on the initial usability test findings.
Final Prototype
The embedded prototype presented below might not be suitable to view on a mobile device. Click the “view prototype” button presented at the top or bottom of this page to open a new tab.
What I’ve learned
Design for the future. Design for hope.
The electric vehicle market is a nascent field gaining trajectory due to its overall positive impact on people and the planet. But there are places for improvement.
Researching for Easy Ev pointed out a very serious problem of “Range Anxiety” amongst users. It was the driving factor for the whole design.
Since the offering combines multiple scopes of current market competitors; If given a chance to redesign; I’d walk the new users through the process and how it should be used (like a guide).
I’d like to improve my UI and work on how it interacts with the user while driving.
I’d also like to see how the task flow continues across devices (desktop, car screens, phones, etc).
Credits & Contributors
My Mentor Igor Dinuzzi
Designlab group crit facilitator Suzy La
Illustrations by Storyset by Freepik
Icons by Icons8, Google Material design
Map Images gisgeography.com
Fonts: Montserrat