OK Cashbag - Enriching daily point life with LottieFiles
SeongEun Jung - OK Cashbag Motion designer, HeeJin Lee - OK Cashbag UX designer
The result was successful, with a 62% increase in daily visits post-revamp, thanks to the thoughtful UX design and appropriate use of animations.
OK Cashbag is South Korea's first open mileage program, offering a point service that can be earned and used at various affiliated stores in daily life. As SK Group’s integrated mileage system, OK Cashbag enjoyed widespread prominence. However, with the mileage market becoming increasingly fragmented and commerce shifting from offline to online, the need for change became evident. In response, OK Cashbag expanded its mileage services online and began evolving into an integrated rewards platform, allowing points to be earned and used in various ways. Here’s the story of OK Cashbag's Lottie animation journey, marking the beginning of this transformation.
The first step towards change: Introducing a new character
The OK Cashbag UX team developed a brand strategy aligned with the new service direction, which included character-based brand revitalization. They created a new character named “Racky" and brought it to life through animation. To enhance user interaction and immersion, precise and efficient animation was crucial.
Previously, motion work relied on GIF files, which were large in size and often resulted in image degradation. The vector-based Lottie format, with its limitless scalability, quickly emerged as a perfect alternative to GIF format. Lottie not only facilitated an easy workflow and hand-off process but also produced high-quality outputs with smaller file sizes, making it ideal for character animations and gamification.
Gamification with Lottie animations: Enriching user experience
Racky, newly brought to life through Lottie animations, became the star of OK Cashbag’s ambitious NFT project, "Road to Rich," bringing the brand closer to customers. Utilizing Lottie animations to build storylines and various motions, Racky was depicted exploring a magical forest, collecting TEMs, and acting as a travel guide, enhancing the user experience through engaging missions and rewards. The gamified world and events created with Racky offered new fun elements, increasing user participation and immersion. As a result, about 220,000 new customers issued OK Cashbag NFTs.
Satisfying collaboration with LottieFiles
To capture the summer vacation concept, Racky was animated to float naturally on water. During production, it was challenging to convey precise motion guidelines to developers, as both motion sources and CSS animations needed to be implemented simultaneously. LottieFile’s frame rate preview feature allowed for accurate motion guides to be provided to developers, resulting in satisfactory outcomes. Additionally, Lottie format’s capability to express intricate details ensured Racky’s motions flowed smoothly, enhancing the animation quality.
Conveying information concisely with Lottie animations
Animations are effective in capturing user attention within the limited space of a mobile environment. OK Cashbag revamped its main screen, restructuring navigation with a bottom tab bar. A new MY tab was created to house point information and various functions. To present this intuitively and effectively to users, icons were visualized and sequentially revealed through animations, emphasizing the service identity. The result was successful, with a 62% increase in daily visits post-revamp, thanks to the thoughtful UX design and appropriate use of Lottie animations. Lottie’s advantages, including ease of use and preference among developers, consistently produced satisfactory results.
What's to come
Ever felt that subtle thrill of accomplishment when you earn a reward? Appropriate animations, aligned with the context, enrich our service and enhance user focus and immersion. Through Lottie, OK Cashbag infused new vitality into its service and effectively communicated its brand value to customers. It is prominent that OK Cashbag will continue to create better experiences with LottieFiles as our partner.
