App Design ProposalPlease use this template to help you plan for your app design.It is recommended to think through your design and include as many details as possible.App Inventor Name: __Nicolas Hernandez___ Submission Date: ___8/01/15___________I. Planning Table (30 points)The Name of Your App

Kids Learn

DetailsNotes for Yourself

Category of Your App

Learning/Pre-school

Why are you building this app? For example, what kind of contextual problem (daily life, learning, instruction, work etc.) are you solving?

I am creating this app because I am unhappy with the apps I am able to locate online for preschoolers under 2. This app will help my daughter and other kids around her age match animals, colors, and shapes to the words associated with their names. This app solves the problem of an insufficient supply of suitable apps for a child of my daughters age and level of maturity.

User Group(s)(age/job/education level etc.)

Toddlers age 1-5

While this app is designed with my daughter Lili in mind, older kids can benefit from this as well

User Test Plan

Who are the testers?

The user testers for this app are my daughter Olivia (7), my daughter Lili (19mos) and my wife Leslie (age withheld for posterity/survival)

When and where do you plan to test your app?

I plan to test my app at home in the evenings.

How do you plan to test your app?

This app will be tested using a complete play through method when possible. The older players will test for function, and the baby will test for usability.

What do you want your testers to do with your app?

I want the older testers to play through the app completely to see if there are any bugs that may need to be addressed. I would also like for the older testers to inform me of ideas/opportunities for improvement.

What do you want to learn about your app from the user tests? (e.g., fun factors, visual appeal, navigation, buttons, colors, etc.)

I am interested in learning about the aesthetic quality of the app, the navigation, the overall look and feel of the app design and whether the app functions as designed. I am also interested in learning by observing how the baby interacts with the app to determine if there is anything I can do to make the app more engaging for her.

How does this app work?

Provide one-paragraph narrative below to briefly describe how users interact with the app.

The app users will have the opportunity to choose from three different subject areas (animals, colors, and shapes). Users can practice or take a quiz. In practice mode, the users will click on images of either animals, colors, or shapes and the word representing each will cycle through as another image. After practice, the users can choose to take a quiz. In quiz mode, the user drags a word to the corresponding picture to make matches.

Dissemination PlanTo whom and how do you plan to promote/distribute your app? Do you plan to use it with your students or at work?

I plan to use this app at home and at my daughters day care. I view this app as version 1. I plan on publishing version 2 of the app on the Google Play store and writing about it on my blog, sharing it with others, and making it available in my lectures at conventions.

Future development plan for this App(e.g., features or function to add; reasons for your future development plan etc.)

I would like to add more sound to the app. Ideally, the app would play a sound reading the word when the button is pressed to toggle images. I am not sure whether or not the app inventor system can handle an additional 35 sound files though. I am concerned at the moment that the app will be too large because it already contains 86 media items. I would also like to add animation to the app during the quiz portion to provide users with a more engaging experience.

There is also room for expansion with regard to the quiz elements. The quiz can be modified so that each sprite sounds out its property (ie. cat) when touched. This would enable users to learn in the quiz as well. A harder quiz level can also be added to strictly test the users knowledge of the subject matter.

14A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015II. Instruction for App Component Map and App Behavior Flowchart

Sketch it out!1. App Component Map (i.e., explain what you plan to have on the Component Designer; You can also consider providing a screenshot of your working Component Designer to help your explanation.)a. What are some visible components you plan to have on the user interface? (e.g., buttons, labels, images, animations, textbox for input etc.)Visible ComponentsScreen 1

Get Started Button: The Get Started Button is the only visible component on this screen. The visible image is a background image set in the Screen1 properties.

Screen 2/SelectionHeader: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational purposes.Choice Image: The choice image is an image with the text What are you learning today? in red letters in a Berlin Sans font. This is an image and not a label because the font was desired for consistency.Animals Button: The animals button, like the header button, uses an image that was created/arranged in Adobe Illustrator (artwork freepik.com). The button is designed to be aesthetically appealing. The button will take the user to the AnimalsPractice page where the user can learn about animals. Shapes Button: The shapes button, like the header button, uses an image that was created/arranged in Adobe Illustrator (artwork freepik.com). The button is designed to be aesthetically appealing. The button will take the user to the ShapesPractice page where the user can learn about animals.Colors Button: The colors button, like the header button, uses an image that was created/arranged in Adobe Illustrator (artwork freepik.com). The button is designed to be aesthetically appealing. The button will take the user to the ColorsPractice page where the user can learn about animals.

