The challenge
The solution
What's in a TCO?
Creating the right design
Competitive analysis
Business and design goals
Designing the tool
High-fidelity prototyping
Synergizing business + design goals
Sketching ideas
Tool structure
Displaying analyses
Designing the loading screen
Visual design
Adding a little fun
Results

The before and after

In a world that is shifting from gas to electric vehicles, I was challenged with creating something that allowed large-scale fleet managers with varying levels of expertise to accurately understand the cost of this transition. I assumed that transitioning to electric vehicles would be a net cost saving option because of the lower cost of fueling and operation. What I didn't realize was that without optimizing for a significant amount of variables, all the way from infrastructure overhauls to managing charging schedules, electric vehicles could cost more in the long term and the people managing these fleets had varying levels of knowledge about the costs and the data needed to calculate them accurately.

Company

UX Designer @ Electriphi
(now owned by Ford Motor Company)
May 2020 - September 2020

My hats

UX design
Prototyping
Visual design
Dev hand-off

Tools

Pen and paper
Figma
Adobe XD

Overview

The challenge

How might we help fleet managers and energy utilities better understand the long-term costs and implications of transitioning to electric vehicles?

Projects
About Me
Resume

Solution

01. Wizard with intelligence

The final design shows a step by step wizard that takes users through the most important information needed to provide an accurate analysis. With the amount of data needed and the potential for users to have missing information, the tool uses intelligent dynamic defaults to estimate numbers where users may have gaps.

02. building trust with transparency

The focus here is to help build trust with the user by showing them that there are significant algorithmic processes being undertaken to provide accurate analyses and show what those actual processes are.

03. actionable insights

The final screen of the tool displays the results of the analysis showing the most important data points with opportunities to get more detailed analyses delivered electronically by providing personal contact information. Users can also manipulate important real-time variables that do not require a full analysis re-run.

04. Flexibility to run multiple analyses

Using the left collapsible menu, users can see their current inputs and easily modify one or more and run a new analysis without having to go back through the entire wizard.

01. wizard with intelligence

The final design shows a step by step wizard that takes users through the most important information needed to provide an accurate analysis. With the amount of data needed and the potential for users to have missing information, the tool uses intelligent dynamic defaults to estimate numbers where users may have gaps.

02. building trust with transparency

The focus here is to help build trust with the user by showing them that there are significant algorithmic processes being undertaken to provide accurate analyses and show what those actual processes are.

03. actionable insights

The final screen of the tool displays the results of the analysis showing the most important data points with opportunities to get more detailed analyses delivered electronically by providing personal contact information. Users can also manipulate important real-time variables that do not require a full analysis re-run.

04. Flexibility to run multiple analyses

Using the left collapsible menu, users can see their current inputs and easily modify one or more and run a new analysis without having to go back through the entire wizard.

The solution

View the tool here

01. Wizard with intelligence

My final design shows a step-by-step wizard that takes users through the most important information needed to provide an accurate analysis. With the amount of data needed and the potential for users to have missing information, the tool uses intelligent dynamic defaults to estimate numbers where users may have gaps.

02. Building trust with transparency

I focused on building trust with the user by showing them that there are significant algorithmic processes being undertaken to provide accurate analyses and show what those actual processes are. I also added information icons that help users understand the significance of each piece of the required data.

03. Actionable insights

My design for the final screen displays the results of the analysis showing the most important data points with opportunities to get more detailed analyses delivered electronically by providing personal contact information. Users can also manipulate important real-time variables that do not require a full analysis re-run.

04. Flexibility to run multiple analyses

I designed a collapsible menu where users can see their current inputs, easily modify one or more, and run a new analysis without having to go back through the entire wizard.

01. Wizard with intelligence

The final design shows a step by step wizard that takes users through the most important information needed to provide an accurate analysis. With the amount of data needed and the potential for users to have missing information, the tool uses intelligent dynamic defaults to estimate numbers where users may have gaps.

02. Building trust with transparency

The focus here is to help build trust with the user by showing them that there are significant algorithmic processes being undertaken to provide accurate analyses and show what those actual processes are.

03. Actionable insights

The final screen of the tool displays the results of the analysis showing the most important data points with opportunities to get more detailed analyses delivered electronically by providing personal contact information. Users can also manipulate important real-time variables that do not require a full analysis re-run.

04. Flexibility to run multiple analyses

Using the left collapsible menu, users can see their current inputs and easily modify one or more and run a new analysis without having to go back through the entire wizard.

Process

Learning about what goes into a TCO

How can I create the right design?

The first less than trivial step of my process was to understand what actually goes into calculating the total amortized cost of owning and operating a fleet of electric vehicles with the goal of better understanding how this tool could solve a real user problem.

Learning about Electriphi and their users

I spent time understanding Electriphi's algorithms/technical competencies and reviewing prior user research to get to know who our key target users were.

Getting myself up to speed on fleet electification

