The Role

Founding Product Designer

The Problem

Providing as much data to the consumer as possible in a way that does not overwhelm them or compromises visual design principles

The Solution

Using user research to determine the most important data points to consumers, then visual design principles and hierarchy to establish a structure for that data

Challenges & Research

Every day, people are forced to deal with the paradox of choice: in the grocery store, on Netflix, and now when purchasing a new vehicle. In the past few years, electric vehicles have gone from a niche luxury item to a viable option for many consumers, and each year more and more car companies have and will be adding electric models to their fleet. Siffra’s mission is to help consumers make an informed choice by collecting all publicly available data and presenting it in an easy-to-digest manner.

When I was asked to be the Founding Product Designer for Siffra, I knew the biggest issue for the product would be striking the right balance between presenting enough information for the consumer that they feel productive, but not too much that they feel overwhelmed by what’s on the page. Visually organizing all of the data that was meant to be presented on each page would be high priority. But what is the type of data that the user wants to know? For that, we ended up working backwards by using intuitive methods to create a testing model. (More information on that below.)

Secondary research focused on best practices for data tables and competitive analysis of sites with a similar objective. A common issue with these sites is using too much visual real estate to present a single data point, forcing the user to scroll, scroll and scroll some more to get the information they need. Some learnings from this were:

Take full advantage of the screen, using visual hierarchy to put together data points in a table format
Present all vehicles at first but provide filters as an option to narrow choices down

Solutions

Using the requested data points from the client, we worked to build the first iteration of the desktop site, using a desktop first method with plans to scale down for mobile once a basic structure had been established. Some (but not all) features include:

Landing Page, which includes major vehicle data points in a collapsable table format

Federal Tax Eligibility Finder. For the most well known tax incentive, there is an income limit as well as a list of other stipulations for qualification. This widget allows users to quickly check if they would personally qualify for this specific incentive. If the vehicle does not qualify for the incentive because of the other stipulations (making income a moot point), a different version is presented. (For better detail, click either image to enlarge)

Incentive Detail Finder, which provides a comprehensive list of financial incentives for a specific vehicle make and model. This was designed for users who already have a vehicle in mind, and would like a more direct way for conducting research.

Other features include a section for charging incentives, a lease calculator and a map of local charging stations provided by the U.S. Department of Energy

Visual Identity

Something that I knew would help with presentation of the data would be visual hierarchy and keeping a minimalist aesthetic. One specific highlight color is used: green, to represent both the financial objective of the site and the environmentalism associated with the electric vehicle market. Beyond that, the site has an almost monochrome look. Most of the aforementioned hierarchy lies in the sizing of elements and use of white space.

Testing

With our first iteration complete, we worked to assemble a clickable prototype in Figma and used this prototype to have a round of moderated testing sessions. This turned out to serve as our most important research tool; we were able to gauge the data points that users gravitated towards the most and gathered some suggestions for data points that were not yet available. While feedback post-testing surveys said that they found the site to be easy to navigate and intuitive, I was able to note observations of when users found themselves at a loss of where to go next on the page, either due to poor use of space, lack of affordances, or because of expectations set up for them by other sites. With this in mind, I worked to create the second iteration of the prototype, which would become the site’s MVP.

Some of the features included in this post-testing MVP include:

Checkboxes for more specific financial incentives (such as a military discount), so that the user can easily calculate their full potential savings

Integration of other minor details such as cargo volume, safety features, and bi-directional charging (if available)

Update visual cues, tooltips and error messages to better guide the user through the site

Current Site

last updated: November 2024

Next Steps

With the MVP site now live, we are now in the process of gathering feedback from active users as well as working to add additional features to the second iteration. I will also be personally working to further establish a design system that will become the foundation for the visual design of future iterations. There are some challenges I expect to encounter in the future, such as integrating extra data points into the current structure, but I believe the best solution will continue to be prioritizing the visual hierarchy of the design so that, with the right amount of info at their disposal, the choice for the potential EV owner will become less paradoxical.