COP 2271 Design Project

Team name ______________Gator hackers_____________________ Team # ___2___

Milestone leader ________Camila Del Sol Pina________________________________

Milestone 5 (M5): Rapid Prototype

TEAM MILESTONE

The next step in the development of your team’s solution is to create a Rapid Prototype. A Rapid
Prototype is a sequenced step-by-step workflow that shows computer screen mockups, user-
interaction options, and how to move between screens. Your Rapid Prototype will be done in
PowerPoint and will be based on your ideas your team selected in M4 Concept Reduction and
Selection (features and modes by which to implement those features). This Rapid Prototype of
your solution needs to show how your design will address your project’s criteria and meet your
direct users’ needs. The first step is to create a Prototype Navigation Map, and the second step is
to develop a partially-functioning Rapid Prototype in PowerPoint. Use the Design Worksheet to
record your responses.

Specific milestone steps

A. Revise prior documents.

1. M1 Problem Scoping - iteration
Find more information about the problem and how it is a problem for the customer.
2. M2 – Problem scoping - iteration
Finding more information about the problem and the customer could make you modify
your problem definition. Make sure you write a well-defined problem, and that your goal
is SMART, and it includes the requirements for the course as well, because I am one of
the stakeholders, right?
3. M3 – Idea generation - iteration
Revise your M3 document. In case you have modified your problem definition, check if
you can generate more or better ideas that are useful for your project.
4. M4. Idea reduction and selection - iteration
Do new ideas need to be weighted for selection? Test here how good are new ideas.

Revisions should be based on your new understanding of the problem/ customer/ or even
Matlab. You may gather any additional information at any moment. Even if you
received a perfect score on your last milestone, you can base changes on your current
deeper understanding of the milestone.

Use ‘track changes’ to modify these new documents and save them with a new version
name after the name of the document (e.g.ver 2.0). Do not accept the track changes.

B. Navigation Map.
Your final deliverable is a MATLAB program that, when running, provides direct users a
series of screens with which to interact, and that gives direct users the information they
require. The series of screens will connect through options in menus that are selected in the
command window (unless you decided to use the MATLAB Graphic User Interface, in that
case, the behavior would be similar to the one on a webpage). Your team needs to map out

Mendoza Garcia M5 Rapid Prototype

COP 2271 Design Project

how many screens you intend to have, determine the purpose of each screen, and identify
how all the screens connect. This ‘mapping out’ is done by developing a Navigation Map.

Below you can find a Navigation Map for a project that is using the MATLAB Graphic User
Interface (GUI). Although I am not expecting you to use such functionality, the diagram will
help you to understand the goal of this assignment.

Consider modularity based on functions (each team member needs to author at least one
function – see module 14 for more information about functions – module is unlocked).
Boxes are screens that are shown in the command window, and the text inside describes what
each screen contributes to the design, and how the direct user interacts with it. Arrows
indicate links between screens, and the arrowheads indicate the potential flow of the direct
user’s navigation of the design.

This Navigation Map has a few flaws (for example, arrows are not always clearly indicating
flow, and the game screens are not fully developed with information about inputs, outputs,
and how the user interacts with it), but it should give you an idea of where to start this task.

Your Navigation Map image can be made using PowerPoint graphics, or it can be hand-
drawn and photographed. Either way, create a PowerPoint file (with your legible embedded
image) and save it as M5_navmap_team#.pptx

Mendoza Garcia M5 Rapid Prototype

COP 2271 Design Project

Example Navigation Map

C. Rapid Prototype
1. The next step is to use your Navigation Map to create a Rapid Prototype. You will
use a PowerPoint slide set to represent your design. Each slide represents a screen you
intend to have in your final design and should be hyperlinked to other screens where you
envision the software to go in case a user select one of the options. Example:
a. Let’s say, you have a program to run any of the course code examples, activities, or
homework. You will have a welcome menu to select the module, once you select it,
you will have to choose between the following three options:
i. Before class examples
ii. In-class activities
iii. Homework
b. Once you select one of these choices, let’s say in-class activities, you will get another
menu that will allow you to select the module, and then, a menu that will allow you to
Run activity A, B, or C in that module. When you select it, finally, you will run the
desired program.
i. For menus, check the HW called “Robotic Ice Cream” in module 3.
c. You can create the modularity needed using functions. In the case of the example
with the course activities, each .m for an in-class activity in each module must be
transformed into a function, which would be called from the menus.

