Designing an onboarding flow with UI Motion
How we used motion design to inform and delight users
We, at Cuddle, recently implemented a new feature — Nudges. Nudges are notifications on personalized insights about the business.
To start receiving Nudges, the user has to “Follow” various business areas that are relevant to them. The app analyzes the data periodically for anomalies, trends, and patterns in those business areas, and sends you Nudges when it is discovered.
As part of the initial onboarding process, we wanted to show users how they can receive informative alerts, or notifications, on the app. We used motion design and simple copy to create a clear and engaging onboarding experience for our users.
In addition to informing users about what Nudges were, the purpose of this onboarding was also to guide them to take action by “Following” specific business areas. Users can follow business areas by asking questions about their business on the app. Therefore, it was necessary to include a call to action to ask questions and follow business areas on the onboarding screens and the empty states.
Here is how motion design was used to assist in onboarding users to Nudges in the mobile app. Three cases have been addressed — Initial onboarding of Nudges, Managing Nudges section, and Nudges empty state.
Nudges Onboarding
This initial screen was to introduce Nudges to the users when they navigate to the Nudges tab. Below is one of the first few iterations of the Nudges onboarding screen.
Concept
When there’s a discrepancy in the data that you are following, the app detects it and notifies the user about it. The bar in the information card morphs to make space for a new item that is now a part of the information card. This denotes a change in pre-existing data. The highlight immediately after that denotes the app is recognizing anomalies. The subsequent notification badge depicts the user receiving Nudges about it.
Why it didn’t work
- It is not very clear that a user would have to Follow business areas in order to receive Nudges for the same.
- There is also no direct context about what the icon on the right stands for.
- Many things are happening simultaneously.
- The design feels visually unbalanced.
Improvements
Taking all the above points into consideration, the animation was improved to explicitly show that a user has to follow a business area. Only after that is done, they’ll receive Nudges based on that.
In the final onboarding animation, the information card is updated with a Follow button to denote users have to Follow a business area first to be able to receive Nudges. The data block animation represents that the app is continuously conducting various analyses of it and when there is any irregularity in the data that is relevant, it sends Nudges to the user. Out of all the versions, this is the one that resonated with our users on testing. We use a low-fidelity UI of the bottom navigation bar to give the user some context about where these Nudges are accessible.
Manage Nudges Onboarding
The Manage section of Nudges is a way for the users to edit the business areas they follow to receive Nudges. They can organize their list of followed business areas, and remove a business area by unfollowing them. The first time the user opens the manage section, the user has no business areas that they follow. This section is an empty state that we used to inform them about what the MAnage section is for, with a call to action on following a business area.
Concept:
For this use case, a simple animation of a list of items denoting followed business areas was used, with a supporting copy to indicate what content the user can expect.
Nudges Empty State
In this situation, the user has already Followed business areas but there are no Nudges for the same.
Concept:
A simple animation of notification cards to denote incoming Nudges was used, supported by an appropriate copy to indicate what the user can expect on this screen.
Thinking about interfaces with respect to time is indispensable when it comes to designing apps as our UI designs may be static but our experiences with them are always temporal.
Onboarding screens and Empty states can provide a brilliant opportunity to utilize visual and motion design to break the monotony within apps, and also establish consistency and brand value. By focusing on creating clear and engaging experiences using motion design, we can enhance user understanding and engagement, contributing to a more seamless and enjoyable user experience.
Follow Cuddle.ai blog to learn more about our product and how we work!
I’ll see you at the next blog post!
Until then, here’s a bonus animation from us at Cuddle ✨
