Tibbie — learning application and observation for children (study case)

Zaenal Aripin
10 min readNov 28, 2019
`Tibbie app

Introduction

Tibbie is an online study application for primary school. We also derived the name from the literal Bahasa Indonesia definition of the use of our app, ‘Teman Belajar.’ The initials of the two words ‘T’ and ‘B’ pronounced make up our name, Tibbie. We made this app to boost children’s motivation in studies where, at the same time, it allows parents to monitor.

This project started as a short brainstorming exercise in our UX Design Course at Purwadhika Startup and Coding School. They thus made us a team of five (Anine, Ipin, Tamara Nikhil varma, Ahmad Fadli djamil, and Trisya K.R).

the challenge

We were asked to design an online learning platform that functions as fun natural educating media with the presence of parent control, heeding to factors such as gender, age, and emotional condition. We agreed to use design thinking to resolve this problem.

The Brainstorming

Starting with our assumption as that child has a higher tendency to use the gadget for entertainment purposes such as playing games or watching videos than using it for educational purposes. Thus, we proceed to do desk research to prove our assumption and here is the result :

A survey carried out on 113 students from over 400 private schools in Surabaya-Sidoarjo in February 2016 by PW IPNU Student Research and Survey Organisation, East Java. The resulting data shows that half of them used smartphone started in primary school.

European Kids Online Survey

Surprisingly, child using the smartphone for school assignment in the first place. The students using their gadgets to find or answering their school assignments. And we got students using their device for playing games in second place. Ferdinantus Setu from Head of public relations in Kominfo said that there are 30 million Millenials child active playing games every day. In third place, we have got those kids using their gadget for watching videos. The last place is the kids using their devices for social media. The way people communicate with other people is changing, and it affects the kids too. Many kids using social media example, WhatsApp to communicate with their parents and their friends.

A survey carried out by the European Union Kids Online, as seen on the data above, published by the European Commission’s Safer Internet Programme shows that in Indonesia, the highest internet active users are kids and teenagers. 92% use the internet for educational purposes, 83% for gaming, and watch videos, and 71% use the internet for social media.

The Competitor research

competitor analysis

The user needs & insights

The condition where children have been actively using smartphones creates an opportunity to make this online learning platform. Hence, we then proceed to construct the user’s needs based on our collective assumptions while paying attention to factors such as gender, age, and emotional condition of the child, such as follows:

After further research from the competitors based on google play, we took several features to add to our product. Each member of the team submitted an app and their opinions about why they chose that app.

and we start with HMW (How Might We) :

How might we providing an interesting learning app for children and also can be monitored by their parents and maybe their teachers?

The design – user flow

In the next step, we created a user flow. The user flow branched into three users are student, parent, and teacher. The primary target user of Tibbie should be the student and the parent. However, we added the teacher as a possible user. The role of parents and teachers is to monitor the student’s progress in their studies.

The one that requires registrations are parent and teacher. The children only need to connect their accounts to their parent’s accounts. We made this in such a way that the parent will be directly related to the student’s account and will be able to view live reports right away and that to avoid complications in registration for the younger children. The teacher’s role in this app would be to make a group class where they will be able to invite students into the group, assign tasks, and then review the student work.

Let’s sketching!

We decided to design the flow for kid’s activity, starting from signing in to the account, accessing their study material to completing the task. Our goals for this particular task not only designing a simple-looking navigation system, but also fun and enjoyable features for the kids to play with. We also added two possible scenarios for the test score result (the high and low result). I focus on working on the profile screen, search journey, and task journey.

paper sketching

The flow’s feedback

paper prototyping test

We’ve conducted live testings, through a presentation of our user flow in a paper prototype format. The respondent was several peoples from Data Science class at Purwadhika. They were chosen to give feedbacks as they represent perspectives that aren’t familiar with UX design thinking while still being users of various digital products.

We got feedback on the Score Result page, which was to add a ‘share’ option so that kids can show their progress on other social media platforms or to their friends. We decided to add a sharing feature on our next reiteration, as we believe the option would cater to kids’ need for motivation.

The Hi-fi design

The previous sketching was our foundation for the conception of our hi-fi design. But after we did concept feedback, we decided to drop the first four flows as we saw that the design could be more concise and focused if we start directly from the Profile page. We utilized Adobe XD to make our prototype.

We came up with the concept for Jibbie’s prototype with Duolingo’s color in mind. We wanted to convey the cheerfulness of which Duolingo’s green is already known. So we chose 3 primary colors as our base: Kiwi (#7AC70B), Blueberry (#1DB0F6), and Banana (#FFC300). The typeface we chose was Ubuntu, for its roundedness, which conveys playfulness.

The heuristic evaluation – feedback from Master

As for the hi-fidelity prototype of Jibbie, we did a heuristic evaluation with an expert, Charlie Sebastian as known as UI/UX Designer of Purwadhika Startup and Coding School. We also reviewed feedback notes from the peers from UX Design Class and outlined the problems and advice from them.

heuristic evaluation process

They addressed the issues on the Home page, which were mostly technical: the distance between cards was too far, the caption on cards was too small, and that it would be better if we put ‘ongoing’ subjects on the page. Charlie also addressed the inconsistencies of image and illustration used for the Lessons. He advised us to choose either one of them to create consistency in design.

On the Quiz page, Charlie suggested that we explain the wrong answers immediately after the error committed — instead of explained on the Result Reviews page. The ‘Next’ and ‘Share’ buttons were also too similar to the surroundings and needed to be more emphasized. They also advised adding the ‘Try Again’ button as they thought the kids would better learn their lessons if they were able to repeat the quiz straight away. On the Review & Score size, however, they advised the ‘Share’ button to be more highlighted and to change the font size between the Question and the Answer to put emphasize the question more.

As for the general advice, they recommended us to eliminate the grey separator lines used in several parts of the design. To change the font to one with bolder lines so the letters would be readable from far away. And also use Indonesian instead of English because the app was intended to be used by Indonesian children, using the national curriculum.

The important feedback

2x2 matrix

Based on the feedback, Jibbie’s team members jolted down solutions for the reiteration. We then used a 2x2 matrix to help group the category of solutions according to the extent of impact (high or low) it brings and the magnitude of effort (high or low) required for it. We were encouraged to prioritize the solutions on the High Impact-Low Effort quadrant as it will be most effectively doable and to proceed to the High Impact-High Effort next.

Thus, we came up with the new HMW,

How might we provide an interactive design that can attract users, especially for children and provide more benefits for users?

Finally! The Tibbie Apps (Jibbie’s Revamp design)

As we discussed the reiteration needed for Jibbie, we found that we wanted to change the name from Jibbie to Tibbie, that made we indirectly know the meaning of the application we are working on and feel bound to the concept as a whole. And we wanted to change the whole design system, so it would appear more harmonious, fun, and attractive. Also considered making several feature additions to the app to cater more to kid’s interest in games.

design system

We changed the type font from Ubuntu to Manjari as a standardization of our app. This font has characters not much different from before.

The cuties character

characters of Tibbie

Continued with making characters become our app’s icon. There have four main characters, and each character created based on different backgrounds, traits, and preferences for example for children. The making of this character based on the nature of the animal itself.

Some interaction

Let’s Testing to the kids!

We conducted live usability tests with five children within the target audiences, which are:

  • Age 6–12 years old
  • Have a gadget and actively using it
  • Familiar with games on the device

During usability testing, we focused on getting insights concerning these features:

  • Would the kids know where to access lessons?
  • Would the history page be easy enough to understand and to find?
  • Would the navigation bar design be intuitive enough for the kids to find what they’re looking for?
  • Would the coins and rewards system be attractive enough for the kids? / Would the kids be interested in buying avatars and physical books as their rewards?

The Result are…

The results obtained after doing user testing on 5 children :

  1. Some words not understood by all children such as “History” and “Home.”
  2. The coin feature is a loved feature of 3/5 children,
  3. All Children loved to use the application because the Tibbie application presented with visuals from exciting illustrations and the color selection they like,
  4. Boys tended to like characters/avatars in the form of robots and cars,
  5. On the shopping feature, 2/5 children say that they don’t know how to use it.
the satisfaction result

What’s next?

We are trying to create applications that not only value users but also business value. And also improve the design that we received from feedback.

Conclusions

Guessing children’s thoughts indeed quite tricky. Especially the limitations of words they don’t know yet, make us had to make adjustments to words that they know at their age. The observation approach is indeed a choice in conducting in-depth interviews. But this is a great experience in making learning applications for children as a team.

design thinking is a new thing for me and there is my ignorance in the initial process of making this application. but after exploring the process in the second iteration, it made me understand how to use the design thinking method. I am very grateful Kenneth Mahakim be our mentor and evaluator. Thank you to the whole team members who made this app with all of the heart and hard work. Also, thank you for reading! I hope you can get any lessons from our first study case. If you have any feedback, feel free to contact me at zackytakeo@gmail.com or my LinkedIn.

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

--

--

Zaenal Aripin

A new product designer who trying to understand the behavior and experiences of each person to get a new perspective in solving a problem.