Actev App: User Onboarding

Actev App

User Onboarding

 
Group 5.png
 

User onboarding: assembling SmartKart, and App and SmartKart connection process

 

CHALLENGE 

Create seamless and positive process for the customer assembling the SmartKart and connecting the mobile app to the SmartKart.  

PROJECT

Design entire first touch experience from physical to digital. This process encompasses every step between the box arriving at the customer's house to the customer's child driving the SmartKart. 

SOLUTION

I developed and owned the customer journey during this critical first-impression period. I designed the packaging, assembly manual, app connection instructions, UX design for in-app setup and safety tutorial video. 

Visit Actev Motors website


Customer Journey

I realized early on that the setup process for the Arrow had potential challenges, mechanical and technical, and could take longer than an hour. I wanted to make sure the customer felt good right from the beginning and we clearly communicated helpful tips, to help avoid or lessen potential set up frustrations. I mapped out the whole customer journey for the team with time estimates and points of transition and friction. Mapping the process helped the entire team understand why I pushed for specific overlapping instructions, such as printing the app set up process and having the process in app, to avoid the customer getting lost or frustrated. Each step had to be completed to get to the next step. 

Customer journey from receiving box to driving Smartkart. This helped to breakdown the process into steps and understand that each step was a mini project. It was my goal to make sure that each step had bridge material to make sure the customer was never lost.

Customer journey from receiving box to driving Smartkart. This helped to breakdown the process into steps and understand that each step was a mini project. It was my goal to make sure that each step had bridge material to make sure the customer was never lost.

Mockup of screens for app set up. This step was crucial to understand the technical requirements for connecting the Actev App to the Smartkart.

Mockup of screens for app set up. This step was crucial to understand the technical requirements for connecting the Actev App to the Smartkart.


Unboxing and Smartkart Assembly

After opening the box, I wanted to have all the instructions and parts packaged together and prominently displayed. I wanted the customer to feel welcome and excited about their purchase and that we cared about them. The welcome package included a handwritten welcome note, a quick overview of the setup process, and the assembly manual.  

 I worked closely with the engineering team to create the assembly manual.  As a non-engineer, I helped them clarify the process, use non-technical language, and pushed them to re-work steps that would be too challenging for a user. I story-boarded the process, wrote the instructions, and worked with the graphic designer to visually show the assembly process using tech drawings.  

I designed the box packaging for the SmartKart and the body kit at the last minute when the packaging designer fell through, and we were up against a major deadline.

The box was so large that I needed to make a mock up to ensure the packaging design scale is correct and warning labels met regulatory standards.

The box was so large that I needed to make a mock up to ensure the packaging design scale is correct and warning labels met regulatory standards.

Assembly manual with my original sketches and notes I took while working with the engineers to document the SmartKart assembly process. See the whole assembly instructions here.

 

Connecting App and Smartkart

The SmartKart is unique in that it does not connect via Bluetooth but via wifi to enable an extended driving range. The process of combining and creating a wifi password for the SmartKart on the phone is more complicated than Bluetooth connection. The user has to go through the wifi set up the process to use the SmartKart. I created an in-app swipe-through tutorial and printed screen by screen steps in the manual. If the user got stuck in the middle of the process, they would be able to reference the printed manual.

Screen by screen instructions for App setup with Smartkart. When the user opens the Actev app they are presented with connection instructions, but once they start the process they might get lost. If they get lost during the process they can refer back to the assembly manual. 

 

App Tutorial and Safety Video

I wanted to create a tutorial on how the app works because the learning curve needed to be very quick, I also wanted to present the safety rules of the SmartKart. After mocking up a few tutorial screens, I realized an animation would be the best way to convey the information. A video also would guarantee that the user had to see the safety rules and not just “swipe by.” I created the storyboard and all the design assets and worked with an animator to put the video together. 


Results

Arrow SmartKart started shipping units in December 2016. You can visit Actev Motors to learn more about the product.

 Reviews from Amazon.com customers about the App:

“The GEO fence and speed control on the app is great to bring stop the driver. My little girl shouts at me when I turn the speed down and wants it max speed all the time.”

“The app is really useful for limiting max speed and driving area - especially when the neighbor kids try it out. One minor gripe is that my home wi-fi sometimes takes precedence over the kart wifi and I have to reconnect. I understand Actev is working on that.

“Well built and very easy to control speed via the app.”


Team

UX Designer and Project Manager:  Courtney Beyer

Graphic Designer: Natasha Clawson

Video Animation: Daniel Everist

Android Engineer: Boris Kotak 

iOS Engineer: Clement Lee