Verv Energy Onboarding

Roles and responsibilities

Senior UX Designer (me) - Concept ideation, creating user flows, advanced prototyping, helping form engineering guidelines

iOS and Android developers - Native device input on user flows, building screens

Platform engineers - Technology input on user flows

Business analyst - Creating technical documentation

Background

Verv is an intelligent IoT hub which uses patented AI technology to analyse electricity data and appliance usage in the home straight from the mains, unlocking unique insights and creating new smart home experiences for consumers.

When I joined Verv, my main project was to try and refine their onboarding flow for their in home smart meter. The goal was to create a seamless experience for the customer when they are installing the smart meter in their home and connecting it to the internet. The brief was to create a flow that allowed a user to connect their smart phone app to their hub via bluetooth.

Because it was the most difficult aspect of the onboarding flow from a platform point of view, we started with designing the flow where the user connected to the hub via bluetooth and then passed WiFi credentials to the hub to connect it to the internet.

Wifi setup flow

For this project I first looked at existing smart home devices that used bluetooth as the primary way of connecting the device to the internet. Devices such as Fitbit's, Phillips Hue lights and smart home assistants like Alexa all use bluetooth to connect a headless display to the internet using a companion app.

After some ideation I brought a rough, low-fi prototype to the frontend and platform developers so that we could create a process flow to aide in the design and development process. From aUX point of view, this activity really helped me get to terms with the functionality and limitations of how iOS and Android apps could interact with the Verv Hub.

Wifi setup designs

With the process flow defined, the platform developers were able to start developing the bluetooth functionality on the hub while I created the high fidelity designs for the frontend team.

I used Sketch and Verv's internal design library to design the screens for iOS and Android. Both platforms had slightly different experiences due to the way the two devices handle errors and allow the user to interact with the system preferences from within the Verv app.

The high fidelity designs for the bluetooth flow were handed over to the frontend team using Invision and screen flows were created using Overflow.

Sign in flow

After the bluetooth flow hand-off with the frontend team, I was able to begin work on the Sign Up/Create Account flow. Because we work in an Agile environment and implement 2 week long sprints, it was important that I was always able to work one or two sprints ahead of the development team.

For the sign up flow, I did some research on current UX trends for sign up/sign in flows and gathered some inspiration that I would take into the design phase for this part of the project.

Like with the bluetooth flow, I started with creating some low-fi wireframes that I could review with the development team.

The initial wireframes again allowed us to sit down as a team and dissect the process flow for the new sign up flow. This activity allowed us to account for a variety of different edge cases and error states before the high fidelity prototypes were started.

Sign in designs

After going through the potential sign in flows with the development teams we went about creating high fidelity wireframes using assets from Verv's design system and creating interactive prototypes and microinteractions using Principle.

Prototypes were created for iOS and Android to reflect some of the differences when a user is valdiating their email address and setting up biometrics in the app.