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: Brian Nagy_____________ Submission Date: November 11, 2012_____
I. Planning Table (30 points)

The Name of Your App


Details

Notes for Yourself
Category of
Your App

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

I want there to be a place where biology students can go
to manipulate variables and see the movement of
molecules in response to those changes in the processes
of diffusion and osmosis. Currently, there are animations
that show molecular movement into and out of cells, but
they are fixed. This app allows users to change variables
such as cell type, temperature and size of molecules and
see the resulting affect on molecular movement.
The fourth screenthe
quizadds to the
learning experience by
assessing the knowledge
gained fromearlier
activity. The option to
text the quiz grade to the
teacher will be added.
User Group(s)
(age/job/education level
etc.)



High school biology students. Ages 15-18

User Test Plan


Who are the testers?
o Select 10
th
grade biology students
frommy classes
When do you plan to test your app?
o Within the next three weeks with
students during their study hall periods
or after school.
How do you plan to test your app?
o I will load the app onto my cell phone
and onto my Android tablet (this one
will not be able to send the text
because it has no SIM) and have
students step through the app in pairs.
At the end, students will take the quiz
and let me know their scores. I may
even add a text box to the quiz screen
and allow students to add feedback on
the apps usefulness in learning.
Where do you plan to test your app?
o At my school, either in my classroom
or the computer lab
Plan on a Wednesday,
since youll be after
school anyway for credit
recovery. Make
announcements during
Lab and Lecture classes
asking for volunteers.
How does this app work?

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


Is there a way to launch
Mail the way we can
send SMS messages or
launch maps? If so,
A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2012
1
maybe that would be
something to add instead
of the SMS or in
addition to SMS. This
will work around the
inability of wifi-only
tablets to send text
messages. It also keeps
the teachers phone
number (potentially
sensitive information)
frombeing available to
all users.
User test results
(if you have done it for this
app)
What did the users say about your app (e.g., fun factors,
visual appeal, navigation, buttons, colors, etc.)

N/AForthcoming


Dissemination Plan To whomand how do you plan to promote/distribute
your app? Do you plan to use it with your students or at
work?

I would hope to use this app with my students. Due to
lack of equipment, I may rotate through students while
others are working on a different assignment, 2 at a time
(one for my phone, one for my tablet) and have student
work on the app and take the quiz, send their results and
then pass on the devices. I use a website called Edmodo,
which is essentially social media for classes. I could
paste the QR code for the app to the website for anyone
who has an Android app t o download onto their own
device.
A single Edmodo post to
both classes would
easily get the app out to
students. Include
information on how to
allow 3
rd
party apps or it
wont work!
Future development plan
for this App
(e.g., features or function to add; reasons for your future
development plan etc.)

As I work on this app, I have lost of ideas, but Im
limited by knowledge of the code and the ability to
create new images and actions. I want the molecules to
interact more smoothly with the cells themselves (not a
rectangular outline around the cells). Once I have the
Adobe CS6 suite installed, I may try my hand at some of
the design programs to make the cell diagrams more
appealing, realistic and functional (in terms of shape,
size and outline).


Depending on how far I
get, I may want to
consider small tweaks to
the UI to make it look
better and behave better.
As of right now, I know
that the slider for
changing saltiness and
temperature needs
adjusting in how it
works, but I already
have ideas for how to fix
that. Before the app is
complete, I may want to
figure out how to let the
user choose where the
molecules start in the
diffusion screen: inside
or outside of the cell.
That could make for an
interesting lesson
A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2012
2
II. Instruction for App Component Map and App Behavior Flowchart
Please use concept map tools (e.g., Gliffy, Google Drawing, or Bubbl.us etc.) of your choice to createthe following to explain your proposed apps
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.)
b. What are some Non-visible components you plan to have on the component designer? (e.g., sound, location sensor, TinyDB etc.)
c. Why do you need those components mentioned above (aesthetic, relevance function etc.)?

2. App Behavior Flowchart (i.e., plan and present the behavior logic/flow you would like to have on the Block Editor)
a. What would your apps do behind the scenes? (i.e., How does this app work? What kind of behaviors do you plan to build in the Block Editor?)
i. For example, if you are building a Virtual Tour app, you might want to have the app present a list of sites for users to view after they
click on a button.
ii. Present those planned behaviors in a flowchart.
e.g.,








(Note: This example above is a linear behavior flowchart. Your flowcharts are expected to involve multiple paths of behavior flow.)
User clicks on the Choose
Destination button
ListPicker presents a list of items for
users to choose from.
User clicks on one of the
listed destinations.
The listed destination is linked to/presents
the destination on Google Map.
A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 3
Insert the images of your App Component Map and Behavior Flowchart below.
II-A. App Component Map (30 points)
Screen 1

Diffusion Screen
A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 4


Osmosis Screen
*Not Designed Yet
A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 5
Quiz Screen

