Dongengin Cerita Untuk Anak — A Storybook App Case Study
How it All Began
There were few children’s Indonesian storybook apps with high-quality designs and content, so it’s quite difficult for parents and children to have access to high-quality local fairytales. Our main goal is to create an Indonesian storybook app for children that provides high-quality content, local languages, and moral messages for children to learn.
Started with a Mini Research
Competitor Analysis
We conducted a mini Competitor Analysis to help us identify what features that we need on our app. Due to the limited Indonesian storybook apps, we also added storybook apps from outside of the region.
Ideations
Based on our early ideas and the results of our competitor analysis, we developed ideations for our storybook app, including:
- High-quality Illustrations and various illustration styles
Our illustrators played a key role in developing distinct styles for each story, intending to bring a lively and diverse experience to the young readers. This also helps to showcase our studio’s capability in creating high-quality illustrations. If the project continues, we want to invite external illustrators to collaborate with us. - English and ethnic languages options
This feature is one of the strong points that we want to highlight for this app. We didn’t find any Indonesian storybook apps that support ethnic languages. We wanted to provide local translation so that children can also learn about their ethnic languages. - Moral stories for learning purposes
Not only do we want our young readers to know about local stories, we also hope that they can learn about the lessons from each story. - Interactive Features
Motions and animations are essential to attract children to read the stories.
User Flow
Before we continued designing the app, we started by creating a user flow. This helps us to oversee the ideal flow for our app.
MVP User Flow
An ideal flow usually takes a lot of time to build, but it is important for us to test the app quickly. Therefore, we created the Minimum Viable Product (MVP) flow, which has the basic features that we think are enough for testing purposes.
App Naming and Mascot Creations
Before we jumped into mascot creation, we gathered up several keywords that helps us to come up with the title for the storybook app and the mascot.
Several naming proposals were discussed internally, then we finally made a decision to name the storybook app: Dongengin Cerita Untuk Anak (in English, it translated as Dongengin Story for Children) with a cat named Owo and an owl named Owi as the main mascots.
Drawing Process
Owi, the smart owl, is the name of our main mascot. It is a smart owl. We did a Lo-Fi form of Owi (sketches) before proceeding to the hi-fi exploration. While we use Owi as our branding mascot, Owo will be utilized for illustration purposes inside the app.
We did a Hi-Fi exploration of Owi as a mascot to determine which colors and shapes were suitable for the mascot.
Final Result
Above is the selected mascot that will be used as an icon for the storybook app in Android and iOS.
Low Fidelity — UI Design
We created a low-fidelity (lo-fi) UI design that works on smartphones and tablets. We explored a few lo-fi UI designs below:
After a few iterations, we selected the final lo-fi that we will use in the Hi-Fi design:
High Fidelity — UI Design
We finally created the UI designs that represent our MVP ideas.
Homepage
Story page
Story Writing
Our copywriter helped us to adapt the stories into format that fits our app. There are a few keywords that helps us in writing the stories:
Story Writing Flow Process
The writing process began with reading the selected stories, then divided into a scene/page format to make it easy for illustrators to create the illustrations.
Supporting Different Devices Size and Orientation
When dealing with various devices, we considered two things:
- Creating different illustrations for each device size; or
- Create one illustration to cater to every device.
But, the challenges for each options are:
- Choosing the first option means more workload for illustrators because they need to create and resize multiple illustrations to cater to every device. For one scene, the illustrator needs to create different variations for each device size and orientation. At minimum, they would create around three illustrations: small, medium, and large (tablet).
- Choosing the second option means that some devices may not show full illustrations. There will be some parts of it that the user can’t see.
We chose the second option for efficiency for our illustrators. For this option to work, we need to make sure that the main scene can be viewed on most types of devices. Hence a guideline will be helpful.
Story Pages Guideline
Below are examples of guideline illustration usage. In any device and orientation, whether a smartphone or tablet, the middle area or safe zone will always be visible, while the surrounding area works as a graphical support. The bigger the device, the more beautiful the illustrations will be.
Storybook Cover Guideline
This is a guideline for the storybook cover. There is only one size, where later the system will automatically adjust the cover for tablet or mobile.
The Making of Illustrations in Various Styles
We created the illustrations with different tones and styles with the three stories shown below are the examples (Roro Jonggrang, Danau Toba, and Malin Kundang).
There are a few main things that affected the design of the characters and the scene:
- References: Our illustrator starts with moodboard creation where we collect references for illustration style in general, for example, character shape, art style, etc.
- Cultural background: Indonesia has so many different cultures. So, on each story given, we perform a background check to gain an understanding of the cultural background of the story. This cultural reference will affect the presentation of each story.
React Native as the Tech Stack
We used React Native as it enables cross-platform development. It could develop code for Android and iOS with the same codebase, which will reduce development time and effort. Some considerations that we had on why we chose React Native:
- Cross-Platform Development
React Native allow us to develop Android and iOS app, so we can create a mobile app that works on both of them. - Hot Reloading
It lets us see the change results of our development immediately without having to refresh the app manually. - Rapid Development
Working with React Native will be faster and more efficient in utilizing concepts from React. Reusable components and organized code structure helped the development process.
Developing the App for Android and iOS
In developing the app, there are a few steps that our developers need to prepare:
- Preparing the environment
Developers prepare the environment by installing the necessary server, package manager, Integrated Development Environment (IDE), and the project. - Code development and testing
We develop the code based on the project, doing testing to see if the code was run as intended and to see if there are bugs that need to be fixed. - Build the app
Following the testing session, our developers then build the code into an app that can be used or tested on smartphones and tablet. Our team checked the app to see if there were still any bugs available that needed to be fixed.
Results
Here are the final results after our developer team worked to build the app. Inside, there are homepage, story page, and also moral message page.
Animations
Our motion designer built the animation to improve the reading experience even better for children. First, we created animations in the homepage header and loading screen.
Besides that, we also created animations on each story. However, at the same time of writing this, the feature is still in testing.
Future Plan
Our current release received positive reviews on both platform. We wanted to make an even better app, here are the features that we will release over the next few months:
- More local languages support
- Sound effects and background music
- Voice narrations
- Pricing Plans
Download the App
If you are interested in downloading the Dongeng by Paperpillar app, now it is available on App Store (iOS) and Google Play (Android).
