Daily UI Design #23: Onboarding

After about a year, I finally picked this 100-day challenge again. I said I would finish it, however long it will take. Here I am. View source files as well as my other work for Daily UI Design on Github.

Day 23 challenge is about onboarding. Onboarding is an initial experience after a user purchases your product. Would you guide her through a series of steps to set up? Do you want to introduce your spotlight features upfront to her? That’s what you can do during onboarding.

Final look:

Imagine: Jamie just got her poodle puppy Bella a few days ago from a breeder. She’s going to take Bella to the vet for a thorough check the very next day, and get her first batch of vaccination in a week. Bella doesn’t seem to like the new dog food she prepared. She wants to note all these down. She found the Pet Diary app from the iOS app store. She opens the app, scans through the onboarding screens, learning that this is where she can track Bella’s important matters. She decides to give it a try.


  • Am I going to do it for web or mobile?
    • Mobile, I think that’s where most interesting things happen now.
  • Design for a new app or redesign onboarding process for an existing app (like Yelp)?
    • New app, that feels more exciting.

Recently, we brought a German Shepherd puppy to our family. I used Evernote to note down daily observations. I wish there’s an easier way for me to click just a few buttons and generate such diary.

Thus, I decided to make onboarding screens for my imaginary “Pet Diary” app.

sketch 1

sketch 2

Design it!

I explored some color schemes and eventually used one of the most popular one from ColourLovers.

I picked bright colors and simple shapes, because such apps should give you a happy feeling. I made copies simple so users know what to expect. Obviously, they can get better to be more impressive.

Leave a Reply

Your email address will not be published. Required fields are marked *