Toss - How to make finance a fun and easy experience
By Hyun Seon Ko, Toss Graphic Designer
1. Explaining concepts with motion
As a mobile app, Toss has to convey a lot of information through a small screen. Our graphic designers need to summarize key points in this space available to them. This is where animation comes into play. With moving images, users can intuitively understand the content, even without reading the text. This allows for faster and more effective communication. For example, the animations below depict “account lock”, “anti-scam tips” and “delivery”. Even if you can’t read Korean, you’ll understand what these animations represent.
Animations are also effective for showing loading and completion states. In Toss, there are situations in which users inevitably have to wait, such as when processing a remittance or payment, or when submitting an inquiry. We display loading states by showing faces of people rotating in a circle. When the loading completes, a ‘check’ animation appears. This helps to make the waiting process more enjoyable.
Here’s another example. The animations below were used to introduce Toss’ emoji font set, Tossface, which featured certain animals. Although real animals have various sizes, these representations are the same size because they are fonts. I depicted this in an animation where different animals are scaled into a single size. In addition, I used animation to show how to design an emoji with basic shapes, as well as how to match the perspective of different emojis.
2. Setting a lighter mood
Animation is highly informative, but it’s also great at conveying emotion. During cheerful occasions – such as paydays, birthdays or when your credit score goes up – Toss celebrates users through an animated explosion of confetti. This animation is one of the most effective devices to create moments of delight.
Fun is multiplied when shared. Toss has a chat area where you can send cute animated emojis to friends. You can express feelings of happiness or sadness, or even show off your latest purchases with a flying stack of cash. Animated emojis like these add a dash of emotion, making conversations more vibrant.
On the other hand, there are times when we would need to depict less-than-exciting events. Perhaps you’ve lost your network connection, or you have to read through a long list of terms and conditions. In these cases, cheerful animations are useful for setting a lighter mood.
3. Delivering rich 3D animations
Toss also frequently uses 3D animations. We make these animations using 3D images and the Lottie file format. For example, when a user receives interest, the animation below is played. This Lottie animation uses a sequence of PNG images of the coin at different rotations. It’s more lightweight than a full 3D animation, and there are no visual compromises that can be picked up by the naked eye.
Similarly, multiple 3D images can be superimposed to create motion. In the case of the animated stack of money below, I created the effect of flapping wings by overlapping two images: one image with wings spread out and one image with folded wings. This allows us to create rich 3D animations, while retaining the advantages of Lottie's light footprint and transparent background.
When financial services meet Lottie
Toss has grown exponentially through animation. Animation has also helped to position Toss as not only a financial platform, but also a company that produces great design. Lottie has been a huge help in this remarkable development. I've been working with tons of motion tools and formats over the years, but none have been more optimized for mobile app graphics than Lottie. Thank you for joining us on this journey of unleashing boundless creativity.
“I've been working with tons of motion tools and formats over the years, but none have been more optimized for mobile app graphics than Lottie.”
– Hyun Seon Ko, Toss Graphic Designer