Here you can find more information on setting hyperlinks between slides. Save your Rapid
Prototype as M5_rapidpro_team#.pptx

Your Rapid Prototype must be detailed to a point that it conveys, in a professional-looking

manner, the features and modes your team has chosen. The best prototypes are ones that
accurately model what you hope the final deliverable will both look like and do, and
therefore allow you to figure out any conceptual problems of your design (including flow,
navigation, usability). As a result, the Rapid Prototype is your team’s roadmap for the
remaining Milestones. For now, do not be limited by what your team knows it can do; rather
think about the possibilities. This is still the time in the design process to be creative! You
can always scale back, in consultation with your instructor, as your team starts to develop its
solution.

There must be interactivity planned for at least 4 (or 3, depending on your team size)
interfaces. Interactivity is defined as the MATLAB program waiting for an event (user input)
and responding appropriately (e.g. plotting, providing feedback, showing a correct answer,
etc.). The graceful exit from the program is not sufficient interactivity to address this
criterion. Again, each member of your team will be responsible for developing at least
one interactive function that contributes to the overall team solution.

All slides (because they each represent a program function) must provide appropriate
navigation options, including an option to exit the program gracefully. In other words, the
only exit option for the user should not be the X in the upper right corner of each window, or
MATLAB Window (for Windows, or the red dot in the upper left for Mac).

Mendoza Garcia M5 Rapid Prototype

COP 2271 Design Project

The slides should communicate information about the design as well as the mockup
interfaces following the layout in Table 1.

Table 1: Rapid Prototype

Slide # Description
1 Navigation Map
(required)
2 Opening Menu interface
(required) This must include:
1. Your project title, your team number, and name, and your team member
names (here there will be a pause)
2. An option to continue, meaning that selecting it will launch the menu
where your program starts
3. An option to show a list of citations used for your solution.
3 Citations
(required) Print a list of the Citations. These must be in APA format or IEEE format and
must be provided for the data you gathered to learn about the problem and
user needs, images you are using in your program, content, and/or ideas that
your team used to develop your solution.
Remaining Static mock-ups of the remaining screens of your design. These can be drawn
slides using PowerPoint tools or can include other ways to show the screen content.
However you show the interface, the screens need to be linked with
hyperlinks based on your Navigation Map. Label each of these slides with the
teammate’s name who is responsible for coding it.

2. Once your PowerPoint slides are complete, create “design notes” for each slide. In
the notes section of each of your slides, your team shall communicate the design
decisions that went into each Function. Please clearly indicate (by letter):
a. how the direct user will interact with the interface,
b. how the activity on each function works,
c. what error checking will be done as the direct user interacts with the interface,
d. what help will be provided to assist the direct user in understanding the feedback
responses and in overcoming errors, and
e. who on the team will be responsible for developing the Function describe in the slide

Below you will find an example of a Rapid Prototype Notes Page for a MATLAB GUI. Use
this as a model for your Rapid Prototype, but remember that, if you are not working with
GUI, the content in your slide is what it will be shown in the Command Window. Save your
Rapid Prototype PowerPoint file as M5_rapidpro_team#.ppt

Mendoza Garcia M5 Rapid Prototype

COP 2271 Design Project

Example of printed Rapid Prototype Notes

D. If you have real users, send your Rapid Prototype document to your team’s direct users and
ask for feedback on usability and relevance. Provide a screenshot of your ‘sent’ email to
your direct users, place that image on your Design Worksheet.

E. Individual contributions. Individually, write a short specific task-oriented description of