I researched  the major costs associated with electrification. I worked with key stakeholders to understand the different variables involved, their relative importance to the overall cost, and the likelihood of users having access to that data. We noted any assumptions about the data that would need to be made as well as the implications of those assumptions and how to communicate that to the users.

Competitive analysis

I also dived into competitor tools to understand what kinds of technical and UX competitive advantages our tool could provide.

Key findings

People need to understand the total cost but, also how they can minimize it

01. Electriphi's algorithms are capable of producing more accurate results compared to competitors and that needs to be reflected in the design of the tool

02. The target audience covers a range of users who may have different levels of knowledge with respect to the variables involved in determining an accurate TCO

03. Users need the flexibility to customize inputs at a granular level to get an accurate estimate

04. Users need the ability to understand what goes into the total cost and find different ways that they can minimize it

Defining business and design goals

How can we create a calculator that any fleet manager can easily understand and use?

01. Flexible experience

Allow users with different levels of understanding to use the data available to them to generate an accurate analysis with minimal effort.

02. Trustworthy image

Users should feel comfortable providing their fleet specific data to Electriphi and have transparency with regards to how their data is being used/the algorithms' underlying processes.

03. Effective data visualizations

Give users enough data to understand the costs of transitioning their fleet in the long term and how they can reduce them.

04. Win more contracts

Make evident Electriphi's technical competitive advantage and how it provides robust analyses using thousands of complex scenario simulations.

Designing the tool

I began by sketching ideas

After defining the calculator specs, I put pen to paper and started externalizing my thoughts on how the tool would actually be put together. While diverging on many different design concepts, I evaluated different layers of the design from individual input fields to how the different inputs and steps needed to collectively work together to deliver a coherent experience for a variety of users. This involved significant effort into exploring ways to frame a lot of the technical jargon in an easy to understand way.

I then focused on establishing the tool structure

Going through each field, I determined what the most appropriate description would be and identified what additional information the majority of users would need when determining what to input. In addition, I went through the different data requirements and structured them logically based on similarity as well as how likely it is that the user has those data points saved in the same place. Lastly, in order to reduce the overall number of inputs and steps I went back through with stakeholders to identify non-critical data points that could be removed in order to keep the overall experience as efficient as possible.

My biggest challenge was designing the analysis page

Designing the analysis page was one of the most crucial and difficult parts of creating the tool. We wanted to present users with enough data up front to help them understand their total costs and breakdowns at a high level and encourage them to download a more detailed variable by variable analysis by providing their contact information to Electriphi. We also wanted to make it easy for users to see what they inputted, manipulate key variables, and be able to run new analyses without having to start the wizard from scratch.

I decided to create a graph visualization of the final TCO number based on different levels of electrification with a high level break down visible in a table. I also added variables that were important to users and that could be changed in real-time directly next to the analysis. Lastly, to minimize the user's cognitive load, I created a collapsable side panel where they would have access to all of the input values with the ability to change them and run a new analysis.

Designing the loading screen

By displaying simple pre-loader messages, I was able to build trust with users, be transparent about the underlying processes, and show the value of the thousands of complex simulations being run by Electriphi's algorithms. I made the decision not to require users to enter their personal data before getting to view some of the higher level analyses as an additional way to build trust and to motivate them to contact Electriphi for more detailed information.

High-fidelity prototyping

Visual design

As I progressed to building the high-fidelity prototype, I focused on using the text and color guidelines defined by the Electriphi design system to create a clear visual hierarchy of elements.

Making it engaging

One of my objectives was to find ways to maintain the user's focus through the entirety of the multi-step wizard. Without interfering with the core purpose of the tool, I leveraged simple animations to peak the user's attention enough to keep them engaged. Some examples included a moving path that progressed forward and an over-emphasis on the color change in the progress bar every-time the user completes a step in the wizard.

Results

I helped get the tool live

I worked with the development team to create a finalized design spec and actually build a live beta version of the tool that was deployed and tested with real customers.

I added tangible value to Electriphi

Since its beta deployment, the TCO tool was one of Electriphi's best lead generation tools that attracted outside business from companies such as energy utilities looking to license the tool and as a branded service they can provide to their customers.

I created a foundation but, there is more work to be done

Since my work with Electriphi ended after the beta deployment, I was unable to conduct further user testing to continue to refine the tool. Given more time I would have worked on testing and validating the usability of the tool and finding ways to improve the presentation of the analysis page.

Conclusion

Reflecting on the project

This was my first full end to end product design project starting with research all the way through to the implementation of the beta version of the product for both consumers to interact with and to be presented to potential customers for licensing. It was an incredible experience and challenge learning how to create a truly value-generating product with a great user experience under a variety of time, technical, and user constraints. I was unfortunately unable to continue the project beyond the beta release, however, I helped to define the scope and direction for future iterations of the product. These next steps included conducting extensive user testing, dynamically changing the required inputs based on a user's specific fleet management role and desired analyses, and the creation of a dashboard for clients such as electric utilities who want to license the tool to collect and manage user data.

Back to projects