EV

Responsive website

Electric vehicle project

header

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.

Who is the user?

Emily

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. 

Goal:

Find new programs to save on electric bills.

Emma

A potential EV buyer. Emma wants to learn more about EV and the cost of owning it. 

Goal:

Find more information before making a purchase.

Timeline

  • Sept 2020

    User journey

  • Mockup, sitemap, and grid system

  • Oct. 2020

    Wireframing, user testing

  • Finalize wireframe

  • Dec. 2020

    Visual design

User journey

How do customers find what they need?
Persona

Collect all the features

Gathering features

Met with all the stakeholders, including the product manager, and sales director, to draft features that the customer might like at each stage.

FDD33195-A042-43A5-A5C4-193EA1AA1035

Sitemap

Sitemap
Flowchart

Wireframe draft

Idea and exploration
results
pricing-detail
EV Home page1400x900_v1
Find a dealer step 1
Find a dealer step 2
3a-calculator
assumptions
EV Rate plan

Set up the foundation

Using responsive layout grid to adapt to screen size to ensure consistency across layouts. 
grids_4

User testing

The calculator is the key part of the whole project, we have worked with UserZoom to pinpoint what users like.

Testing method

Target: EV calculation concept

Gender: 3 males, 2 females / A mix of EV owners and shoppers.

Method: Online user testing via UserZoom

Task: Compare value and usage

Question sample

Identify actions you could take to change the ownership cost of a given electric vehicle. What factors would make ownership more expensive? Which will make it cheaper?

 

Some feedback

“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

“The cost of the vehicle was the most important factor” – an EV Shopper

2021-01-31_07-02-08
2021-01-31_07-09-03

Final wireframing

The home page would be divided into two different categories for two different groups.
EV owner page

Key feature:

  • Introducing to incentives and programs
  • Promotional space for buying a home charger
EV Page for owner - Desktop
EV shopper page

Key feature:

  • EV Benefits & EV facts
  • Compare vehicles – the cost of owning an EV
1.0.0 Shopper LP - Desktop
EV
Calculator flow for mobile device
EV

Style guide

Used the corporate style guide that I developed for Franklin Energy. 
EV

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. 
hero_img
EV