Atom Power Electric Vehicle Installer App MVP

As Electric Vehicles (EV) gain market share, large-scale charging solutions are increasingly critical. Atom Power built the world’s first and only true solid-state circuit breaker, using semiconductors to control the current digitally. Their work is opening new avenues for creating Large Scale EV (Electric Vehicle) charging infrastructure. With that, there are peripheral services needed to setup, run and optimize these technologies.

To secure a government grant, Atom Power approached us to build an MVP Installation Wizard progressive web app. Their grant deadlines required an exceedingly fast turnaround. If all went well, this would be the first of the three apps they will need to operationalize their business model and manage their charging panels at scale. The first app was designed to assist installers in getting the EV charger stations up and running safely and consistently.

Design Process

Stakeholder Interviews
Ingestion of technical drawings & Flow Diagrams
Wireframes
Prototyping
Design System Creation
User Testing
Final UI

Timeline

Our timeline was exceptionally tight to ensure we got the MVP project done in time for critical grant application deadlines. Only elements essential to the functioning of the MVP were included in this version.

MVP Discovery: 4 Weeks

MVP Build: 8 weeks

Our Team

My Role: Experience Architect / Design Lead (Discovery + Build)

Our Team:
(1) Solution Owner (Discovery + Build)
(1) Solution Architect (Discovery + Build)
(1) QA (Discovery + Build)
(3) Additional Devs (Build)

Flow Diagrams

Our clients were, above all, engineers. They knew how to communicate best with engineering drawings. We used those documents as the base for our flow diagram which helped facilitate early conversations to ensure we understood exactly what this app was meant to accomplish.

Wireframing

Wireframes were a critical tool in gaining alignment withe the stakeholders. Even with great discussion and agreement on the flow diagrams, it wasn’t until seeing the wireframes that the project really came into focus for our most technical stakeholders. With these wireframes, our client better understood the structure of what we were creating, and could provide valuable feedback and input so we could iterate and ensure we met their needs. These also created the backdrop for critical conversations about what would stay and get pulled from MVP to ensure our team could complete the app build on time.

Prototyping and User Testing

We tested our flows with stakeholders and users via Figma’s prototyping functionality. User testing yielded some exceedingly valuable information about the opacity of the technical language our client was using, and allowed us to revisit an earlier conversation about the language of your user needing to often times be different than industry terms used by very technical folks.

Basic Design System Samples

DS-Colors

DS-form-field

DS-Icons

DS-Text

DS-Alert

DS-Headers:Nav

DS-List

DS-Modals

Outcome
Atom secured the grant and hired us to create the next two apps in their ecosystem.

Final MVP Design

Dashboard Views

The Dashboard provides a list of the Installers clients as well as the ability to fast track to the Panel details by using the QR scanner functionality on the QR code each Panel contains.

Charger Details

Charger selection interface for the installer to select the right panel and charger to commission.

Commisioning Wizard

The Commissioning Wizard walks the user through a three step process ensuring the installer is using the righ wire gauges, and that power is being distributed as expected through the charging station.