Animals Practice ScreenHeader: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational purposes.Image Buttons (16): The image buttons will toggle from the icon, to a picture of the animal to the word representing the animal when clicked. Navigation Buttons (3): The navigation buttons will take the user to colorspractice, the shapespractice, or the quiz screen.

Colors Practice Screen

Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational purposes.Image Buttons (9): The image buttons will toggle from the icon, to a picture of the word representing the color when clicked. Navigation Buttons (3): The navigation buttons will take the user to animalspractice, the shapespractice, or the quiz screen.

Shapes Practice Screen

Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational purposes.Image Buttons (6): The image buttons will toggle from the icon, to a picture of the word representing the shape when clicked. Navigation Buttons (3): The navigation buttons will take the user to animalspractice, the colorspractice, or the quiz screen.

Quiz Screen

Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational purposes.Subheader The sub header image will change according to the quiz type. The three options are animals, colors, and shapes. The appearance of each image can be found on the selection screen. QuizLabel (3): The quizlabel is changed to match the quiz type. In each case the last word is changed to either Animal, Color, or Shape. Sprites (8 in 2 rows) : The image sprites will change based on quiz type. For an animals quiz, the images will change to animals on the top row and animal names on the top row. A change in quiz type will change the images on the sprites but the arrangement will be the same (4 in each row).Try Again: The try again button (temporarily set to a pink image for testing) is enabled when a quiz is completed and disabled when a quiz is restarted or the user navigates away from the quiz screen. This button will reset the quiz and allow the user to replay the quiz. Unmapped Sprite (1): This sprite is currently unmapped. It is under consideration to be used in the even that multiple quizzes within a category can be created. This will launch a new version of a quiz in the same category (animals, colors, or shapes).Learn More Label: This label is static and is meant to inform the user of what is below.Navigation Buttons (3): The navigation buttons will take the user to animalspractice, the colorspractice, or the quiz screen.

Non-Visible Components:Screen 1:Sound: The I love learning clip plays when the screen is launched. It is included to help draw the user in to the app experience. Horizontal Layout (2): There are two horizontal layout components used for formatting to keep the button centered and to keep the button at a specific location at the bottom of the screen.Selection Screen:Sound: The learning is fun clip plays when the screen is launched. It is included to help draw the user in to the app experience.Non-visible images. There are two non-visible images that are used for formatting to create white space.Horizontal Layout (3): There are three horizontal layout components used for formatting to keep the buttons centered for aesthetic purposes.Animals Practice Screen:Sound: A click sound plays when the images are clicked and pictures are cycled through to help the user experience.TinyDb: Tiny DB is used to store the value from where the user clicked in order to load the animals quiz.Horizontal layout (3) Three horizontal layouts are used to center the header image, the navigation buttons and the table holding the images. (aesthetics)Table Layout: A 4x4 table is used to keep the images properly aligned. The table is placed inside a horizontal layout for center formatting. (aesthetics)Colors Practice Screen:Sound: A click sound plays when the images are clicked and pictures are cycled through to enhance the user experience. TinyDb: Tiny DB is used to store the value from where the user clicked in order to load the colors quiz.Horizontal layout (3) Three horizontal layouts are used to center the header image, the navigation buttons and the table holding the images. (aesthetics)Table Layout: A 3x3 table is used to keep the images properly aligned. The table is placed inside a horizontal layout for center formatting. (aesthetics)Shapes Practice Screen:Sound: A click sound plays when the images are clicked and pictures are cycled through to enhance the user experience.TinyDb: Tiny DB is used to store the value from where the user clicked in order to load the shapes quiz.Horizontal layout (3) Three horizontal layouts are used to center the header image, the navigation buttons and the table holding the images. (aesthetics)Table Layout: A 2x3 table is used to keep the images properly aligned. The table is placed inside a horizontal layout for center formatting. (aesthetics)Quiz Screen: Sound: Three different sound components are on this screen. One for notifying the user that they matched a pair, one for notifying the user that the match is incorrect, and one for the instructions on what to do when the quiz is launched. This is done to enhance the user experience.TinyDb: Tiny DB is used to get the value from where the user clicked in order to load the correct quiz.Horizontal layout (4) Four horizontal layouts are used to center the subheader image, the navigation buttons, the quizlabel, and the learn more label. This is done for aesthetical purposes to center the information on the screen.

Insert the images of your App Component Map and Behavior Flowchart below.II-A. App Component Map (30 points)

Kids Learn App Component Map

II-B. App Behavior Flowchart (link)