A user experience study of BookBeat kids app.
Summary: In a collaboration with BookBeat 2019 we made this UX/UI design case with the target group
9-12 years old kids. After research could we see the biggest outcome focusing on personalization and a new onboarding for kids. The result is a part of Berghs Digital Design Upgrade. We did the UX as a group and the UI individually.
Problem Statement: To keep the family account running during the whole year.
Method: Design Thinking and Double diamond design process. Agile and Iterative process.
My Role: Project leader
User Research: Annette Emmoth, Lars Söderman, Jeanette Claesson, Ella Dekel, Johanna Brag
UI, Illustration & Animation: Johanna Brag
Tools: Photoshop, Illustrator, After Effects, Sketch, ProtoPie, Keynote.
Help BookBeat make a more smooth, user friendly and pleasant kids version.
How do children 9-12 years use the app? Kids who never used it before and frequently users.
How do they want to be guided?
How might we make the experience better?
How might we inspire to read/ listen more?
Parent & user interviews
Test of hypothesis
- This is boring, there are no exciting books!
Stella 9 years old.
- I want to get inspired and read books in the same series as I read before, I want to use the search field.
Sigge 10 years old.
The new users are looking around for inspiration, scrolling around.
The frequently users are searching for new books in the same category as they listen at recently.
Both new and frequently users lose the attention quickly and are scrolling, clicking fast, they switch easily between different competitive apps.
Following the child interviews, tests and parent surveys, we could concrete insights and create a customer journey for both frequently users and new users. We presented and discussed the insights with the client. This research formed a great foundation to move into feature ideation and prioritisation.
1. Large images and large buttons are more usability friendly when a kid scroll fast.
2. Sharing and chatting when using different apps are usual.
3. The parents aim with the app for the kid is important to defend the cost of it.
4. Misspelling has to work in the search field.
5. The user scenario is important, the app is mostly used before bedtime.
Customer journey map of new users and frequently users, we found pain points at the "searching for inspiration point" for both groups.
Key focus area
We created hypotheses from the insights in following areas.
We know the target group are used to endorsements like badges, new levels and gold stars in school and in games. We can use endorsement to increase the time the kid stay in the app.
In this age the social life becomes more important and the kids are sharing a lot of actions and images. To share what you are doing is also critical if negative comments is possible.
3. Scrolling & User Interface
The target group are scrolling really fast, mostly vertical and the screen is constantly moving. The UI is very important with big buttons and big images which is easy to see in a moving condition.
4. Personalization/ Customization
We know that kids in this age love create things by them selves, they feel a closer connection to something they made by their own. A self made created world or a picked avatar or personal colour. We know they need personal content based on their earlier picked items.
We think we can reach the biggest outcome focusing on personalization and customization.
1. More customized suggestions based on the kids interests
2. Customized colour and theme/avatar for the user.
We studied the behaviour in apps and what kind of interface they prefer in other apps. Some quotes was:
- The avatar doesn't have to look human, but it has to have feelings. Emil 9 år.
- 3d avatars are more interesting! Maja 8,5 years old.
- Art in school is my favourite and to potter, create! Ali 9 years old.
- I really like to create, that is my big interest. When I creates an avatar I feel for it! Stella 10 år.
The majority of the interviewers say they like to create things themselves, in school and at home one of the biggest interest is to potter, paint or build things.
We could see a behaviour and a need of creating more by your own for the user to connect more to the app and a need of a better selection of books to inspire the user to find new books.
1. Bigger images and buttons in the interface makes it easier to see the it when scrolling fast.
2. Deep vertical scroll, less horisontal scroll is an important insight from the tests.
3. When starting the app the user will be able to write in interests to get inspiring selection of books for the user. (Like Pinterest and Medium)
4. Choose an avatar which can be personally decorated, an avatar with non-human shapes to increase engagement and give personality.
5. Add human emotions to an avatar and the interface when listen to the book.
Paper structure as a print in the colour fields is the main inspiration for this world of kids audio books. I also use a pattern of floating ink in the round shapes to keep the book feeling. I choose to use curves and round shapes to get a soft, smooth experience.
The original logo of BookBeat has the typeface Quarto Bold, I combine that in the logo with the bold and distinct Raleway Black filled out with paper structure and dropped ink.
The most common user scenario of the app is before bedtime, the colours should be calm, the dark midnight blue background gives a magic contrast to the soft earthy but also fanciful and emotional colours.
As text typeface in BookBeat KIDS app I use the distinctive Montserrat, a geometric sans-serif typeface.
In the onboarding process the user need to choose age and preference categories.
Guidelines from research and interviews when sketching avatars:
Non human shapes
Kind pleasant eyes
Cool, kind, cute, angry, surprised and other emotions
be careful with attributes which appeal to war and superficials like big muscles and tiny barbie look
The avatar will be your friend, or pet. A kind character which is not condemnatory or demanding.