Onboarding sketches and Visual Design
I joined Flare’s small and scrappy team 2 months out from launch. I built out Flare's visual design system, brand illustration, and redesigned the app's onboarding. 

 

Adapting GoDaddy's illustration style to Flare
As a GoDaddy product, the branding and illustration had to resemble our parent company. I started illustrating with in the same colors and stroke width and gradually created and added Flare's style.

 

Onboarding Interactions
After a few iterations, onboarding became 3 exercises that users had to complete before jumping in to the app.

The first exercise is skipping the idea - "Socks for Dogs." To add a fun detail we changed the happy dog to a sad one on hold/press and left swiping.

The second exercise is snoozing the idea - "Babysitter at Gym." Here we had the baby celebrate upon hold/press and right swiping.

Onboarding screens in their entirety

 
flare-lightbulb-sketches
flare-lightbulb-climber-sketch

Flare app Illustrations
Apple's App Review team told us Flare needed more personality and floated out the idea of a
mascot. Naturally, we gravitated towards lightbulbs collaborating, testing ideas out, and bringing ideas to fruition. 

 

Reaction and Movement
I created a vector file with bulbs that the team could use in a variety of situations

 

Light bulbs interacting
More complex illustrations featured on flare.godaddy.com or in the app

 

Delight Moments
Flare’s idea feed has a unique paradigm where users may either skip, snooze, or love an idea. Three ideas are presented at a time. Without explicitly stating this pattern, we teach them how it works with illustrations and guidance.

Left: Shown when a user pulls the screen up for more ideas

Center: Shown when users exhaust the idea queue

Right: Loading animation of bulb walking

 

Loading Screens
When users create and submit content, they may get hung up with long load times due to an unstable internet connection or problems with our servers. As a team we wanted potential pain/dropoff points to become opportunities to encourage and delight our users.

Left: Shown when user asks the Flare community a question about their idea

Center: Shown when user submits an idea to the feed

Right: Default 404 screen

 

Flare's webpage
Working with the team's current landing page layout, I replaced mobile screen graphics, added fun illustrations to accompany the page's copy, and worked with Connor to create an engaging hero section which animates when users mouse around the width of the page 

flare.godaddy.com