Sei sulla pagina 1di 14

App Design Proposal

Please 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

Details

Notes for Yourself

Kids Learn
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.)
User Test Plan

Toddlers age 1-5

While this app is


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

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


1

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2015

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 Plan

Future development plan


for this App

To 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.
(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

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2015

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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2015

II. 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 Components
Screen 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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

Screen 2/Selection
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.
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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

Animals 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 (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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

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:

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

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.

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

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

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

Kids Learn App Component Map

II-B. App Behavior Flowchart (link)

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015

Potrebbero piacerti anche