Charging Up
Charged Up
Users are going electric

Overview/Summary
Users are Charged Up! over the ability to learn and make informed decisions about the purchase of electric automobiles. Sales of electric vehicles are climbing at a steadily increasing rate each year as more and more people join the electric vehicle revolution.
Tools
Miro
Figma
Maze
Google Suite
Illustrator
Team
1 UX designer
1 Developer
My Role
UX design
UX research
Meeting Facilitator
Timeline
Overall: 4 weeks
Discovery & Research: 2+ weeks
Design & testing: 2 weeks
Problem
There are many myths and untruths out there about electric vehicles. This lack of information is especially prevalent for mobile devices as there are very few apps that share reliable information about electric vehicles with the users.
Target Audience
The target audience for this app includes those looking for a new environmentally friendly option to drive. These individuals also are looking for low lifetime costs. Some of these people are looking for a low lifetime vehicle cost.
Solution
Our end result is an easy to use intuitive and accessible application that is above the fold. The application allows the user to compare electric vehicles, compare features, locate charging stations, and learn all about electric vehicles.

Double Diamond Design Process

Week by Week Design Schedule

What Are Our Research Goals?
Summary of Research Goals
Produce a user friendly application
Have the application free of pain points
Plan out what users will need to know to make informed buying decisions
Plan to discover through research what features users are looking to compare and contrast
Research and convey charging system information

SWOT Analysis
SWOT Analysis
A SWOT analysis was deemed important to help provide a clear view of strengths, allowing me to build on them and meet objectives at the same time. Areas of weakness and possible opportunities were also found. These could be exploited and expanded upon to create a superior, user friendly electric vehicle companion application.

Pains obtained via survey data
Surveys (Quantitative)
Pain Points and Takeaways
After the project kickoff, definition of research strategy and objectives was next. Understanding the target audience and their challenges was a priority. I built an online survey. In just a few days, 30 submissions were received. Based on these, I identified 3 common pain points, which lead to the next logical step of seeking qualitative data via interview. We kept these pain points in mind as we moved throughout the entire project.

User insights from the survey

Key Interview Pain Points
Interviews (Qualitative)
During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. I prepared an interview script with 8 open-ended questions, focusing on our target audiences’ values, motivations, and daily routines. In 4 days, I recruited and interviewed 5 users remotely. I referenced the user interview findings throughout the entire design process, including the pain points that were uncovered.

Car Charging
Recommendations from Interviews
What do they need/What are some recommendations?
They really want research
They definitely want to find information on pricing
They want a more personalized experience for choosing electric vehicles
They want to see how they compare to traditional internal combustion vehicles
They would like to see what others have said about electric vehicles

What Do Our Personas Look Like?
Personas
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 3 personas for each of our user segments.
The working father who was looking to purchase a more environmentally friendly 2nd vehicle for his family.
The recent retiree who was looking to purchase a more environmentally friendly option that would allow her to lessen her carbon footprint as she set out to travel during her retirement.
The early adopter who likes to grab new technologies soon after they become available.

Empathize
Empathy Map
The empathy map represents a principal user and helped us better understand our users motivations, concerns, and overall experience. I wanted to organize our users behaviors and feelings to create a sense of empathy between them and ourselves.

Charged Up Empathy Map

Customer Journey Map
Customer Journey
I created a customer journey map to build a better understanding of how customers find and interact with electric vehicles and to discover opportunities for improvement. The map revealed some opportunities along this customer journey.

Customer Journey Map

How Might We
How Might We Exercise
I conducted a how might we exercise to help determine which product features to include in the design and how to go about designing them.

Detailed User Stories
User Story/User Flow
There is a Native American proverb that says “It takes a thousand voices to tell a single story”and that’s exactly how I set out to write a user story. I took the voices of many users, uncovered their core need and turned it into a story. This represents the core needs of the user, what they do with the product and why they do it.
The user flow below represents the paths or tasks the user may undertake while using the product.

Charged Up User Flow

Charged Up Site Map
Sitemap
A top down look of how all the pages may be arranged in the Charged Up application.

Time to Sketch It
Sketches
Below are sketches based on initial research.

Paper Prototype
Paper Prototype
At this stage I set out to create a paper prototype to begin to gauge how the user might interact some buttons on a screen.

