Interactive book — a good example of how to turn stories into (inter)actions
A web-based interactive short story as an extension of a country-wide CSR campaign.
INTRO
bTV is the first private nationwide television channel in Bulgaria. It is operated by bTV Media Group, as part of Central European Media Enterprises, and is reportedly the Bulgarian television channel with the largest viewing audience. Part of the bTV Media Group’s portfolio includes television channels, radio stations, digital platforms and a brand for movie productions distribution. A key aspect of its mission is to drive the solution of important issues, concerning the whole society, via its socially responsible initiatives and campaigns.
CONTEXT
In early 2020, the media contacted us with a request to help them bring to life a book they wanted to release as an extension of their country-wide CSR campaign — THE GOOD EXAMPLE. The book itself covered seven short stories aimed at personal responsibility and contribution to a cleaner environment, the future, and the upbringing of children. The campaign’s mascot, Zelenko Zelenkov, was the main character in each story, facing different challenges and finding eco-friendly solutions.
Their team thought of releasing the book in digital format but had some doubts about the right approach to reach the target audience and have a meaningful impact before re-launching the campaign.
SOLUTION
The first decision we had to make jumping into this project was to define how to contribute. From the very beginning, we knew that we ain’t going to create just a digital copy of the book and upload it somewhere. We aimed at designing something beyond a beautiful site that facilitates information. And so, the idea to weave interactivity into the overall user experience just felt right.
Another challenge we faced was determining the level of engagement each story needed to provide and in which direction the visual experience should take. Here, we decided to animate the illustrations and build each storyline around the quiz principle, meaning users would have multiple selection options when solving some sort of a challenge.
As a result, we found a way to make the limitation of the defined style of illustrating the main character work for us. We sought to break down the scenes into as many illustrations as we could. By doing so, we added more depth to every single experience.
PROCESS
Collaboration like no other.
We will remember this project as one of the best client-studio collaborations we had in recent years. That’s for sure. Together with brand and digital managers, we optimised the workflow, which ended up being a key element of the whole project. After we had built the story structure and agreed on the vision of what the final product would be, we held productive weekly meetings during which we discussed details about the new story to be released the following week. It was super nice to work side by side with bTV’s team on the formation of each experience because it saved us some time, and we managed to focus our effort on production, incl. defining scenes, illustration, and interaction design.
Involving visual storytellers.
Speaking of illustrations, to produce all of them, we partnered with a professional illustrator. Together with Eva Pavlova, we had to build upon the already defined stylistics of the main character, Zelenko, and again think of ways how we could enhance it. The issue with this type of flat illustration is that they are not that interesting and lack depth and expressiveness. It was tricky to make something nice out of something so static.
We decided to deprioritise the artistry of the illustration. Not because it wasn’t an important feature, it certainly was, but because of its stylistic limitations. We wanted to give Eva the latitude to experiment and create something more interesting as the story progresses.
Every week we sent out the storyline to the illustrator, based on which she’d developed a sketch-like storyboard featuring additional characters along with other key elements. Next, we talked over whether the illustrations would work with the overall storyline and animations we had planned.
Teamwork is the best work.
After deciding on the concept, i.e. building an interactive web-based book, several strategic ones followed:
- To wireframe the entire book, similar to world maps in video games;
- To integrate simple and light touch-based interactions;
- To prioritise the mobile experience.
Implementing these decisions meant we needed to integrate them throughout all stages of the production process. In other words, fix — frame — style — repeat.
— Solidifying the story structure, where each story begins with presenting the characters, continues with the challenge, and ends with the solution and key takeaways from every challenge, helped us tell each story in 7–10 screens, i.e., 7–10 interactions. Furthermore, we defined what the start and end screens would be, but we kept the freedom to experiment and build different interactions as the stories developed. In addition, we interlink all seven stories with one another.
— From here, we continued working on improving the wireframe, adding the UI elements, positioning the buttons, defining the locations of status bars, and so on.
We also determined what type of interactions would go into each event — for example, slide, swipe, tap, or hover effects.
— Next, we began thinking about what visual style would be best while at the same time focusing on the mobile interface. We crafted a sort of mini branding with main colours, colour palette, graphic elements, patterns, title arts, avatars, and more. All these elements blended nicely into the website design, from the UI and animation to promotional materials and more. And so, after nearly three months of working on the project, we launched the campaign and began revealing stories one week at a time.
Why Lottie?
Without getting into too many technical details, vector animation is a super flexible and efficient solution, first introduced by Airbnb. In essence, Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing native apps to use animations as easily as static assets.
We can say that testing out the capabilities of vector animation was super exciting for the whole team. We have used Lottie before but on a much smaller scale, such as welcome and age-gate loading screens. The novel thing here was that we experimented with the technology pushing it even further to build something from a much bigger scale, like a custom-built website for an entire book.
Frankly speaking, we were doubtful if it would work because the technology has its downsides. After all, it was developed primarily for icons and short momentary interactions. However, we decided to go for it and use it to recreate the effect of infinite ambient loops.
The main two reasons to stick to it (it’s cool, obviously) are:
- first, the resolution quality is way higher compared to video,
- second, it drastically optimises bandwidth.
In addition, the website integration made it possible to link different events with the given animation while users interacted with the site. It worked perfectly!
RESULTS
Communication-wise, the campaign was very well backed by the media’s team. Branded buses, billboards, and city lights were easy to spot in Sofia and other big cities. In addition, several TV cut-ins circulated throughout bTV’s channels, along with short TV appearances by the comms team during morning shows when a new story was about to be released.
The campaign also included a contest segment where kids were to submit a drawing on the environmental topic and enter the competition. The results exceeded the initial expectations the brand and digital managers had.
KEY LEARNINGS
Last but not least, this project is a good example (pun intended) of several things:
— Sometimes sacrificing artistry can boost your creativity. We managed to offer a working solution that adds value through strategic design and experimentation.
— Prioritising mobile can serve the content strategy. A mobile-first campaign could easily continue living on social media, especially on Instagram Stories or TikTok, by reusing the same assets without going too far in content production.
— Matching mutual expectations. We all were on the same page that WOW-visuals wasn’t what we were going after. A functional solution that resonates emotionally with a specific audience — that is our thing!
— Workflow-based collaborations are good for the design process. In our practice, it rarely happens that a client is involved in so many stages of project implementation, which was a valuable experience.
— Limitations can serve as guidelines. Every project has some limitations. When we use them to frame and shape a process, we reaffirm our decisions, which work for both the team and the final product.
If you enjoyed this one, then hit the follow or subscribe button to get you notified when we post the next story. Check out our work at alike.studio to find details to spark your imagination and get you planning what we can build together.
Cheers!
Alike Studio
