ylliX - Online Advertising Network
FlipaClip optimizes for large screens and sees a 54% increase in tablet users

FlipaClip optimizes for large screens and sees a 54% increase in tablet users



Posted by Miguel Montemayor – Developer Relations Engineer

FlipaClip is an app for creating dynamic and engaging 2D animations. Its powerful toolkit allows animators of all levels to bring their ideas to life, and its developers are always searching for new ways to help its users create anything they can imagine.

Increasing tablet support was pivotal in improving FlipaClip users’ creativity, giving them more space and new methods of animating the stories they want to tell. Now, users on these devices can more naturally bring their visions to life thanks to Android’s intuitive features, like stylus compatibility and unique large screen menu interfaces.

Large screens are a natural canvas for animation

FlipaClip initially launched as a phone app, but as tablets became more mainstream, the team knew it needed to adapt its app to take full advantage of larger screens because they are more natural animating platforms. After updating the app, tablet users quickly became a core revenue-generating audience for FlipaClip, representing more than 40% of the app’s total revenue.

“We knew we needed to prioritize the large screen experience,” said Tim Meson, the lead software engineer and co-founder of FlipaClip. “We believe the tablet experience is the ideal way to use FlipaClip because it gives users more space and precision to create.”

The FlipaClip team received numerous user requests to optimize styluses on tablets, like pressure sensitivity and tilt for styluses and new brush types. So it gave their users exactly what they wanted. Not only did they implement stylus support, but they also redesigned the large screen drawing area, allowing for more customization with moveable tool menus and the ability to hide extra tools.

Now, unique menu interfaces and stylus support provide a more immersive and powerful creative experience for FlipaClip’s large screen users. By implementing many of the features its users requested and optimizing existing workspaces, FlipaClip increased its US tablet users by 54% in just four months. The quality of the animations made by FlipaClip artists also visibly increased, according to the team.

We knew we needed to prioritize the large screen experience...because it gives users more space and precision to create - Tim Meson; Lead Software Engineer and Co-founder of FlipaClip

Improving large screen performance

One of the key areas the FlipaClip team focused on was achieving low-latency drawing, which is critical for a smooth and responsive experience, especially with a stylus. To help with this, the team created an entire drawing engine from the ground up using Android NDK. This engine also improved the overall app responsiveness regardless of the input method.

“Focusing on GPU optimizations helped create more responsive brushes, a greater variety of brushes, and a drawing stage better suited for tablet users with more customization and more on-screen real estate,” said Tim.

Previously, FlipClip drawings were rendered using CPU-backed surfaces, resulting in suboptimal performance, especially on lower-end devices. By utilizing the GPU for rendering and consolidating touch input with the app’s historical touch data, the FlipaClip team significantly improved responsiveness and fluidity across a range of devices.

“The improved performance enabled us to raise canvas size limits closer to 2K resolution,” said Tim. “It also resolved several reported application-not-responding errors by preventing excessive drawing attempts on the screen.”

After optimizing for large screens and reducing their crash rate across device types, FlipaClip’s user satisfaction improved, with a 15% improvement in their Play Store rating for large screen devices. The performance enhancements to the drawing engine were particularly well received among users, leading to better engagement and overall positive feedback.

Using Android Vitals, a tool in the Google Play Console for monitoring the technical quality of Android apps, was invaluable in identifying performance issues across the devices FlipaClip users were on. This helped its engineers pinpoint specific devices lacking drawing performance and provided critical data to guide their optimizations.

FlipaClip UI examples across large screen devices

Listening to user feedback

Large screen users are Android’s fastest-growing audience, reaching over 300 million users worldwide. Allowing users to enjoy their favorite apps across device types while making use of the larger screen on tablets, means a more engaging experience for users to love.

“One key takeaway for us was always to take the time to review user feedback and app stability reports,” said Tim. “From addressing user requests for additional stylus support to pinpointing specific devices to improve drawing performance, these insights have been invaluable for improving the app and addressing pain points of large screen users.”

The FlipaClip team noted that developing for Android stood out in several ways compared to other platforms. One key difference is the libraries provided by the Android team, which
are continuously updated and improved, allowing its engineers to seamlessly address and resolve any issues without requiring users to upgrade their Android OS.

“Libraries like Jetpack Compose can be updated independently of the device’s system version, which is incredibly efficient,” said Tim. “Plus, Android documentation has gotten a lot better over the years. The documentation for large screens is a great example. The instructions are more thorough, and all the code examples and codelabs make it so much easier to understand.”

FlipaClip engineers plan to continue optimizing the app’s UI for larger screens and improve its unique drawing tools. The team also wants to introduce more groundbreaking animation tools, seamless cross-device syncing, and tablet-specific gestures to improve the overall animation experience on large screen devices.

Get started

Learn how to improve your UX by optimizing for large screens.



Source link

Leave a Reply

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