Gmarket is one of South Korea's leading online shopping platforms. In 2019, the brand underwent a vibrant rebranding, embracing a brighter and more dynamic image. After over 20 years of being a beloved platform, Gmarket aimed to become even more approachable to its customers. The rebranding emphasized the concepts of dots, lines, and connections, which were seamlessly integrated into the platform's motion design. Gmarket's designers have skillfully utilized these animations, focusing not just on feedback interactions but also on enhancing the shopping and reward experience. Given the nature of e-commerce, particular attention was paid to animations that account for longer wait times, ensuring an engaging experience throughout. The introduction of the endearing character, Smiley, has also brought a smile to many customers' faces.

Let us take you through the journey of Gmarket’s Lottie story and explore how we used lively Lottie animations to deliver a delightful shopping experience to our customers.

Why we adopted Lottie

Before integrating Lottie, Gmarket's designers had to put significant effort into creating motion guides for movement speed and timing, often relying on formats like SVG, CSS animations, or GIFs. However, these methods had limitations, such as implementation challenges and large file sizes, which made it difficult to express the desired motions effectively.

When we first encountered the Lottie library in 2017, we knew it would be a game-changer. We began with internal interaction studies involving both designers and developers, conducting small tests before fully integrating Lottie into our development environment. After ensuring stability, we actively started incorporating Lottie animations into our projects.

This internal study led us to our first Lottie animation project, which applied to the service for the first time with the Auction Family Month logo play. Lottie's lightweight and flexible file format allowed us to smoothly implement animations across various devices, creating an environment where we could offer a more enjoyable and immersive shopping experience.

Re-establishing brand identity with new Lottie assets

In 2021, Gmarket underwent a major design overhaul. This redesign included a cohesive motion design strategy that aligned with the newly defined graphic assets. The brand identity was centered around the core value of "Connection," expressed through dots, lines, and surfaces to symbolize concepts like "Center," "Forward," and "Variety." These elements were also integrated into the motion design assets we created.

We believed the main role of motion design is to help customers understand information quickly when text and images alone aren't enough. But we wanted to take it a step further by adding a touch of humor, helping us connect more closely with our customers. Whether it's making long wait times more bearable or using facial expressions to convey apologies when error occurs, we wanted to create a delightful experience at all flow points.

From the search bar that appears when you open the app to the blank pages with no information and the screens you see while waiting for order/payment, we aimed to deliver a consistent and visually engaging experience with Lottie animations.

Making promotions come to life with Lottie animations

When you think of South Korea's biggest shopping events, what comes to mind? That's right—Big Smile Day! May and November are the busiest months for Gmarket's designers. The combination of Gmarket’s adorable character, Smiley, and the branding that fills the screen with vibrant purple theme is now strongly associated with Big Smile Day in customers' minds.

But did you know that Smiley, the star of Big Smile Day, was originally created for a different service? Smiley began as part of the Smile Stamp service, a membership program for cash rewards. We didn’t just modify the existing smile symbol; we transformed it into a 2D character with various expressions and actions, making it even more lovable and approachable.

Lottie played a key role here as well. Thanks to its lightweight format, we were able to incorporate rich behavioral motions for Smiley without burdening the service, leading to increased member revisit rates and loyalty.

As Gmarket prepared for Big Smile Day, Smiley evolved from a 2D character to a 3D one. Given the ambitious nature of this project, motion was critical. However, we hit a roadblock early on—Lottie, which is optimized for vector animations, couldn’t render 3D images as we intended. So, had to get creative our animation. We separated each part of Smiley—eyes, nose, mouth, arms, legs—into individual components and animated them independently. This approach allowed us to minimize file size while still delivering lively Lottie animations.

E-commerce: Subtle animations, Significant impact

In online shopping platforms, animations play a crucial role in enhancing user experience and reinforcing brand identity. Technologies like Lottie empower designers to create high-quality animations with ease. For instance, small animations like confetti falling when adding an item to the cart or completing a purchase can convey positive emotions and strengthen customer loyalty.

We are grateful for the continuous advancements in LottieFiles, which help us deliver a fun and engaging shopping journey. Stay tuned as Gmarket continues to challenge itself, using animation to communicate naturally and becoming an even friendlier and more convenient service!