Onboarding and Empty Data Illustrations

Many requests for Design typically focus on designing screens that contain large amounts of data, pages and elements that users use most. However, empty data states and onboarding screens are often overlooked aspects of UX.

“You may not have a second chance to make an excellent first impression!”

Design Goals

• Communicate proper feedback and visuals for new users and those who just installed the app for the first time.
• Create a moment of charm with relevant illustrations and a great first impression that lasts.
• Working across different channels in the company, both for web and mobile. In this project I had the opportunity to solve a design challenge for proper feedback and visuals to communicate for new users when no data appear and users land inside of an empty state with zero data. Considering the different elements, best features and essential factors to include in the onboarding process. Design illustrations that creates “moments of charm” for great first impression and introduction.

Sketches

Exploration

Chosen Style

Empty Data Illustrations for BlackBerry Hub+ Services Availble on Google Play

BlackBerry Hub+ Apps

BlackBerry Hub+ Apps

Light and Dark theme visuals

Empty Data Illustrations for Dark Theme

Empty Data Illustration for Light Theme

Empty Data Illustrations for Dark Theme

Empty Data Illustrations for Dark Theme

Empty Data Illustrations for Dark Theme

Onboarding Screens Layout

I was creating designs and illustrations for Intro, Onboarding screens and Empty state data for new users. Designing screen layout, sizing guidelines for development and design. Considering, both Dark and Light modes, preparing templates and files that can be used across the team for layout consistency.

Before

Consistentcy Recommendations

BlackBerry® Productivity Tab

BlackBerry Productivity Tab screen mocks. BlackBerry HUB+ Products Suite

Onboarding Screens, designed for BlackBerry Productivity Tab .Availble on Google Play

The BlackBerry Productivity Tab availble on BlackBerry devices and provides quick access to Inbox, Calendar, Tasks and Contacts. The way it works, users can side swipe from any screen in any app to quickly view latest messages, reach out to favourite contacts, look over daily schedule or view personal widgets. It allows to access quickly by swiping sideways from anywhere on the device and tapping any of the icons within the tab to glance at the most important info for Hub, Calendar, Tasks and Contacts. In this widget I was involved Designing the difrernt elements and layout based on the design created within the team. Creating a series of onboarding screens which direct users through the widget interface. To educate new users about the functions and feautres of the app, showing easy guide through.

BlackBerry® Keyboard

Onboarding Screens, designed for BlackBerry Keyboard - Availble on Google Play

The BlackBerry® Keyboard was available long ago before Android and IOS existed. The screen version of BlackBerry Keyboard includes several components like predictions and suggestions that can autocorrect typos, multi-language and customizable quick phrases. I was involved in designing content for the BlackBerry HUB+ UX refresh and other products for Security and Productivity sectors. The mockup shows Keyboard Intro screens for new users to help them learn about new features and quick modes that let users easily access productivity features such as voice input, emojis, fine cursor control, clipboard and settings. Type by swiping a finger from letter to letter to form words and sentences without having to remove your finger from the keyboard.

View more: