Cart 0
 

Onboarding UX Mockup

We’ve incorporated the typography and finalized the design elements of the UI for each screen. Included is an example mockup of some of the micro-interactions applied as each scene is swiped. Below are effects we’ve come up with as ideas for possible interactions on each screen that are not displayed in this iteration.

Screens 2-5: The Simplish icon orb above the illustrations pulsating on each screen to direct the eye to the change in mood throughout the scenes.

Screen 3: Scale pulsing effect on small colored orbs surrounding the icons.

Screens 1 and 6: Scrolling background waterfall of icons to show the overflowing tasks.

 
 
 

 Simplish: Concept 1 Variations

team-features-illustration.png

 

 

 Simplish: Onboarding Concepts

As we approach these illustrations, we wanted to come up with a concept that would be simple enough to resonate with your audience and establish a quick connection. All the concepts below will utilize what we’ll call The Mood Ring. This concept gives us a chance to illustrate what we want the users to feel utilizing the gradients we created in your branding design. It’s a secondary affect to easily grasp attention as users notice a change in mood through each screen, not just by text but with color as well.

General notes To Keep In Mind:

1) It’s important to know that these are just initial concepts and ideas for potential illustrations. We are not married to a specific style yet until we dive further into the illustrations. 2) All the graphics, icons, and designs are intended to be rough designs to show you our ideas and direction. 3) Once we settle on a direction to proceed with, we will fine tune not just the storyboard and narrative, but the design elements as well.

 

 Concept 1: New Hair Colors

For this version of the on-boarding screen, we use negative space to give a figure to our character. This is a minimal style using white space and black to show contrast.

The screens are intended to be viewed left to right and the idea is that by the time you get to the 6th screen, we will have conveyed the emotional transition of the subject after using Simplish as well as being able to get a big picture idea of a few of the core things they can do within the app.

 

*Example of changing icon as screen changes.

 
 
 

Concept 2: Stress Relief

This version falls under the same concept with a “sketched” illustration style to the character. It’s the same storyline as the first concept but with a different personality and vibe to the character being drawn.

The color of her face is actually represented by The Mood Ring gradient where it starts off with her face more blue and as each screen progresses, her face color will transition to a warmer tone to represent her happy mood as a result of using Simplish.

 
 
 

Concept 3: Rosy Cheeks

This iteration contains more white space with a “line-style” to the character and thoughts. It’s the same storyline and concept as above, but with an alternative character sketch.

 
 
 

 Concept 4: Conveyer Belt

Our 4th concept consists of elements from the first 3 concepts as well as some new elements. We start the screen with boxes that are representative of the work overload that overwhelms us. As the screens change we see a change of the boxes as they are labeled by passing through the machine (representative of “The Workspace”).

Along with a change in scene there is the “mood ring” effect with the gradients so that our problems are resolved by the end and the character in the sketch is happy.