Designing our on-boarding screens
Our UI designer, Merve Guneyhan has been working on our on-boarding screens, and here are her insights.
As product designers, the most exciting part of downloading an app can often be its on-boarding screens — the slide-like screens that walk you through the app’s main functionalities before you use it for the first time.
This on-boarding is very important to set the landscape and provide context for the user’s journey as they are welcomed into the app’s ecosystem.
For a market-first app, our on-boarding is critical to ease the user into our experience. We knew that we wanted to highlight the main features and give users a quick guide to explain how they can upgrade, whilst knowing that too much information presented at once can be overwhelming. Information overload will typically blind users to what they are reading, so we decided that we needed to keep the content simple, clear and as short as possible.
After discussion amongst the product team, we landed on a series of 4 different on-boarding designs. Our design team presented a few different variations before landing on a final decision, and from a content perspective, we worked through a few different iterations to make it fit just right within the designs.
The design options
As you see, we have a main structure for all: a ‘sticky’ Register call to action button and an inline Login link. The 4 on-boarding screens are indicated with pagination dots — letting the user know that it’s not an infinite journey!
On the first three options, we have a series of lifestyle photos as we wanted to make users feel our vision and the lifestyle we enable with our app, but on the 4th version, we used product shots to give users an idea about the overall experience they should anticipate after registration.
After we’ve shipped the MVP version of our idea, we plan to layer on some micro animations to enhance the experience.
Our favourite version? The 1st — the most colourful and fun one! We preferred the lifestyle photo approach over product shots, so the on-boarding screens are expressing mre of our brand – not just the fact that we’re an app. Additionally, when we thought about the full user flow to this point, they would have already seen our app screens a number of times through marketing collateral and the app store before they downloaded the app. This allowed us to take a different approach.
Stay tuned for more mini case studies of our feature development going forward, and let us know what you think.
