Created by: Haris Ahmad, Anish Pokhrel, Haider Tawfik, and Zachary Woods-Smith
Sketch, design, implement and document an interactive application designed for kids (and/or their parents).
Define the context of the app, what that app does, what happens as a response, and all of the interaction surrounding that app. It can be different use cases and contexts, such as education, playing, sports, games, and so on. It can be a practical application, fun and entertainment purpose. You could interview with your parents or siblings. The range of age could be broad, but maybe for kids who are younger than 10-12 years old-ish.
Think outside of box. Come up with and design something that are novel and what we have never seen before.
Nowadays, most games are made to entertain children. At worst, they are designed to be as addictive as possible so that children keep their attention on the game as much as possible until their parents get mad at them. As a child it can be very confusing what a healthy lifestyle is. The idea behind this application, The Care Bear, is to encourage and teach children ages 10-12 to have a healthy lifestyle. These include making healthy food choices, activities, and sleep schedules.
Our design process began with 10 concept sketches from each of the four group members (40 in total). We selected the 10 best concept sketches to display, which are all shown below.
Alongside each of the 10 concept sketches, there is a description of:
what the project or each sketch is,
how the designer came up with, and
why did the the group end up choosing it or not.
This idea comes from kids needing to learn how to type on the keyboard. Pacman will eat the next letter displayed on the screen when the correct keyboard input is pressed. This way kids will have some visual feedback to know that they have correctly pressed the corresponding key, and it will also encourage children to type faster in order to get a higher score. We opted to not use this design as kids may develop bad typing habits hindering their learning.
This idea stems from when kids are first learning to use a computer they do not have good hand eye coordination yet. In this game when the kid clicks on a lily pad the frog will jump to that lilypad and their score will increase. There would also be obstacles to avoid clicking such as rocks to improve their reaction abilities. When the user misses the lily pad or clicks an object that is not a lily pad the frog will fall into the water. We decided not to proceed with this idea as clicking is simple and not very interactive.
In this game kids would be able to learn the geography of Canada. This would be done through users being prompted to select the province and then selecting the correct location on the map. It would then give them an interesting fact about the province and increase their score. We did not proceed with this idea as it is too simple and repetitive.
In this game users are given an empty board with many shapes. The objective is to use all the shapes to fill the board with no gaps being present. Each time a user successfully completes a puzzle they will be given a new more challenging board to complete, by doing this users will learn problem solving skills. We ended up not using this idea as it may be too complicated for kids to solve.
The idea behind this design is to encourage children to have healthy food habits. Children would drag and drop food to the mouth of the bear. Depending on the type of food, the bear would respond by saying how it feels. The way the bear feels depends on the type of food you feed it, whether it is a healthy or an unhealthy food. Next to the bear is a health meter that displays the overall health of the bear. In the sketch above, the bear is fed a few donuts and it responds by saying “I don’t feel so good”. In response to that, the health meter lowers, showing that the bear is reaching an unhealthy lifestyle. We decided to go forward with this idea as it has a clear, positive purpose (to teach children about making healthy dietary choices), it is the most unique, and the most interesting.
The idea behind this design is to allow children to use their hand eye coordination to visualize physics. The goal is to throw a ball into a bucket by dragging it so that the trajectory of the ball reaches the bucket. The issue with this design is its limited interaction. Other than barriers and various distances between the ball and the bucket, there was limited functionality to this idea. We wanted to design something that would provide a positive impact to children, Toss the Ball would only be a means to a basic game.
The idea behind this design is to teach children typing and grammar. You are prompted a series of sentences, and the goal is to match the sentence by typing along. For each correct letter that is typed, the man would push the boulder up the hill. For each incorrect letter typed, the boulder would fall down the hill and the man would be forced to run away. The issue with this design is that it does not necessarily teach grammar. As the game rewards correct typing, it does this by rewarding if you placed the correct letter or symbol in the right place. It does not focus on how to write, the purpose of each word, punctuation, or sentence structure. It places too much emphasis on pattern matching rather than learning.
The purpose of this game is to improve the cognitive recall ability of the user. There are multiple categories (animals, emoji, cars, etc…) and the user will be prompted to remember a couple of images each round. They will then be prompted a screen which contains the images just shown, as well as additional images and the user will then have to select which ones they were originally prompted with. If successful, the score will increase and so will the difficulty (more images to remember from). The reason we did not move forward with this idea is because of its limits, for example say we are on round 7 and the category is “cars”, we would need to generate 7x7 (49) different images of cars. Essentially, it would cause a problem in the later rounds.
The purpose of this game is to make it as far as you can. There will be randomly generated obstacles at a minimum distance (allowing for jump time) and the users score will increase the further they go. The reason we did not go forward with this idea is because of its limited design and lack of storyline (does not really benefit the kid playing) and is following in the path of other mindless games on the app store.
This game is for the user to better their understanding of where things belong. There will be a list of items that belong somewhere, in this example, school supplies and a juice box would belong in his backpack, whereas the plant does not. Each round will be different and can even teach kids other concepts like what belongs in the recycling vs the trash vs compost. While it is helpful for children to learn and can help better them growing up, we did not go forward with this idea because the scalability (number of rounds) and the replayability of this game is not the best (can not really replay the same round multiple times since they would likely remember the answer).
Out of the 10 design concepts, we decided to move forward with Concept #5: Feed the Bear (Anish) shown below. This is because we believe that it has a clear positive purpose (to teach children about making healthy choices), it is the most unique, and the most interesting design that meets our goal, which to build an interactive application for kids.
Once the final design concept (Concept #5: Feed the Bear) was chosen, the team proceeded to sketch detailed variations.
Below of this page is a total of 10 sketch variations, each with a description of:
what the project or each sketch is,
how the designer came up with, and
why did the the group end up choosing it or not.
For this detailed sketch whenever the user watches TV they can make their bear watch tv alongside them. As the bear consumes too much television it begins to require glasses, through excess viewing of tv the bear will develop thicker and thicker glasses. This is to display to the kid that the consumption of too much television is unhealthy and may have consequences.
For this detailed sketch whenever the user goes outside they can make their bear do so as well. As the bear spends more time outside the happier it will be as well as healthier. By doing so this will give users a visual indication that by going outside and doing activities they can improve their health as the bear has improved its health.
In this variation the user is playing a game in which they throw healthy and healthy foods. Healthy foods (i.e. fruits, vegetables, etc.) are intended to be thrown into the bear's mouth while unhealthy foods (chocolate bars, candy, etc.) are intended to be thrown into the trash. When the bear is thrown healthy food, or unhealthy food is thrown away it will be displayed by a happy expression on the bear, if the bear is fed unhealthy food or healthy food is thrown away then the bear will make an upset expression. We decided not to proceed with this variation as it would teach kids they should only eat healthy food and throw away unhealthy food instead of considering moderation.
This variation, similar to the previous one, the bear providing active feedback based on the user's choices. In the specific image shown above, we can see that the bear exclaims “yummy!” as the apple is dragged over for him to consume. Similarly, if a chocolate bar or something else that is not great for an individual’s health is dragged over to the bear, the bear will have a negative expression. This design implementation allows for good continuity and is similar to the health bar in a sense. For example, if only 1 chocolate bar is given to the bear he will only slightly frown, but if 5 in a row are given to the bear the frown will worsen with each chocolate bar and it will take more positive actions afterwards for the bear to go back to a neutral or happy state.
This is a scoring system based implementation. Dragging the apple over to the basket will increase the overall points and will allow for things such as “streaks” or “high scores”. For example, if the user initially gets a score of 100 points, that will be their high score if or until it is beaten by a higher score later on. Similarly, if the user scores over 75 points or something for a week straight, he will get a streak of some sort and his bear might now look different from the default bear as a reward. Things like these that are possible because of a scoring system, will help incentivize the child that this application is targeted towards.
This detailed sketch depicts a more interactive way for the user to select what they’ve been up to rather than the typical drop down menu. In this sketch, the user can knock an arrow into their bow and shoot at the ring which has their food option. This will of course require there to be different predefined categories and the catalog of items will then be limited to what can fit on the target which is a limitation to this implementation style and is also a major factor in why we did not decide to move forward with this idea.
This sketch variation introduces a way to check the wellness or health of the bear as well as a voice command to feed the bear rather than typing or selecting from a list of food items. The user feeds the Bear by a voice command function. Then, the Bear responds to the food it has been fed depending on what type of food it is. After each food input, the user is presented with a “Bear Wellness Meter” indicating the current health and wellness of the Bear. The more healthy foods the Bear has been fed, the higher the wellness meter will go (indicated in blue). The more unhealthy foods the user feeds, the lower the wellness meter will go (indicated in red)
This sketch variation adds new functionality to the previous variation that allows the user to track and set their good sleeping habits. If the user clicks the “SLEEP” icon, they are presented with a clock in which they can set their sleep schedule by dragging a blue highlight through the hours they wish to sleep. The highlight begins at the time the Bear wants to sleep, and ends at the time the Bear wants to wake up. Once this has been set, the Bear will go on sleep mode. At the wake time, the Bear is woken up by an alarm. This idea was chosen to be a part of the application because I know that sleep is vital for a person’s health, especially for a child’s healthy development.
For this variation the bear would assist users in pronouncing difficult words. This idea stems from the bear being able to have facial expressions such that users can follow its mouth movements. Using a bear would also allow users to have more fun when compared to learning mouth movements for speech from a human. The user would input a word or a phrase that they would like to learn, then the bear would begin to say the word while demonstrating proper mouth movements. We decided to not move forward with this variation as many children will naturally learn how to pronounce words by watching other people.
For this variation, the purpose is to teach kids how to stretch and maintain healthy habits. The bear would show the stretch and count through x-amount of seconds x-times for x-amount of different stretches. This idea came up when considering different types of simple physical activities that children can do to be more healthy. Stretching is the most simple, basic form of activity that a child can do. However, we decided not to move forward with this variation because just stretching can be too boring for children. A better idea would be to encourage more physical play that is fun to children.
For the final design, we decided implement the following variations:
Variation #2 (Haider)
Variation #5 (Haris)
Variation #7 (Anish)
Variation #8 (Anish)
The final design consisted of a bear (called The Bear) character that the child would have to take care of. They would do this by feeding The Bear different foods, managing his sleep, and/or encouring him to participate in physical activitity. To indicate the wellness/health of The Bear, a wellness bar is always on display. Depending on if the user makes a healthy or unhealthy choice, the wellness bar will increase or decrease.
Haider came up with the idea of encouraging play or activity. By doing so it will give children a visual indication that by going outside and doing activities they can improve their health.
This is a scoring system based implementation designed by Haris. Dragging the apple over to the basket will increase the overall points and will allow for things such as “streaks” or “high scores”. For example, if the user initially gets a score of 100 points, that will be their high score if or until it is beaten by a higher score later on. Similarly, if the user scores over 75 points or something for a week straight, he will get a streak of some sort and his bear might now look different from the default bear as a reward. Things like these that are possible because of a scoring system, will help incentivize the child that this application is targeted towards.
We thought the idea of a "wellness meter" (which we now call a Health Bar) was a good design choice because of its simplicity. Children would be given visual feedback on the health of the bear based on the dietary decisions that they make.
Aside from diet, sleep is essential for health, especially for young children. I wanted to come up with more ways on how to display healthy habits, which is why I thought it would be important to include sleep.
The following are my contributions to this design project:
Concept Sketches
Concept #5: Feed the Bear
Concept #6: Toss the Ball
Concept #7: Typing Game Across the Hill
Variation Sketches
Variation #7
Variation #8
Used HTML, CSS, and JavaScript to implement the drag and drop food feature to the bear and health bar functionality (group members: Haider, Haris, and Anish contributed equally as much to the implementation)
This video showcases the final design.
It includes all the different functionalities of the application:
Selecting food items and then dragging and dropping them to the bear's mouth,
Selecting an activity, which includes to sleep or to play,
Seeing how different choices affect the health of the bear which is visually depicted using the health bar.
"We hope that this interactive design is able to guide young children to make healthy choices early in their lives."
- Haris Ahmad, Anish Pokhrel, Haider Tawfik
🐻 View the application: The Care Bear
💻 See the source code: Glitch