In August 2020, Instagram launched a set of dynamic and fun text styles followed by animations to give people more choices to express themselves on Stories and Reels. This was the first major updat…
Overview
The article discusses the development of dynamic text animations for Instagram Stories, detailing the challenges faced and solutions implemented during the project. It highlights the importance of collaboration between engineering and design teams, as well as the technical strategies employed to enhance user experience across platforms.
What You'll Learn
1
How to implement dynamic text animations for mobile applications
2
Why collaboration between engineering and design is crucial in software development
3
How to manage font resources efficiently in Android applications
Prerequisites & Requirements
- Understanding of text rendering and animations in mobile applications
- Familiarity with Android development tools and frameworks(optional)
Key Questions Answered
What challenges did the Instagram team face while implementing text animations?
The Instagram team faced challenges such as font availability on Android, managing app size to avoid impacting install rates, and ensuring compatibility with various text features like ligatures and emojis. They had to develop a custom solution for font management and address technical limitations during animation implementation.
How did the team ensure consistency across different text styles?
The team established a core principle of consistency by ensuring that all text styles, including new ones, had both decorated and non-decorated versions. This approach aimed to provide users with a uniform experience across different text styles in Instagram Stories.
What was the solution for font management on Android?
The team initially considered using Google’s Downloadable Fonts framework but found it lacking. They ultimately created a custom solution using Everstore, an internal BLOB storage system, which allowed for efficient font management and caching without relying on third-party solutions.
What was a significant takeaway from the project?
A significant takeaway was the value of continuous regression testing due to the complexity of text handling, including emojis and RTL languages. The team learned that quality testing needed to be ongoing to catch new issues that arose after fixing existing bugs.
Key Statistics & Figures
Impact of APK size on install conversion rate
1% decrease for every 6 MB increase
This statistic highlights the importance of managing app size to maintain user installs, particularly for lower-end devices.
Potential loss of installs due to font file size
700K fewer installs per month
The team discovered that adding 4.5 MB of font files could significantly impact the number of installs for the Instagram app.
Technologies & Tools
Backend
Everstore
Used for custom font management and caching in the Instagram app.
API
Nslinguistictagger
Utilized for breaking up strings into linguistic tokens for word-by-word animations.
API
Google’s Downloadable Fonts
Initially considered for font management on Android before developing a custom solution.
Key Actionable Insights
1Fostering a collaborative environment between engineering and design teams can significantly enhance the development process.By maintaining open communication and feedback loops, teams can quickly iterate on designs and address technical challenges more effectively.
2Implementing continuous regression testing is crucial for projects involving complex text features.Given the variety of edge cases with text rendering, ongoing testing helps identify new issues that may arise after changes are made, ensuring a smoother user experience.
3Utilizing internal storage solutions like Everstore can provide better control over asset management in mobile applications.This approach reduces dependency on third-party services, allowing for more tailored solutions that fit specific application needs.
Common Pitfalls
1
Assuming that all characters in a string are single characters can lead to rendering issues.
This mistake can cause problems with ligatures and emojis, as they may consist of multiple characters. Developers should account for these complexities when implementing text animations.
2
Neglecting the need for continuous testing can result in undetected bugs.
In projects with complex text handling, like those involving multiple languages and text features, it's essential to perform ongoing regression testing to catch new issues that arise after fixes.