The story of LottieFiles in LongBlack, a Korean subscription service that offers daily insights
Building a habit of reading and making it more enjoyable with motion
Big actions and flashy motions are not the only way to create cool or effective experiences. By adding small movements to things that are stationary, we can create a positive effect where customers can empathize with the message and find meaning from the motion.
LongBlack is a new knowledge content subscription service concept that provides readers with in-depth content about insightful cases in the business world to form a reading habit. Subscribers get one article every day in their inbox.
These articles, which disappear after 24 hours, encourage readers' anticipation and exploration towards a journey of growth. With its focus on profiling unique business leaders, LongBlack has proven its charm by captivating the Korean audience within a year.
LongBlack has been aware of the power of branding and design identity since the beginning. To say “I read LongBlack” has become synonymous with reflecting an identity of discipline and cultural awareness. Its focus on highly curated content and distinct design fit resulted in today’s elegant and sophisticated brand image for a product that everyone can connect with easily.
We noticed the use of motion, in LongBlack’s platform, and when we found out these were Lotties, we reached out to their design team to learn more. Here is a story of motion, built with Lottie, at an uprising media startup.
LongBlack’s design identity: modern and sophisticated
What design concept or brand image do you strive to showcase to your users?
Kim Ri Yeon, Lead Designer: Many of our LongBlack homepage visitors have remarked that they feel as though they’re looking at a magazine page.
I think it's because of the bold colors and layouts that differentiate it from other websites.
In fact, unlike other media outlets, LongBlack paid attention to its design from the beginning.
“How to digitize content that you’d find in books” was the main driver for our design. We looked into two things:
First, readability.
We placed a lot of focus on ensuring the readability of the content when formatting the layout. This was to ensure the concise delivery of both the text and visual elements.
Second, Learning Mate.
We wanted to create a buddy-like service that encourages you to study and grow together. Making dense content more enjoyable to read.
Introducing Motion. Why Lottie?
LongBlack's Daily Notes are longer and denser compared to articles from other media. What was the reason behind incorporating animation into your in-depth profile pieces?
Kim Ri Yeon, Lead Designer: Each Daily Note we put out every day is around 9,000 (Hangul) characters long. We developed a stamp animation as a fun reward for our users who maintain their daily reading streak.
We recreated a real-life stamp, and we designed the animation so that when you click on the stamp on the screen, a LongBlack sticker would appear. Every day, around 5000 stamps are stamped by those who finish their Daily Notes.
Big actions and flashy motions are not the only way to create cool or effective experiences. By adding small movements to things that are stationary, we can create a positive effect where customers can empathize with the message and find meaning from the motion.
We aim to create a more interactive experience, without interfering with the content itself.
What is the role of motion in LongBlack's content? Is there a set of criteria that you consider when adding animations?
Kim Ri Yeon, Lead Designer: LongBlack gives a big mission to its users: “Don’t miss out on reading the daily content.” But it’s not that easy to study something so persistently. It's also quite easy to get tired of seeing the same format repeatedly. So, we’ve categorized what we believe to be the roles of motion into four parts.
First, to break the monotony of repetitive sections.
Second, to deliver the message of how to use the service in a concise way.
Third, to emphasize important parts of the website.
Lastly, to convey positive emotions to the reader.
Lee Yoon Hee, Designer: I try to put a lot of thought into not only each asset, but also the motion itself to retain its modern feel. Some form of exaggeration is usually added to an animation. This helps catch the user’s attention and places emphasis on certain content. However, if this motion comes to the point of affecting the overall vibe of the website, I believe that instead of serving its purpose of aiding the delivery of the message, it becomes an eyesore. We are trying to create motion that reflects the LongBlack brand image, while prioritizing a clear messaging to make both a restrained and sophisticated motion.
Especially since we use modern 2D vector graphics as our design elements, Lottie seemed to be the most practical option. Thanks to the easy-to-ship file format, we have been sending our LottieFiles to our front-end developer. We have now been actively using it for the rest of the motion elements on our website too.
Out of all the animation file formats, I’d like to know why you chose to use Lottie.
Lee Yoon Hee, Designer: Before using Lottie, we used SVG animation elements on our website. However, since we mainly used the After Effects software, we tried to search for alternatives that offered more compatibility than file formats like SVG. This was Lottie, a JSON-based animation file format.
Especially since we use modern 2D vector graphics as our design elements, Lottie seemed to be the most practical option.
Thanks to the easy-to-ship file format, we have been sending our LottieFiles to our front-end developer. We have now been actively using it for the rest of the motion elements on our website too.
What is a memorable Lottie that you published on LongBlack?
At the end of each Daily Note is a section where users can leave their rating. Usually, it’s designed with static graphics of coffee cups, steam, and coffee beans. But during special occasions like Christmas and Greenery Week, we use seasonal Lottie animations to delight our users.
LongBlack at its core is about studying, which is often thought to be “boring” and “difficult.” So, we wanted to showcase our mission and make studying easier and more fun through our animations.
In fact, seeing our customers post videos of seasonal Lottie animations on their Instagram stories, made us glad that we can give them small, but unique experiences.
Moving forward, we would like to continue introducing various Lottie animations in the rating section, so that it can become something that people look forward to every season.
Kim Ri Yeon, Lead Designer: Our rating banner at the end of each Daily Note uses Lottie to add a touch of “finishability” with delight.
We put on a little spectacle during special weeks in a month, as well as other holidays like Halloween and Christmas to gift our users a new experience.
Getting reviewed is honestly pretty scary and nerve-wracking.
However, I think that presenting the rating section in a bright and pleasant manner leaves a nice impression on the user, which seems like it has a positive effect on ratings. (Laughs)
As a person living in an age of information overload, I think that it’s a blessing that a media outlet like LongBlack exists. Aside from just the design, I truly think the values and stories that LongBlack shares serve as intellectual nourishment for modern people. In this sense, I'm curious about LongBlack’s future goals. I'm sure you’ll continue to use motion graphics, right? ;)
Kim Ri Yeon, Lead Designer; Lee Yoon Hee, Designer: By producing quality content and helping others develop good reading habits, we want to change the culture surrounding reading.
For this to happen, we believe that good design and usability are essential.
We’re also preparing to launch the app version of LongBlack soon. In the future, we’re also thinking of carrying a more diverse set of categories.
We hope to see LottieFiles and LongBlack grow alongside each other.
At the end of the year, a feature to send a LongBlack Pass gift is planned to be added. While proposing to present insightful content that you want to remember for a long time. After paying for the Pass, the motion of wrapping the box is shown for the users to feel as if they are giving a gift themselves. And inside the box is a graphic that symbolizes LongBlack’s service. To celebrate the end and beginning of a year, we wish you could give your close acquaintances a special gift that can help them gain insight and perspective, rather than ordinary items.
When people talk about motion, they often refer to it as a device that draws users’ attention. However, as was shown in the case of LongBlack today, the ways to use motion are endless. The pleasure and interactivity delivered by motion can make users feel accomplished, which leads to the formation of habits.
LongBlack’s story shows us that it’s not about using motion everywhere. It’s about using the right amount of motion, in the right places.
As much as the role of various motions in the content platform, we look forward to the versatile plans that LongBlack will take on in the future.
Visit the LongBlack website to find out more about their journey. The site offers you a chance to experience growth with daily content while enjoying the Lottie motions to make your reading even more exciting.
See LongBlack Note → Read notes that have been highly rated by many subscribers. These notes are available free of charge until December 2022
