UDİ BİBLİYA kids
My Role
UX/UI Designer – Visual Design, Prototyping
Timeline
Mar. to May. ’24 – 4 weeks
Overview
Created the branding, style, and user interface for the MVP of a children’s storybook app designed to help kids learn languages. Assembled prototypes to test interactions and gather feedback from young children and their parents.
Project goal
The primary goal for this project was to bring the Client’s vision to life. They had already completed initial research and constructed rudimentary wireframes to indicate how the app would function. I was brought on to create high-fidelity screens for their MVP and to offer any suggestions on how we might improve the usability of the application for children.
Creating the look
Speaking with the stakeholder, the primary users were assumed to be in Grade 1 up to Grade 4. Roughly, that equates to an age range of 5 – 9 years old. While at first that doesn’t seem like a large range, there is a massive amount of brain development during that time.
The look and feel of the application would need to be approachable for both the young and very young, as well as usable by their parents or teachers.
Picking the right shapes
An early inspiration was that of Duplo blocks.
Duplo have a distinct and recognizable shape in with thick edges and large sizes. They’re easy to handle for children and adult alike, allowing any person to play.
This inspiration became the focal point for designing the style and shape of the components within the app.
Picking the right colours
The colour palette needed to evoke child-friendliness, and choosing bright, primary colours helped convey the look of toys or building blocks that children play with.
Conducting some guerrilla A/B tests showed the children preferred the blue background with purple as the interactive colour.
Picking the right font
The option to read in different languages was a key feature of the app, and picking the right typeface was vital. Not only did the font have to fit the context of a storybook app for young children, it had to be legible in Udi, a severely endangered language. Manual testing was required to confirm that the font supported all glyphs used in the Udi alphabet.
We found that Playpen Sans was the most suitable and desired font for English and Udi. It supported all the Latin characters needed for the endangered alphabet. One shortfall however, is Cyrillic and other alphabets were not included. Nonetheless, we decided to move ahead with Udi as the focus, and will revisit additional fonts in the future.
Playpen Sans
Putting the high-fidelity design together
Easy to handle, easy to navigate
Drawing from the design inspirations, using thick, pronounced borders with deep drop shadows achieved the child-like look, adding a physicality to the design.
Make it easy to follow along
Each story has an audio recording that would highlight the words as the recording played. Determining the right method of playing and pausing, as well as hiding and revealing the player in a way that felt intuitive at first glance, took testing and iteration before settling on the final design.
Keep the references accessible
Many of the stories reference Bible verses, and there was a desire to have the verses on hand. Reading the scripture referenced needed to be readily accessible, without drawing too much attention from the storybook.
Encourage interaction
Each page needed to have an additional challenge for the reader, which would drive encourage learning new vocabulary. Placing the challenge after the story set the story to be priority, and highlighting the number of stars on the page nudged the reader to find the missing stars.
Make it feel rewarding
One of the key features was an animated star when a user correctly found the answer to the challenges. It needed to be short, sweet, and visually appealing.
Try out the prototype
End to end flow
What do the kids think?
Understandably, there are additional considerations testing with children than there are testing with adults. And due to limited budget and available users in the desired age range, I was only able to test with three children that were slightly younger (2, 3, and 3) than the target demographic.
I conducted testing over Zoom on the computer, in order to observe both child and parent proceed through the Figma prototype with the goal of “reading a 10 page story.” I instructed the parents to act as guides and proceed through the Figma prototype along with the children. However, I found that with all three children, quickly became disengaged after only a couple of pages. But when asked what they thought, the children answered in the positive. While it’s likely the children wanted to give a pleasing answer, it was clear that the testing the environment was not conducive for the app.
Once initial development had begun and I had access to a test APK, I conducted an additional test with one of the same children. Instead of testing on the computer, I loaded the APK onto an android tablet and I had the child hold the tablet while he sat with his mother. The results were a substantial improvement. Rather than squirming after only 1 or 2 pages, the child remained engaged and pleased through the whole story – and wanted more!
Next steps
The goal of this design was to bring their MVP to life. Having used the test APKs and testing the app with children, I can say that goal was achieved.
But design is never done.
Figma prototyping has distinct limitations which do not capture the full user experience. Once the app is in the hands of the right users, my suggestion for next steps would be testing to hone the reward experience and gathering feedback for additional features and functionality.
- Hone the reward experience
Additional testing is needed to determine the best reward experience. Figma’s technical limitations affect display accurate timing and sound effects. Using the test APK to gather feedback on length, sound, and effects used could help validate and improve upon the design.
- Test for gaps & missing features
Additional testing is needed to determine the best reward experience. Figma’s technical limitations affect display accurate timing and sound effects. Using the test APK to gather feedback on length, sound, and effects used could help validate and improve upon the design.
