Veva

Making electric vehicle charge points easy to access and manage.

Industry:

EV / Automotive / IoT

Year:

2023

Team:

1 x Product Designer

1 x Business Analyst

1 x Project Manager

1 x iOS Developer

1 x Android Developer

Contributions:

Product Design, Animation

woman using mobile in front of a charging EV

Designing electrifying features for Veva

Project Overview

Client Website

Veva is a mobile app that controls EV home charge points, making it easy for users and Veva engineers to install, manage and control charge points, charging times, as well as set schedules and monitor total electric charging costs.

The app was designed with a multi-case use scenario and needing multiple user types, one for the Veva engineers to install and troubleshoot potential charge point issues, as well as for individual users to control their charge point easily and efficiently. The charge point doesn’t come with a screen, so it needed to have a user-friendly app.

At Tappable, I worked on this project as a Lead Product Designer, being part of a talented team of business analysts, product managers and internal IT developers.

Designing for multiple “what if“ scenarios

The Challenges

From the beginning, it was made clear that the app came with quite a few edge cases that needed careful consideration without sacrificing user experience and performance.

After multiple analyses, meetings and workshops with the Tappable internal team and the client, a carefully constructed product plan was designed and user-tested before development started.

As a product designer, I created, designed and iterated on several specific user journeys, wireframes and flows for both engineers and home users. This helped all stakeholders to quickly identify pain points in the installation process and respond efficiently with solutions, reduce friction and simplify steps wherever possible.

Challenge #1

Installation

What if there was no Wi-Fi at the point of installation?

Challenge #2

Operation

What if engineers need to operate without training?

Challenge #3

Multi-Option

What if we need to add a new charger, car or user?

Challenge #4

Development

What if design & software need developing with the hardware?

The Solutions

All teams involved worked on solving the pain points of Veva through proper requirements identification, design iteration, testing, out-of-the-box thinking and more testing.

Solution #1

#1

Designing a smart detection of connectivity

Any time the charger isn’t connected to Wi-Fi, users are instructed in the app to follow the steps to connect to the hardware via a Wi-Fi hotspot locally and set it up without the need to call an engineer or customer support.

Solution #2

#2

Creating an easy-to-follow installation guide for engineers

When installing charge points, engineers are guided in the app through a series of steps that help them with crucial settings to configure and test against the charge point they’re installing.

connect to charge point for engineers UI screens

Solution #3

#3

Easy user management

Users can configure different cars and charging cycles specific to their needs, with multiple users accessing specific data relevant to them and their vehicle, from single or multiple home charge points.

Solution #4

#4

Team integrations & delivering final product

The Tappble internal product and design teams and client hardware teams were united in working together efficiently through an efficient communication and deliverables system that worked for all stakeholders and kept everyone moving forward without interruption.

veva charger - charging conditions in app

Product Roadmap

As a lead designer, I followed a rigorous requirements criteria list with product timeline management support from both the project manager and business analyst. Together we worked to ensure deadlines were consistently met and assets were delivered efficiently and on time.

User Journeys

Before each area of the app was designed, we created user journeys in Whimsical to help us evaluate the engineers’ and users’ precise steps. This allowed us to simplify their journey as well as discover areas of opportunity to better help them achieve their goals with the product.

During the process, my team and I went through each step, sometimes multiple times and assessed where we can reduce friction, as well as focusing on how the user experience can be optimised.

This helped me create detailed UI screens later on in the design process.

Wireframes

In the beginning, we created quick wireframes in order to model the general flow of navigation. These were low fidelity and served the team to quickly asses what features and layouts we should adopt on the screen. Later on, after our workshops, I built high-fidelity wireframes to showcase a more cohesive vision of the product.

Later steps included iterating over the user interface experience to optimise functionality, reduce unnecessary UI elements, as well as creating animated pulsating dials for the app charging modes.

Charging Status Animations

One of the features we left for last was the animated dials for the charger conditions and statuses. I had suggested the idea of pulsating dials as a metaphor for electrical charges and pulses, so as to make the app feel alive - when the charger is connected, it's breathing in / ingesting electrical charge like a living breathing organism. There is also a slight nod to environmental issues: the Veva app is a tool to an alternative fuel source, much greener and environmentally friendly.

I designed these with Rive.app and sent to the developer as .json files. The client loved them.

Status: charger not connected to Wi-Fi

Status: charger waiting to connect to Wi-Fi

Status: charger connected to Wi-Fi

Status: Wi-Fi connection error

Status: charger connected & charging

Status: charger in boost override

Status: solar charging

Status: charger error

Deliverables

All UI and visual design assets were created in Figma, which allowed easy access to all stakeholders involved to view, comment, inspect and download assets directly from the design file.

Animations were created with Rive.app which was a bit trickier to hand over to developers, as their core feature offering didn’t support exporting certain files at that time so we had to find a way around it by converting these files into .json files with alternative design programmes.

Personal Insights

For me personally, Veva was a fun and intricate design project to create, from the first screen to the last. It has allowed me to gain solid knowledge and understanding of dealing with various “what if” scenarios and work on solutions together with my team.

Moreover, it was great to be part of making design and business decisions together within a highly trained team that was excited to launch this product.

Ultimately, it made me a better designer and taught me a great number of skills: iteration and prototyping various user journeys, how to create and manage consistent components across various screens, as well as having a go at Rive.app, a new animation platform at that time.

Veva

Industry:

Year:

Team:

Contributions:

Designing electrifying features for Veva

Project Overview

Client Website

App Features

Designing for multiple “what if“ scenarios

The Challenges

Challenge #1

Installation

Challenge #2

Operation

Challenge #3

Multi-Option

Challenge #4

Development

The Solutions

Solution #1

Solution #1

#1

Designing a smart detection of connectivity

Solution #2

Solution #2

#2

Creating an easy-to-follow installation guide for engineers

Solution #3

Solution #3

#3

Easy user management

Solution #4

Solution #4

#4

Team integrations & delivering final product

Product Roadmap

User Journeys

Wireframes

Charging Status Animations

Deliverables

Personal Insights

Want to know more about my skills and expertise?hello@irinacsapo.co.uk

Thanks for being here!Let’s work together.hello@irinacsapo.co.uk

Say Hello.

Thanks for being here!
Let’s work together.hello@irinacsapo.co.uk