Product Design

SPAN

Electrification for all

SPAN is a hardware start-up crafting experiences that harness power through a smart panel, ev charger and mobile app.

Mobile IoT Design systems

context

IN A NUTSHELL

About SPAN

SPAN enables homes to get clean energy faster, cheaper and more easily. Impacting climate change is their passion, to do this they've developed a smart breaker panel that supports the all-electric everything. | SPAN

Role

As a Senior Product Designer (first hire), I designed for both of our mobile applications and owned the design strategy and product direction of the Installer app. and user experience; utilizing a steady and opportunistic improvement with each new feature addition. |  Fall 2022 - Winter 2023

Product

I shipped four new features for SPAN Drive owners to enhance the MVP user experience and introduce novel functionality. Additionally, I worked closely with engineering to improve our Installer app. and introduce two new features, most notably enabling PowerUp with a core-flow redesign.

Design (Internal)

In addition to creating our Figma design system, I owned and introduced design ops and cross-team collaboration processes, from copy writing, design QA, and bug-bashes, to user research.

at a glance

Drive 1.1 Perks

Bringing novel features (lock, rate plan scheduling, and dyanmic charging) for market parity to the newly launched SPAN Drive EV charging experience MVP.

Role

Product design lead (IC)

Timeframe

~3 months

Scope

SPAN Drive owners; Android & iOS

Tools

Figma / FigJam & AfterEffects

Drive 1.1

Charge Dynamically

SPAN had just launched a new EV charger featuring level 2 dynamic charging, charging the EV with maximum available power while throttling down on demand to support the home's energy needs. I was responsible for communicating its potential and activating its success within the homeowner app experience with a simple visual.

Users are introduced to a novel function through a dynamic visual interlude.

Behind the scenes

Overview

Problem

Post-launch, 80% of SPAN Drive owners found the 'Charge Dynamically' mode mysterious and needed clarity on its functionality to trust activating it, in addition, prospective owners desired to see this feature's agency.

Process

Within two weeks, I explored how our existing design system skeleton could be adapted or expanded to support motion, and how these visual patterns would be extended to accommodate upcoming Drive features (of which there were five!).

Ultimately the final design was chosen for its simplicity in mirroring the main home screen power flow design and after integration led to such vast adoption that 'charging dynamically' became a default mode.

Product Goals / Outcomes

Visualize functionality at a glance

Homeowners are given a simple explanation of "how it works" complemented with a dynamic story of power balance.

Communicate nuance

Marketing and sales utilized the visual to make dynamic charging tangible and reinforce the value of service upgrade avoidance.

Demonstrate Home + Vehicle power tango

The uniqueness of SPAN's dynamic solution is expressed with romance.

Extend design langauge

Leverage pattern-recognition to build familiarity every chance we get.

exploration

How might we… visualize energy?

About

The primary challenge in onboarding this new charging feature was formulating a direction that enabled visual trust building. How do consumers interpret electricity and 'smart' system balancing?

Outcome

With a prospective design system revamp on the radar, I used the core elements of our design language, namely colors, forms, and Bauhuas principles, to explore how a single motion graphic could communicate safe load balancing demand between the home and EV charger.

Storyboarding refinement

Balancing dynamic charging

Solution

After extensive visual exploration, we settled on activating a graphic of our 'Home' and 'EV' icons, paired with the SPAN panel and EV charger. In this way, the user would immediately recognize the same visual style of power flow used on our home screen and focus on the idea of load balancing, such as when the home needs more energy, the EV charger can take less, and vice versa.

Result

With onboarding, adoption of the 'Charge Dynamically' mode jumped from 9% to ~80% and became the default for all homeowners.

Charging dynamically made clear through a power flow tango.

Drive 1.1

Charge on Schedule

To further personalize and enhance the homeowner charging experience, we introduced scheduling charging via a utility rate plan. The design solution had expansive technical and interaction design integration challenges: encompassing settings, onboarding and setup flows, and setting charging time windows with conditional feedback.

Oops! You caught me!

I'm currently constructing these case studies and updating them incrementally in the next few days. Anything below this bar is an incomplete preview of some fun and technically complex 0-1 projects. Thanks for your patience!

at a glance

PowerUp™

Unlocking the power of choice with a groundbreaking software feature that empowers homeowners to electrify their homes without the hassle of costly/time-consuming service upgrades.

Role

Product design owner (IC)

Timeframe

~8 months

Scope

All SPAN owners; Home & Installer apps

Tools

Figma / FigJam