Screen Component Name Component Type Function
Screen1 Image1 Image Picture showing diffusion across a membrane, created using MS
Paint. Mostly Aesthetic.
Label1 Label Instructions on choosing between buttons
HorizontalArrangement1 HorizontalArrangement Keeps button layout looking neat
DiffusionButton Button Launches Diffusion Screen
Label2 Label Invisible text to space out buttons
OsmosisButton Button Launches Osmosis Screen
A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 6
Diffusion VerticalArrangment1 VerticalArrangement Keeps settings buttons arranged neatly. Allows left-justification of
text inside an over-all centered chunk
Label3 Label Instructions on cell type choosing
HorizontalArrangement1 HorizontalArrangement Keeps cell type buttons side-by-side
AnimalCellButton Button Changes membrane shape to oval to represent animal cell
(AnimalCellDiff.jpg)
Label1 Label Invisible text for spacing
PlantCellButton Button Changes cell to represent an animal cell (Image not uploaded yet)
Label2 Label Invisible text for spacing
NoCellButton Button Molecules will move around in the canvas with no cell membrane
restrictions
Label4 Label Instructions on use of temperature slider
Canvas1 Canvas Location of slider sprite and line-drawing to show the temperature
setting
Slider ImageSprite Moves back and forth in Canvas1. Its position changes the speed of
the molecules
Label5 Label Instructions on choosing molecule size
HorizontalArrangement2 HorizontalArrangement Keeps molecule size buttons side-by-side
SmallMolButton Button Changes ball size to 5pt
Label6 Label Invisible text for spacing
LargeMolButton Button Changes ball size to 15pt
Label7 Label Invisible text for spacing
BothMolButton Button 8 Balls are 5pt, 7 are 15pt
Canvas2 Canvas This is where the molecular movement will be seenq
ImageSprite2 ImageSprite This is the cell. It will be changed between being an animal cell or
plant cell or made invisible and disabled if none is clicked.
Ball1-Ball15 Ball Represent the molecules and will behave as molecules do near cells
and when they collide.
Clock1 Clock Stops activity 90 seconds after movement begins. Launches options
A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 7
to try again, start over or go to quiz
Osmosis VerticalArrangment1 VerticalArrangement Keeps settings buttons arranged neatly. Allows left-justification of
text inside an over-all centered chunk
Label3 Label Instructions on cell type choosing
HorizontalArrangement1 HorizontalArrangement Keeps cell type buttons side-by-side
AnimalCellButton Button Changes membrane shape to oval to represent animal cell
(AnimalCellDiff.jpg)
Label1 Label Invisible text for spacing
PlantCellButton Button Changes cell to represent an animal cell (Image not uploaded yet)
Label4 Label Instructions on use of saltiness sliders
InCellCanvas Canvas Location of slider sprite and line-drawing to show the salinity
setting
Slider ImageSprite Moves back and forth in Canvas. Its position changes the
background color and concentration of water molecules in the cell.
OutCellCanvas Canvas Location of slider sprite and line-drawing to show the salinity
setting
Slider ImageSprite Moves back and forth in Canvas. Its position changes the
background color and concentration of water molecules outside the
cell.
Canvas2 Canvas This is where the molecular movement will be seen
ImageSprite2 ImageSprite This is the cell. It will be changed between being an animal cell or
plant cell
Ball1-Ball15 Ball Represent the water molecules and will behave as molecules do
near cells and when they collide.
Clock1 Clock Stops activity 90 seconds after activity begins. Gives the option to
restart, go to the diffusion screen or go straight to the quiz.
Quiz ActivityStarter1 ActivityStarter Invisible.Launches mail app with prepopulated email address,
subject and message (shows the grades the user got on the quiz)


A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 8

QuestionNumLabel Label Will change and display the number for each of 10 questions
QuestionDiagram Image Will be changed or made invisible depending on the question
number to help with questions
QuestionText Label Displays the text of the question.
ListPicker1 ListPicker Will display 4 choices for each question.
HorizontalArrangement1 HorizontalArrangement Keeps score display components side-by-side
Label1 Label Says Score:
GradeLabel Label Displays the percentage of questions asked so far that were
correctly answered
Label3 Label Says %
Label5 Label Says Enter Name
NameText Textbox User Enters name
Label4 Label Says Enter Instructors Email Address:
HorizontalArrangement2 HorizontalArrangement Keeps next textbox and button side by side
EmailText TextBox User enters the email address for their instructor
SubmitButton Button Creates the Data URI for the activity starter, launches the mail app
and prepopulates the recipient (with EmailText.text), the subject
and the grade. The final message is: NameText.text received a
ScoreLabel.Text% on the Molecular Movement Mobile Quiz.
TryAgainButton Button Returns user to Screen1

**Some screen components are not listed because I havent completely fleshed out how things will work. There may be more
added, but I doubt anything will be taken out**



A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 9

II-B. App Behavior Flowchart (30 points)

A template designed for BSU EDTECH597 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2012 10