Designing
Preference Testing
As part of the design process, I conducted some preference testing with 20 users to determine which layouts were preferable for my target audience. Testing was conducted for each of the main 6 screens for the design with user preferences marked with a blue arrow.

Lo-Fi Wireframe Sketches
Lo-Fi Wireframe Sketches
Based on user research and a thorough round of preference testing I was able to sketch some initial wireframes on paper. Here are those ideas.

Lo-Fi Wireframe
Digital Lo-Fi Wireframes
Here is what the initial lo-fi wireframe looks like.

Clickable Testing
Usability Testing
I ran some usability testing with the lo-fi clickable prototype that was created based on research and user preference. I tested with 5 individuals and 3 chose to leave useful feedback.

Things Users Liked - The Glows

Things Users Disliked - The Grows

Modified Home Page
Home Page Multiple Paths
A home page update based on the first few rounds of user testing. Users indicated they would like a bigger button in the middle and thought a darker border would help things stand out.

Charging Page Update
Charging Page Multiple Paths
This is an update to the charging page based on multiple rounds of user testing. Users indicated they would like a more interactive map.

Charged Up Mood Board
Mood Board
I aimed for a color scheme that would adequately convey the concept and excitement of electricity. The sky blue can indicate excitement and the app is electric. Set against a dark mode, it creates a contrast pleasing to the eye. Futuristic images represent a high tech electric feel for the design.

Style Guide Model
Style Guide/Design System
A style guide helps with consistency across a design team and will be added to as you run through multiple versions of your design. It allows for a great level of consistency in the design. This is the documentation of my thought process on Charged Up with representations of iconography, color palettes, UI elements, typography, accessibility, and others. For accessibility I aimed for an intuitive design with elements that were easily perceptible and required low physical effort. A contrast check was done along with a color blindness test to ensure AAA compatibility. The logo, brand, and color scheme conveys excitement and electricity.

Testing an App
Usability Testing Hi-Fi
I created a fully-functional, hi-fidelity prototype of the new flows in Figma which I tested by utilizing Maze. At the same time, I started recruiting subjects for the test who fit the necessary criteria. I conducted 4 usability tests in the first round and 2 more after iterating on the few issues that were identified. Below are those examples.
Issue 1:
Users clicking on the warranty option instead of the charging option when comparing charging information for electric vehicles versus combustion vehicles.
Solution 1:
I removed the warranty section and kept that strictly in the electric vehicle car picker section. The result was a 100% success rate upon 2nd testing for this task.

Before and After Testing

User Testing
Usability Testing
Issue 2:
The main menu was deemed to be misplaced and redundant.
Solution 2:
I changed the location of the menu and made each menu icon to reflect each main page of the design.

Before and After

Home Screen
UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and message, which is: “charged up”. Also, I checked out the competition and took a close look at all of my library ideas to come up with a working prototype. The result was a superb dark mode prototype for the mobile environment. Please find the updated screenshots and prototype below.

Hi-Fi Prototype
Hi-Fi Prototype
Here is the hi-fi prototype after rounds of testing.

Refine the Design
Next steps
My goal moving forward is to refine the design through additional rounds of testing once the product is placed on the IOS platform. Also, my goal will be to update the information each year as electric vehicle research is constantly changing with the new technologies that emerge.

A Bright, Electric Future!
Learnings
I learned that the more you interview, the more refined your approach continues to be. I was also able to come away with a greater knowledge of what Maze can do in terms of product testing. I intend to work more on this in the future. It is pretty robust in terms of offerings.
Challenges
An additional challenge moving forward will be to place this onto the mobile platform. Coding is a challenge for me thus far but I fully intend to rise to this challenge. I want to learn Java and CSS to start with, which will greatly aid me in my design offerings. In fact, I just started some course work in these.
Failures
I initially attempted some 3-D logo work as well, but failed at it initially. I also sought to do live account tracking but did not see how it could tie in for now.
Successes
I formed a few more professional relationships through this project. This was a joy to develop and I learned a great deal about electric vehicles. I also want to thank my developer for helping me out with some of the heavier, coding elements. We ended up with a superb , intuitive product that meets the needs of the user.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.