North Star Business Intelligence Systems, LLC (In-App Onboarding Tutorial)

Project Overview – Providing Succinct, Approachable Onboarding to Busy Trucking Community

I created an eight screen in-app onboarding tutorial for the North Star HandsFree safety app. This technology allows drivers in the trucking industry to both receive and provide alerts for traffic/safety issues through handsfree cloud-based technology. When my client contacted me, the app had already been designed, however he asked that I design the onboarding screens to compliment the already established system. 

Timeline

This project was completed in 9 hours over a three week span from start to finish. This included two client phone meetings, a shared Figma file for review and notes and a email communications/sharing of documents.

Team

I collaborated with the founder/developer of North Star Business Intelligence Systems and his business consultants throughout this design process. In this project I filled the role of UI Designer and UX Consultant

Broad Scope and Initial Sketches

The primary considerations for this project were that it be streamlined, easy to follow, animated and concise. Sketches were developed based client’s verbalized vision and shared copy ideas.

Color

While the app’s main screen is a deep yellow (F7C139) with black text/image, I felt it important to lighten the tutorial in order for easier visual engagement. For that reason, I used a white background with black text. North Star Yellow was implemented as an accent in borders and images. 

Images

The original images I sketched were based on initial brainstorming. However, with design development it became clear that more simple images were important to ensure a lack of visual overwhelm. To keep with the streamline theme, I selected simple one to two color drawings to enhance the meaning on each screen. The “Mission Intro” and “Basics” screens have free form lines/arrows that direct the user’s eye to the important text. The “Getting Started” screen has a yellow truck starting its journey down the road.

The “Responding To An Alert” Screen shows the user how to respond when North Star sends an alert with a fade in of “Hey North Star” and then “Roger That” after the initial “Hey North Star” fades out. This feature was completed with three screens fading through on a delay **Show multiple screens)

The “Sending an Alert” screen shows the user how to send an alert by cycling through multiple “key phrases”. This was completed by designing a separate component and using the prototype “on delay” animation for each option. 

The tutorial ends with a focus on the importance of user feedback and support and how to find support if needed. Within this space, my client is working to establish brand loyalty and positive user engagement. He is hoping to ensure this by gamifying the use of giving/receiving alerts, so we have focused on this information immediately after the initial instructions to keep user engagement through to the final screen.