Customers’ EV Journey – Responsive web
Franklin Energy EV responsive website
My role
Customer Insights & Ideation
Partnered with a product manager and sales director to uncover insights and translate an idea into a concept.
Oversight & Coordination
Collaborated with product managers, engineers, and sales team to translate product features to the wireframe.
Experience Strategy & Vision
Created frameworks to share vision, design principles, and content strategy. This helped generate ideas, align the team, and drive decision making.
Planning & Scope Definition
Defined the product with the product manager and sales director. Evangelized customer goals and balanced business goals.
Design Execution & Validation
Designed the site from scratch with a newly developed internal style guide including a color system, typography, components, and more, along with executing design specs and wireframes.
Leadership
Designed and presented to executives, senior leadership team, and many other teams to get alignment and feedback throughout the project lifecycle.
Business goals
For EV Owners
Provides an experience to help them reduce costs of ownership by presenting information about Level 2 home chargers, along with charger rebate links to purchasing and other utility rate and demand response programs.
For EV Shoppers
Created an online experience for the user to easily navigate to see EV Benefits, Facts, Vehicle Comparison/Cost Calculator, and Find A Dealer, Find A Charging Station. Biggest benefit is to get them interested in EV and to then help them quickly choose an EV.
Process
Tool
Figma
To create just about everything
Principle
My favorite prototyping tool
Who is the user?
Emily
Emma
A proud EV owner. Emily owns an EV and drives to and from work every day. Emily has a charger in the garage that she used to charge her EV.
A potential EV buyer. Emma wants to learn more about EV and the cost of owning it.
Goal:
Find new programs to save on electric bills.
Goal:
Find more information before making a purchase.
User journey
How do customers find what they need?
Ideation
Met with all the stakeholders, including the product manager, and sales director, to draft features that the customer might like at each stage.
Sitemap & flow
Wireframe draft – low fidelity
Idea and exploration
User testing
The EV calculator is the key part of the whole project, we have worked with UserZoom to pinpoint what users like.
Testing method
Target: EV calculation mock up
Gender: 3 males, 2 females / A mix of EV owners and shoppers.
Method: Online user testing via UserZoom
Task: Compare value and usage
Some of the insights
“What was missing from the summary page was the math. Show me for different numbers of years of ownership what the total net cost would be!” – an EV Owner
“I felt like there needed to be a clear separation between the two vehicles to show the differences between each from a specs standpoint such as miles per gallon and other specifications of each car. I felt organization of the page was missing” – an EV Shopper
Final wireframing – high fidelity
The home page would be divided into two different categories for two different groups.
EV owner main page
Key feature:
- Introducing to incentives and programs
- Promotional space for buying a home charger
EV shopper main page
Key feature:
- EV Benefits & EV facts
- Compare vehicles – the cost of owning an EV
Compare EV flow for mobile view
Wireframe – all
Style guide
Used the corporate style guide that I developed for Franklin Energy.
Visual design
The landing page has two directions that separate the user to view the dedicated content. I choose the video with an EV driving through nature to show the environment-friendly aspect of EV.
Visual design – all
