When people talk about onboarding, they usually assume it’s about new users who have never used the app before. But another lesser-known incarnation of onboarding is designing an experience that simplifies the learning curve when a user interacts with a feature for the first time. In the digital product world, onboarding never ends since companies constantly iterate and introduce new features.
At Strava my team was challenged with a pretty unique case: an onboarding flow for Strava Subscription. If you are not familiar with the service, Strava uses a freemium model, which offers a fully functioning app for free, with an optional upgrade to a subscription-only premium version. How can we make our athletes more excited when they upgrade? How can we create a great first impression and introduce them to all the cool features that they have access to?
Building the story
First we leveraged data to underline the most used Strava Subscription features, such as Leaderboard, Fitness, and Relative Effort. After that we created a story around those popular features: a story about “you” and how joining a paid Strava Subscription is going to improve your life. Any athlete’s journey on Strava starts with an activity. Once an athlete posts it, they can talk about it, add pictures, and most importantly both be motivated by community uploads and motivate others. However, getting the right amount of training and number of activities per week is essential to training efficiently. Being smart and consistent about what you are doing will slowly compound your gains and improve your fitness.
Creating the experience
Making it short with just four simple screens was one of our main goals. To keep our athletes’ attention and guide their focus in the world of informational overload, we decided to create an animated experience.
My first choice of animation software was Principle. The learning curve is super short, and I was already familiar with it from using it for screen transitions and states. However, because of the limited animation options and lack of a way to provide any specs to engineers, I quickly realized that we needed to find something else.
Open communication with engineers was another key piece of the puzzle to success in this project. None of us had used this framework before, but the excitement over the project moved us forward. It took a few weeks for engineers to learn more about the Lottie framework, its limitations, and its benefits. And on my end, the animation ended up being much more work and more time consuming than I had anticipated.
Lottie was developed by Airbnb and is an iOS, Android, and React Native library that renders After Effects animations in real time. To export animations into a JSON file that contains the code necessary for Lottie to render animations, there is an open source extension called BodyMovin.
All my illustrations were created in Sketch, and I was lucky to find an After Effects plugin that imports Sketch files into After Effects. Whoever created this one saved a lot of lives and hours! 🙏🏻
Learning more about UI animations and practicing this new, very time-consuming skill had been on my list for a long time. I even completed an animation bootcamp about a year ago, which was great, but I had thought at the time that it wouldn’t be very applicable to UI animations. I was so wrong!
From learning about possibilities with Principle to developing my After Effects skills until I was comfortable making a short animation, and to learning the unwieldy process of exporting Sketch files to After Effects to BodyMovin to Lottie Preview, here are some other important takeaways from my experience:
- Don’t underestimate how much time animations will take, especially if you don’t have a lot of experience. Lottie is a great tool, and it provides designers with complete control, meaning no surprises during the implementation stage. However, it also means that you are responsible for all the small changes and adjustments required.
- Account for unexpected outcome and include extra time in your project. Lottie is still very new, and exporting files from AE to JSON can bring a lot of surprises. One example we encountered was having a white background in the AE file exported as weird, stretched black lines at the bottom and top of each animation. 🤷
- Duration and speed are the bread and butter of animation. Even a few milliseconds can make a huge difference.
- Merged shapes are not supported in iOS.
- Code customization is very limited.
- Preview your JSON files without distracting your engineers using Lottie Files Preview. I wish I learned about this earlier in the process. I am super grateful for my team patience!
- Design is never done! As our next step, we are planning to introduce coach marks or tutorial shown on the first launch to give users a nudge in the right direction.
- Use Lottie to spice up small interactions. Lottie is really great at simple animations, while the power of micro-interactions is huge.
- Team share-out. We are planning to share our learnings with all the product teams in the company and encourage others to use Lottie for animations as well.
Thanks for reading!