what you contributed to this M5. Please use the sentence stems we provide to help structure
these. Please also keep in mind these guidelines:
1. Activate Track Changes and write in your shared document your contribution. Make sure
the Milestone leader knows about you ending this task.
2. If you did not contribute to this milestone, then write, “I did not contribute to this week’s
milestone” and send it to the Milestone leader.
3. If one of your team members does not write his/her contribution description, then the
recorder should write “this team member did not provide a contribution description this
week.”
4. If one of your team members did not send a contribution description AND did not
contribute to the milestone, then the Milestone Leader should write, “this team member
did not provide a contribution this week and did not contribute to this week’s milestone”.
5. If you feel that one of your team member's descriptions is not accurate, please send an
email to your instructor so I can help resolve.

Deliverables
 An updated web page with the Navigation Map PowerPoint file for M5 in the M5 section.
 An updated web page with the Rapid Prototype
 New versions of M1, M2, M3, and M4 documents, based on your new understandings of
the customer needs, of the problem, and the solution.
Mendoza Garcia M5 Rapid Prototype
COP 2271 Design Project

 Submit to Canvas PowerPoint file M5_rapidpro_team#.pptx that includes:

o with Navigation Map
o Submit to Canvas PowerPoint with Rapid Prototype.
 Design Worksheet (document below)

Mendoza Garcia M5 Rapid Prototype

COP 2271 Design Project

DESIGN WORKSHEET

Quality Control ChecklistChecked by:__Camila_Del_Sol_Pina________________________

Leader for this assignment
Quality submission, including Web Page and Canvas
Using a checkmark for each box, check that:
 M5_navmap_team#.pptx is complete, uploaded to Canvas and verified
 Link to webpage
 M5_rapidpro_team#.pptx uploaded to Canvas and verified
 New versions of M1, M2, M3, and M4 if applicable
 all documents are professionally prepared
 If you have a direct user, evidence of data collected from real direct users and sharing this
deliverable with them is included in your Web page and this deliverable.
 Optional: team meeting documents (i.e., agenda, task list, attendance) are updated on
your web page

A. A screenshot of your ‘sent’ email with your Rapid Prototype document attached to your
direct users, dated by the due date of this assignment.

B. Teammate contributions.
Individually, identify your contribution to M4. Please use the following stem sentences to help
structure your description (Activate option Track Changes or select and create a comment):

1. (replace with Team member 1’s nameTuoxin Li) contribution was:

 I undertook and completed these tasks:
 I undertook and made progress on these tasks:
 I undertook these roles in my team:
 I had this impact:
 I learned/my ‘aha’ moment was:
Making the frame of GUI map and preliminarily designing the PowerPoint.
2. (replace with Team member 2’s name) contribution was: Researching material properties
best fit for a solar panel that will power a large building, Researching the history of energy
consumption in the reitz building and contacting the University of Florida office for a
more accurate reading and for my teammates to have a better idea of which solar panels
will work best. Creating a sketch of the rapid prototype for the GUI
 I undertook and completed these tasks:
 I undertook and made progress on these tasks:
 I undertook these roles in my team:
 I had this impact:
 I learned/my ‘aha’ moment was:

3. (replace with Team member 3’s nameCamila Del Sol Pina) contribution was: Adding my
feature to the Powerpoint, creating some design notes for myself and teammates on the

Mendoza Garcia M5 Rapid Prototype

COP 2271 Design Project

Rapid prototype, uploading prototype to webpage, and checking over team members
work.
 I undertook and completed these tasks:
 I undertook and made progress on these tasks:
 I undertook these roles in my team:
 I had this impact:
 I learned/my ‘aha’ moment was:

4. (replace with Team member 4’s nameKarl Moody Jr) contribution was: Adding feature to
the Power point. Energy usage overall.
 I undertook and completed these tasks:
 I undertook and made progress on these tasks:
 I undertook these roles in my team:
 I had this impact:
 I learned/my ‘aha’ moment was:

Mendoza Garcia M5 Rapid Prototype