Zeal iOS App & Branding

Fall 2019

Zeal is an LA-based Electric Vehicle (EV) charging company with a mission to help EV charging become effortless, reliable, and economical.

Their system works by providing buildings with smart chargers that are connected to the internet, a webapp for building managers, and a driver-facing mobile app. Through these avenues, they help buildings manage and limit their energy consumption in peak hours, saving them money, and maximize charger usage through the ability for drivers to schedule charging sessions.

Throughout a year, I designed their webapp, iOS app, and branding to help facilitate growth. The main theme of the design process was centered around location and time, since they play the biggest factors in how people charge their EV’s. I designed for users that are paired with certain buildings (full-level users) and also for those who aren’t paired with a building (base-level).

Hypothesis: Charging is equally location and schedule driven for all users.

Design Goal: Offer the path of least resistance to location and schedule-based charging for both types of users.

Previous Webapp Testing

Originally, I designed a webapp for drivers to schedule charging sessions and building managers to control their chargers and energy consumption.

Admins could view their statistics on energy and driver use, and limit the percentage that they want to blackout, meaning the time that the charger would not be utilized, therefore saving energy for the building.

For drivers, the platform was based around scheduling, so their main affordances were 6 tailored sessions that they could choose, based on availability and their previous habits, and the ability to view the full calendar and book open spots.

Being an early proof of concept to test, two major learning points arose from this rollout:

  1. The platform matters: users were scheduling on their phones, which lead to tougher interaction with the webapp
  2. People never utilized the pre-tailored times, they always went straight to the calendar

Moving forward with the design process, I re-analyzed the process of how drivers go about scheduling and charging.

Charging States

For the full-level user that parks their car in a Zeal-partnered building, the app would need to provide value while they are charging and while they aren’t as well. Analyzing the flow of how someone goes about charging their EV, I identified 4 different states that a user could be in.

I designed different modals for when the user is in each of the four states along the charging lifecycle. This way, the user could get to certain actions that are necessary for each state easily. For example, the ability to cancel before their session starts, and seeing their cost and CO2 impact after they’re done charging.

Working Around Schedules

When testing with the webapp, we found another painpoint of a user was that if charging spots were empty, the process to park there and be able to charge became complicated. So, I designed the ability to ‘Charge Now’ in addition to ‘Charge Later’.

This helps to solve for location-based charging. For example, if someone shows up to their office in the morning and there are open chargers, they should be able to park there and charge if there is open time. The app knows that they’re near a Zeal charger, so it displays a modal to offer them the ability to charge now, depending on availability. In this sense, the driver is able to start charging in a low-friction way.

Sessions/Charge Later

I hypothesized that charging is also time-driven, and the user should get to scheduling a charging session in the least-friction way possible. As I found that scheduling needs to be front and center in the platform, I created a dedicated tab for sessions, in which drivers can see times when the chargers are taken and can schedule a charging session when their schedule permits.

This is crucial for offices, where drivers need to work around their work schedules, meetings, and other activities. To tackle the problem of drivers going to the lot and finding someone parked in the spot during their session, the app provides notifications and text messages. If this fails, the app also allows them to report blocked spots, saving time for the managers and drivers in the instance of issues.

Designing for Base-Level User

To allow the app to be utilized by those that aren’t in a Zeal-partnered building, I designed the base-level of the app to show public chargers. By pulling an API for data of all public chargers in the US, any EV driver could download the app and still get value similar to competitors.

This way, base-level users who either ran into the app randomly, got referred from someone, or other ways could still utilize the platform, helping with brand publicity.


Given that scheduling charging sessions is more of an abstract concept in todays time, designing the product to offer affordances around different charging states and actions was crucial.

The designs successfully were rolled out based on what we learned from the webapp, and I implemented changes to support the hypothesis and design goals set out in the beginning, therefore helping as the whole Zeal platform scales to more building partnerships.

The app is currently used by 100+ drivers in 8 different cities.