How do you take control of your EV from the living room?

TL;DR

We designed the first release of the driver app for the client’s flagship vehicle.

The app was immediately put into investor demos and help raised funds for the client. The app also established a scalable layout to accommodate subsequent features in future releases.

My Roles

  • Defined functional requirements
  • Built information architecture
  • Iterated wireframe designs
  • Art directed high-fidelity mockups

Problems

Today’s smart EV owners expect to interact with their cars with ease both inside or outside of it.

But the client’s small product design team had to focus on readying the flagship vehicle first, and now a companion mobile app is needed before a fast approaching release date.

Objectives

Design an EV app for initial release that would present well in product demos, and scalable to accommodate new features.

Understand the Problem

Study Existing apps from Competitors

With a short turnaround, we needed to avoid reinventing the wheel as much as possible. Competitor products will give us a quick overview of what are expected by the end users.

Align with Internal Stakeholders

We needed to understand the capability of the system, so we avoid designing features that were not feasible or too resource intensive.

As it turned out, there were a couple of apps already developed by the client. We needed to merge, reuse, or differentiate features.

Ideation

Step 1: generate the list

I started by brainstorming a very long wish list of all the features that could be included in the driver app.

Step 2: trim the list

We couldn’t include all the wish list features in the initial release. Criteria for trimming includes, user value, development cost, and demo worthiness.

For example, I wanted to allow the user to froward POIs from the app directly to the car’s navigation. This has great user value, but requires long development time on the cloud side, that would make us miss the release date.

For another example, we wanted to allow the phone app to be a hand-held controller for all rear-seat entertainment (ie. watch the in-car TV, adjust seat massage, etc…). This could work well in a demo, and the development for an entertainment controller via another in-vehicle display was already in-progress.

Step 3: organize the list

Site Map

I considered different ways of grouping the features to produce a final site map. Eventually, the features were grouped by usage scenarios.

Wireframes

Vertical Hierarchy

I recommended hierarchy options and collected feedbacks from the stakeholders. We decided to arrange the content base on how frequently we think the user would need them.

Scalability

The information and controls were organized into tiles and accordions for scalability. It’s easy to add new tiles and expand on an accordion without revising the overall layout.

User Flows

I iterated user flows toward a set of final wireframes ready for visual design. Here are some examples,

Adjust charging target

Adjust climate settings

Reveal door control screen

High-fidelity Mockups

I worked with a visual designer to extent the existing design system to include visual components for the mobile app. I then directed the high-fidelity designs.

Impacts

Successful Demos

Initial release of the driver app was immediately included as a part of product demos. The baseline features put the app on par with competitors, while the unique features wow’ed the investors. The app helped raised funding to sustain further product development.

Monthly Releases

Due to the scalability of the design, my teammates were able to start defining new features to the app without design overhaul.