SlideShare a Scribd company logo
1 of 110
Download to read offline
Final Prototyping Project: Tron Identity Disc Enhancement
Quinlan Kimble-Brown
Mar 20, 2022
Table of Contents
Table of Contents 2
Introduction 5
Gathering User Data 6
Source Material 6
User Analysis 7
Task Analysis 8
Environmental Analysis 11
Visualizing Your Data 14
Empathy Map 14
Extraordinaire 16
Reflection on Extraordinaire 17
Hierarchical Task Analysis 18
V2 HTA 20
Reflection on hierarchical task analysis 20
Visualizing User Data Reflection 21
Applying User Data to Select Screen Form Factor 22
Exploring Alternatives 22
Brainstorming Reflection 23
Final Screen location and size 23
Brainstorming evaluation Reflection 24
Low Fidelity Paper Prototype 25
Low Fidelity Version 1 25
Evaluation of Low Fidelity paper prototype 28
Pre-Planning 28
Results from Low Fidelity paper prototype Evaluation 29
Low Fidelity Version 2 30
Summary of Changes from V1 30
Reflection on Low Fidelity 36
Medium Fidelity Prototype in Slideware 38
Medium Fidelity V1 38
2
Search Mode V1 39
Battle Mode V1 42
Evaluation of Medium Fidelity Slideware Prototype 45
Pre-Planning 45
Medium Fidelity V2 46
Summary of changes from V1 46
Revised low fidelity prototype 47
Search Mode V1 47
Battle Mode V2 51
Reflection on medium fidelity with slideware 54
Storytelling 55
Storytelling V1 55
Storytelling Evaluation 61
Storytelling V2 65
Storytelling reflection 67
Storyboarding 69
Storyboarding V1 69
Script #2 Murder Mystery 74
Storyboarding Evaluation 80
Storyboarding V2 82
Storyboard Reflection 87
Video Draft 1 89
Video Draft 1 Key Frames 89
Video Draft 1 Evaluation 91
Video Draft 1 Reflection 92
Video Draft 2 93
Video Draft 2 Changes 93
Video Draft 2 Key Frames 94
Video Draft 2 Evaluation 100
Video Draft 2 Reflection 101
Video Draft 3 102
Video Draft 3 Changes 102
Video Draft 3 Edited Scenes 103
Video Draft 3 Evaluation 104
3
Video Draft 3 Reflection 105
Final Video 106
Final Video Changes 106
Reflection and conclusion 108
Citations 110
4
Introduction
This project explores and expands upon the usage of the identity disc device used by programs
and users in the world of Tron. The developed version of this device can be found useful to
other users and programs in the future.
Figure 1. Sam Flynn holding the identity disc in preparation for combat.
This project was completed during Spring semester 2022 in the course HCC 613. This project
was completed by Quinlan Kimble-Brown as a part of her MS degree in Human-Centered
Computing.
This project includes visualized user data, brainstorming documentation, and low and medium
fidelity prototypes, as well as the interface designed for the device. Along with this are
evaluations.
This project is dedicated to improving the identity disc to make it more useful with the inclusion
of screens. The screen will expand the usage and capabilities to improve the original goals of
the device such as battle. The world of Tron is large and vaste, meaning that it’s necessary to
have a device to help the user when enemies lurk around.
5
Gathering User Data
Source Material
The information I gathered mainly comes from the movie “TRON: Legacy”. The disc was used
mostly for battle, but other usage lacked move coverage. I researched the device through fan
wikis as well as watching other Tron content such as “TRON: Uprising”.
6
User Analysis
User: Sam Flynn
➔ Human
➔ Male
➔ Age 27
➔ Loves his parents, but grieves for them
➔ Reclusive
➔ Rebellious nature
➔ Able to digitize self into Tron world
➔ Son of creator of Tron world/The Grid
➔ Major shareholder of company ENCOM
(father created ENCOM)
➔ Has background knowledge of computers
➔ Knows how to hack
➔ Went to fathers college
➔ Dropped out of college
➔ Has pet rescue dog
➔ Loves to ride motorcycle
➔ Hard for programs to tell if he's a program
➔ Received disc at armory
➔ Knows how to parachute
Screenshot from TRON:Legacy of Sam
Flynn
Some information I wish I knew was how Flynn knew how to fight well. In the movie he was
able to defeat several components in the games he played. I also want to know his level of
understanding for code and game development. In the movie he was able to hack ENCOM and
also get into his father’s computer. But beyond that there is nothing shown of his computer
skills while in the Tron world. I would also like to know what the effects of being digitized is
7
like. For example, it is possible to read another user's memory, but is it possible to alter another
user’s memory like a program? Do all the rules apply to programs as to humans?
Task Analysis
Task One: Activating a new Disc
1. Disc is picked up by a Siren (female armory programs)
2. Disc is placed and rotated onto the disc holder (on Flynn’s back) to secure the device
3. Once placed, the unlit circle in the middle of the device begins to light up sequentially
4. The full circle is completely glowing, showing the activation is complete.
Figure 2. Screenshot from TRON:Legacy where A Siren removes a new identity disc from a
stand (left). Another Siren placing the identity disc onto Sam Flynn (right).
Unknown details: These sirens work in the armory to prepare players for the disc wars, but for
regular programs, why would they need a new disc? Are these discs made specifically for
battle, or are they all universal. Can programs come into the armory with their own disc?
8
Task Two: Activate Battle Mode
1. Disc is removed off of back
2. Disc begins to glow brighter
3. Helmet begins deployment
a. Helmet glass is materialized in front of face as protection
Figure 3. Screenshot from TRON:Legacy where Sam Flynn removed the disc off his back whilst
activating the helmet.
Unknown details: I would like to know how the discs do not hurt the user/program
themselves. It is shown they can be used like chainsaws with blades, but they are still
grippable. Also, how are the special weapon types activated or programmed into the device?
9
Task Three: Reading Memories
1. Disc removed from back of user/program
2. Disc held parallel against ground
3. Disc hologram activated
a. 3D image of user/program face is projected
b. Information that I can’t decipher is shown, but it looks like TV static.
Figure 4. Screenshot from TRON:Legacy where a program removes a disc off of Sam Flynn’s
back (left). Clu is given the disc (middle). Clu reads the memories of the user (right)
Unknown details: Based off of other scenes, the disc seems to automatically show the 3D
head of the user/program, but the next holograms after must be manipulated in a way I can’t
figure out a pattern for. Discs appear to give a variety of information but the imagery shown
does not reflect that well. Only when the characters say what is going on, then there is an
understanding of what the device is doing.
10
Environmental Analysis
Task One Environment: The Armory
The Armory is underneath the arena where programs play death games. The room is
very large, and is dimly lit. The room colors are all in the shades of blue. There are 4 Sirens
working, each wearing the same white glowy outfits. The room is very symmetrical and has a
lot of geometric shapes. On the walls facing Flynn’s right and left side are two pods where the
Sirens rest until they are ready to prepare a game contestants. The walls have hidden
compartments that have the armor for the contestants.
Figure 5. Screenshot from TRON:Legacy: The amory
11
Task Two Environment: The Arena
The Arena is a space that can be configured into different scenes depending on what
game is being played. Task two is performed during disc wars. The disc wars arena has several
transparent rooms for each player to face off against another. These transparent rooms are
large enough for players to perform aerial attacks and throw their discs around. The rooms
themselves are also blue in tint. The rooms constantly shift locations to find a new player after
one has been eliminated. After most players are eliminated, the rooms combine so the last two
can have a final standoff game. The room is able to change its gravity as well. There are also
added features to make the games more interactive like this jump pad below.
Figure 6. Screenshot from TRON:Legacy: The arena
12
Task Three Environment: Clu’s Ship
Clu’s ship has a lot of shades of brown and orange. This matches Clu’s outfit along with
his henchmen. This room has a lot of lines and geometrical shapes similar to the armory. There
is a lot more equipment shown as well. In another scene it is shown that the room can protect
the programs running the equipment by providing a large, metal-like shield above them. The
entrance also is like a sliding door. This room is heavily guarded.
Figure 7. Screenshot from TRON:Legacy: Clu’s ship
13
Visualizing Your Data
Empathy Map
Task One: Battle
Figure 8. Screenshot from TRON:Legacy where Sam Flynn realizes the disc is a weapon
This empathy map reflects the moment where Sam Flynn realizes he needs to fight to survive
in this arena. He was faced with an opponent who has had previous experience in these types
of battles.
14
Task Two: Reading disc memories
Figure 9. Screenshot from TRON:Legacy where Sam Flynn meets Clu for the first time
This empathy map is the moment where Sam Flynn meets Clu for the first time. At first Sam
Flynn thought Clu was his father, but he is revealed to be a clone.
Reflection on empathy map
The empathy map shows how quick of a thinker Sam Flynn is. He faces a lot of confusion when
entering the Tron world because it's a separate reality of his own, yet he was able to quickly
adapt to it with the assumptions he had prior to entering. Outside of the Tron world, he seems
to normally be a very prepared individual, for example his data heist. He had everything ready
in order to get what he needed and escape. Whereas within the Tron world, he has to be on his
toes constantly.
15
Extraordinaire
Figure 10. Screenshots from TRON:Legacy
This character card is dedicated to Sam Flynn.
Main scene: Sam is using a turrent to fight off the main antagonist, Clu, and his henchmen.
Sam is excited here to use the weapon and seems fearless.
Surprising scene: Sam is jumping from a building using a parachute. This shows he's a risk
taker and adventurer seeker.
Detail scene: Sam is hugging his father after years of not seeing him. Shows he has people he
loves and cares for. He is also showing his softer side.
16
Alternative scene: Sam is trying to get into a building and bypass their security. This shows
Sam being sneaky, but also adept at using tools to help him. He’s determined to get inside
without being caught.
Reflection on Extraordinaire
When understanding a character it's important to look at them from different perspectives to
get a better image of who they are. The character card I created definitely made me realize a
couple things about Sam Flynn that I didn’t realize before. My initial thoughts about Sam was
that the movie didn’t really show his personality through dialogue, but you can understand his
personality through his actions. I realized he’s kind of silly and a quick thinker. His approach to
problems is definitely outside the box. Despite him being 27, he seemed quite immature in his
portrayal because he seemed to live only in the moment and dwell on his past.
17
Hierarchical Task Analysis
V1 HTA
18
19
V2 HTA
Reflection on hierarchical task analysis
The HTA is a diagram that keeps changing throughout the design process. This method of
displaying the tasks is very organized and simple. It allows for easy feedback when there are
confusing elements or questions about the tasks broken down. The tasks I broke down are the
search mode and the battle mode. Both processes include the inclusion of new tasks and
modifications based on feedback from classmates.
20
Visualizing User Data Reflection
I believe that the empathy map and the character card are really great ways to build a user
persona. If I were to be designing a website or a visual I would want to create user personas to
get an idea of who I am trying to service/cater to. The task analysis is also a good way to make
sure websites flow simply. Previously I have used a visual task analysis to create an application
that involved a lot of different people and actions for a project. I found it beneficial in
understanding the complexity of the task. For this project, the same concept applied where the
complexity of the task was analyzed and I was able to formulate questions or realize holes in
the tasks.
21
Applying User Data to Select Screen Form Factor
Exploring Alternatives
The purpose of brainstorming was to quickly create several ideas despite their quality. In the
context of this project, I brainstormed individually and with a partner to aid in the process. This
way, I had different perspectives and inputs in my ideas. Some questions I wanted to address
were Where could a screen be placed that's not annoying to look at? What would you need a
screen for that the hologram feature can’t already do? Questions like these helped guide me
through the brainstorming process. It felt difficult not to think of already made items like a
smart watch or a tablet.
During the individual brainstorming activity, I thought of ideas such as varying holographic
projected screens emitting from the disc, or a projection from the center of the disc. With each
holographic projection idea, they would project in different directions depending on their use,
such as getting directions would be a project ahead of the user.
While with my partner we came up with an AR type environment where the user wears
goggles and they can create an AR environment to show information, memories, items, people,
etc. They can charge the view with who else is wearing the goggles around them. Another idea
was to have the screen on the goggles.
Brainstorming itself is a very important prototyping skill. Without brainstorming there would
be no prototypes. Group brainstorming can be tricky because people like to talk over each
other, however rolestorming can make brainstorming more interactive and beneficial.
Rolestorming helps with developing the gaps in ideas. This improv technique is more
collaborative and interesting. It is likely that the result in the activity would be questions that
22
can deepen the concepts created. Rolestorming can be disadvantageous if people are not
contributing to the activity.
Brainstorming Reflection
Brainstorming is very beneficial in group projects. A more specific example could be in
advertising. If done in a group the ideas will be very diverse. It’s important to get different
perspectives when creating content to be shared to the world. There are often designs that
have ignorant designs, simply because they only had one person in mind while brainstorming.
Final Screen location and size
I decided to go with the screen on the goggles/AR visuals. This screen is being put as an
additional goggles feature. Before, the helmet had a pair of goggles that didn’t do anything but
provide eye protection. These goggles are a separate design and deployment that depends on
the goal at hand. The battle mode goggles will also have a separate feature of locating
enemies (lock on feature), gauging speed, and giving directions. In order to deploy the goggles,
the user must take a chip out of the disc and place the chip on the side of their face, between
the eyes and ears.
For searching they would say, “Activate Search” and the goggles will deploy. To search for
people or items, they must also say “Search for _____” and the search will activate. For regular
battle they would say, “Activate Combat’ and the helmet goggles will deploy. To lock onto an
enemy, the user must speak and also say “ Lock onto enemy (and mention the
location/proximity)”.
The screen size will be large goggles frames, like ski goggles. When directions are given, the
AR technology would be used. Similarly with locking on. The goggles will change the
23
interface to provide feedback as well. There will be loading signs, and color indicating the
search is loading or is done.
Brainstorming evaluation Reflection
To narrow down the amount of ideas I've created, I looked at common themes between the
ideas and how helpful/ flexible the ideas were. Ideas with projection screens felt constricting
when used in other scenarios, like if the users had to use the disc and multitask. Those ideas
seemed cumbersome. The ideas relating to AR/goggle screens I felt were more practical.
24
Low Fidelity Paper Prototype
Low Fidelity Version 1
In order to create the low fidelity prototype, I used a sketchbook with pencils and markers to
show colors.
Version 1: Focus - Search Mode
Activate Search
“Search for key”
25
(goggle view)
Follow directions
Complete search
26
Version 2: Battle
Retrieve disc & Activate Combat
mode
Wait for disc to glow
Wait for helmet to deploy
Voice command “Lock On”
27
End Results
Evaluation of Low Fidelity paper prototype
Pre-Planning
What design questions do you have about your prototype?
- How can I incorporate the disc more into the design?
- What are some limitations?
28
What specific question did you want to learn from your evaluation?
- How can the disc’s original use be enhanced by the goggles without taking away the
entire use of the disc itself.
What “role” did your user take? What information did they receive about the user?
- The user is performing the actions.
What task(s) did your user perform?
Task 1: Looking for an object
Task 2: Fighting an appointment
What compromises did you make with your prototype, and how did you help your user
overcome them?
- Keeping track with enemies can be troublesome, to overcome this, arrows and color are
used to track.
How did you document your partner's actions?
- I took note though google docs comments
Results from Low Fidelity paper prototype Evaluation
➔ Add more disc features
➔ Pulling "item" out of disc to activate the screen goggles
➔ Add speech feedback, like audio bars
29
Low Fidelity Version 2
Summary of Changes from V1
I made some substantial decisions when reviewing the version 1. Firstly I change the activation
for both battle mode and search mode. Before it required speech alone to activate the deceive.
The problem with this, is the goggles and helmet spawned out of nowhere. So I was
suggested by my partner that the goggles/screen device be a part of the disc. Now to activate
it, the users must place the sticky chip piece on their heads to spawn the screen out of that.
Another change I made was adding more feedback. I added a visual audio wave to show the
goggles are listening to the user speak.
In order to create the low fidelity prototype, I used a sketchbook with pencils and markers to
show colors.
Added sketches/Version 2: Focus - Search Mode
red means revised part
Activate Search
30
“Search for key”
31
(goggle view)
Follow directions
32
Complete search
33
Version 2: Battle
Retrieve disc & take sticky chip
out
1
Apply sticky chip to between
eye and ear
2
Wait for disc and helmet to
deploy
3.1-3.2
Voice command “lock on”
- When enemy moves left or
right, their location in
highlighted still
2.21
34
Throwing disc
- Blue glow in screen show
“thrown” status
- Light Blue arrow shows
trajectory of disc
- Yellow glow in screen
shows “caught” status
4-5
35
End Results
Reflection on Low Fidelity
Some things I was thinking about adding more were incorporating more of the disc
functionalities with the goggles more. I felt like the goggles were becoming the main
focus/device so I want to balance both parts. Another thing I was thinking about was what
other information can the goggles gather from the user’s view. Some ideas were similar to
game mechanics, with enemies having life bars and other enemy related information.
The prototyping skill used this week was sketching. Sketching has always been such a top tier
tool used to brainstorm ideas. Sometimes words are not enough to get the proper image down.
36
While sketching the tasks I have made, I also came across timeline issues with my HTAs. For
example, I had a difficult time trying to sketch things that are optional tasks, or simultaneous
tasks. To do this I created several sketches and also corrected the HTAs. Sketching brought out
the hidden errors I have previously made. Even while not working on the assignment, sketching
came in handy. If I were to daydream and come up with an idea it was easy to sketch it so I
wouldn't forget. An issue I did come across was when drawing the HTAs. I was unsure how to
draw the start of an individual task, or the end of the individual task. For example, drawing the
“waiting” part. I was thinking of drawing a before and after but it seems simpler to just draw
the after.
Sketching is great for developing any prototype or idea. When trying to convey ideas to others,
sketching is definitely a great medium to help communicate that idea. Sketching for creating
apps is an example of where it’s applicable and appropriate to use. When working with
software engineers in developing an app, having a basic understanding of the design will
increase the likelihood that the design is close to what was described on paper, rather than just
communicated with words alone.
37
Medium Fidelity Prototype in Slideware
Medium Fidelity V1
To create the medium fidelity prototype I used figma’s prototyping tool. I included textboxes,
and images from stock photos to create the scenes. Some objects were cropped and edited to
add effects.
38
Search Mode V1
39
40
41
Battle Mode V1
42
43
44
Evaluation of Medium Fidelity Slideware Prototype
Pre-Planning
What design questions do you have about your prototype?
- What are features missing on my prototype?
- Where are there parts that need better feedback?
What specific question did you want to learn from your evaluation?
- Is the interface effective?
What “role” did your user take? What information did they receive about the user?
- The user is wearing the goggles and interacting with the device.
What task(s) did your user perform?
Task 1: Finding a Key
Task 2: Fight enemy
What compromises did you make with your prototype, and how did you help your user
overcome them?
- It was difficult to show movement, so I included “swooshes” to represent that.
- Showing the screen vision was difficult. I wanted to show the goggles design and the
first person view. So started off with the regular goggles shown, and then moved to a
first person view.
How did you document your partner's actions?
- Through figma comments.
45
Medium Fidelity V2
Summary of changes from V1
After discussing with classmates about my medium fidelity, I made quite a few changes to the
file. Firstly, I created a consistent activation for the goggles. For search mode V1 it was unclear
how to activate it because the Battle mode started off with the addition of a chip and some
steps. Another change was the colors I chose to highlight the lost item. Before it was purple,
and now it’s red. The red makes the items more visible than the purple. I also added a mini
map to help give better directions to the user. I deleted the white sheen look on some of the
images. It was unclear what that sheen meant. It was supposed to be the goggle view, but
because this is a mixture of AR and interface it was an unnecessary detail.
For Battle mode I also deleted the white sheen screen. I added in a counter on the left view of
the user to clarify how the count system works. Another addition was to show what the
“armed” status looks like.
46
Revised low fidelity prototype
Search Mode V2 -red means revised part
47
48
49
50
Battle Mode V2
51
52
53
Reflection on medium fidelity with slideware
My original thought about using slideware for creating medium fidelities was there are better
options. I watched videos about different tricks and tools to make the fidelity look good and my
impression changed. Powerpoint and Google slides offer a lot of options to make their tools
and programs able to compete with other web tools such as Figma. What is also beneficial is
that most people have knowledge of how to use Powerpoint and google slides so there is not
much of a learning curve. Both slidewares are great to use in a pinch as well. For collaboration
they offer a lot of possibilities that help enhance a team’s productivity.
To create my medium fidelities I used figma. I used it because I was already familiar with their
tools, more so than powerpoint. My medium fidelity didn’t require any buttons or any
prototyping on figma which made the assignment simple. I have seen how to link slides on
powerpoint and I do prefer figma for the visuals on how linking each component looks. What I
do appreciate about Powerpoint is the simplicity of their program, but also there is a wide
variety of capabilities available if you search for them. The documentation is helpful and the
community who uses powerpoint is very large, so there should be no issues when using the
software.
Using slideware for creating medium fidelities is great especially when you do not have the
time to learn a new software or have the money to buy a software dedicated for creating
medium fidelities. I can see myself using slideware when working with those who do not use
figma.
54
Storytelling
Storytelling V1
Brief description
Sam Flynn locates his father’s disc and escapes successfully.
Synopsis
Sam Flynn has reached the “The Grid” world and is trying to escape with his father. He comes
across several obstacles that prevent him from escaping along with his father, but he also
meets new friends while being in “The Grid”. In order to leave the Grid, Sam needs his father’s
disc but it was taken by his father’s clone Clu. Since Clu is trying to prevent them from
escaping he throws the disc into the abyss where rogue programs exist. Sam uses the disc to
find his father’s disc, and also to scout the area for the dangerous programs lurking in the
abyss. From there, he escapes in a jet towards the real world.
55
Story Visualization
56
Brief description
Revolution in the Grid against Clu’s tyrannical rule.
Synopsis
Clu’s tyrannical rule has caused The Grid’s people to revolt against him. Beck, a program, is
one of many who have had other friends die at the hand of Clu and his henchmen. Beck looks
up to Tron, who was a hero from the past who stood up against the MCP (master control
program). Unfortunately for Beck, he was in the middle of a battle and his disc had suffered
major damage. He was able to escape to an underground city of outcasts. There he finds
programs that can help upgrade his disc. With the new upgrade he can now fight multiple
enemies once and lead the revolution into success.
57
Story Visualization
58
Brief description
Murder mystery with 8 people and a dead body.
Synopsis
It’s a cold day in the suburbs of Chicago. Around noon Anthony and his wife invited 3 college
friends from way back to have dinner and a small reunion. Each friend brought a different dish.
As the night went on, people started to arrive. Each friend who came is currently very
successful in their current work. From business to engineering, to doctors, they were all very
successful. As they ate their dinner, the sky got darker and darker. The wind got louder and
louder, and a storm had arrived. Lighting and thunder struck often, and to a point when the
electricity went out. Suddenly, there was an eerie silence. When the electricity came back on,
there was a body laid out on the staircase. Everyone was shocked, besides the wife. Amanda
(the wife) was a detective. She decided to use the disc the engineer brought as a fun party trick
earlier, to solve this murder.
Story Visualization
59
Brief description
A highschool is kidnapped and escapes with the help of the disc.
Synopsys
Walking home from school, young Trish could see a man in the distance following her home.
To confirm that she circled the block in her neighborhood 3 times to see if he was still
following. Not knowing what to do next, she calls her father while going on her 4th circle
around. Her father said to use the disc he had given her for her 16th birthday just in case, and
to also go to the police station, but he was abruptly cut off from the attacker. The man hit Trish
in the head and she was knocked out. Hours later, Trish woke up in a warehouse. Fortunately
she had all her stuff besides her phone. Unfortunately she does not remember much other than
her name. She rummages through her bag, and finds the disc. From instinct, activates the
battle mode, where she can see others around her. From here she sneaks around the
warehouse avoiding any nearby people. As she navigates through the warehouse and escapes,
her memories come back.
Story Visualization
60
Storytelling Evaluation
Story Title Sam Locates Fathers Disc
Technology saves the day
Setup
Once upon a
time there was
A boy, Sam, looking for his father In the grid.
Event
One Day Sam finds Clu- his fathers clone, who trapped his real father.
Consequence
Therefore /
Because of that
Sam fights Clu. Clu knows they need his fathers disc to escape the
grid, so he throws it in the abyss and beats Sam up.
Therefore /
Because of that
Sam dives into the abyss and uses his own disc features to find his
fathers disc.
Therefore /
Because of that
Quorra was also there trying to find the disc, but she was able to
help save Sam after he dived into the abyss
Resolution
Until Finally They teamed up to fight Clu and save the father.
Which section is too long?
- The exposition is long
Suggestions / Comments:
- Quorra needs a better introduction
61
Story Title Revolution in the Grid
Technology saves the day
Setup
Once upon a
time there was
a tyrannical rule from a program named Clu. Programs in The Grid
hate him.
Every day Beck and his comrades fight Clu’s army
Event
One Day Beck’s teammate dies in battle.
Consequence
Therefore /
Because of that
Beck runs out to fight but gets defeated.
Therefore /
Because of that
Someone brings him to safety and repairs his injuries. He receives a
disc upgrade to help fight against Clu from the mysterious
individual.
Therefore /
Because of that
He leaves the underground area and returns to his comrades.
Resolution
Until Finally He shares the upgrade and everyone is able to fight against the evil
Clu.
Suggestions / Comments:
- To get the upgrade, it was too long.
- Mysterious figure reveal might take too long to explain
62
Story Title Murder Mystery
Showcasing the future
Setup
Once upon a
time there was
a Couple
Event
One Day They decided to have a dinner party, inviting three other guests.
One being an engineer. It was storming outside
Consequence
Therefore /
Because of that
The engineer showed off his new device that can do various things
to assist people
Therefore /
Because of that
The electricity went on and off, and it seemed that one guest was
attacked by an intruder
Therefore /
Because of that
Amanda, the wife uses the disc to find the attacker
Resolution
Until Finally Tony uses the disc to attack the man.
Which section is too long?
- too many details in the exposition
Suggestions / Comments:
- focus on the interaction with the device
63
Story Title Kidnapping
Technology saves the day
Setup
Once upon a
time there was
Young teenage girl named Trish
Every day She’d walk home from school
Event
One Day A man began to follow her
Consequence
Therefore /
Because of that
She calls her dad but gets attacked
Therefore /
Because of that
She gets taken to another location, a warehouse. She has amnesia,
but she has her belongings (which includes the disc)
Therefore /
Because of that
She uses her disc to attack and avoid the bad man, she finally gets
her memory back.
Resolution
Until Finally She uses the disc to locate her father to get home safely.
Suggestions / Comments:
- change story location, she could be in a forest maybe
64
Storytelling V2
Brief description
Revolution in the Grid against Clu’s tyrannical rule.
Synopsis
Clu’s tyrannical rule has caused The Grid’s people to revolt against him. Beck, a program, is
one of many who have had other friends die at the hand of Clu and his henchmen. Beck looks
up to Tron, who was a hero from the past who stood up against the MCP (master control
program). Whilst fighting the enemies with his close comrade, Moni, she died. Out of anger
Beck ran up to avenge but was defeated. He was then pulled off by an unknown man. The man
patched him up and gave him a disc upgrade to share with his friends. With the new upgrade
he can now fight multiple enemies once and lead the revolution into success.
Story Visualization
65
Brief description
Murder mystery with 8 people and a dead body.
Synopsis
It’s a cold day in the suburbs of Chicago. Around noon Anthony and his wife invited 3 college
friends from way back to have dinner and a small reunion. Each friend brought a different dish.
As the night went on, people started to arrive. Each friend who came is currently very
successful in their current work. From business to engineering, to doctors, they were all very
successful. As they ate their dinner, the sky got darker and darker. The wind got louder and
louder, and a storm had arrived. Lighting and thunder struck often, and to a point when the
electricity went out. Suddenly, there was an eerie silence. When the electricity came back on,
there was a body laid out on the staircase. Everyone was shocked, besides the wife. Amanda
(the wife) was a detective. She decided to use the disc the engineer brought as a fun party trick
earlier, to solve this murder. She was able to track the enemy by discovering the shoe size and
make. Her husband was able to apprehend the man because he was ex-military. He was able
to use the disc the engineer brought as a fun party trick earlier, to solve this murder.
Story Visualization
66
Storytelling reflection
Changes from V1 to V2
The changes between V1 and V2 I changed some details of my story. I primarily changed the
stories that I planned to develop. For the first I provided more detail on the event that led Beck
to find Tron. The second story I provided a conclusion on how Amanda and Anthony were able
to solve the mystery.
Red means revised part
Before After
Clu’s tyrannical rule has caused The Grid’s
people to revolt against him. Beck, a
program, is one of many who have had other
friends die at the hand of Clu and his
henchmen. Beck looks up to Tron, who was a
hero from the past who stood up against the
MCP (master control program).
Unfortunately for Beck, he was in the
middle of a battle and his disc had suffered
major damage. He was able to escape to an
underground city of outcasts. There he
finds programs that can help upgrade his
disc. With the new upgrade he can now fight
multiple enemies once and lead the
revolution into success.
Clu’s tyrannical rule has caused The Grid’s
people to revolt against him. Beck, a
program, is one of many who have had other
friends die at the hand of Clu and his
henchmen. Beck looks up to Tron, who was a
hero from the past who stood up against the
MCP (master control program). Whilst
fighting the enemies with his close
comrade, Moni, she died. Out of anger Beck
ran up to avenge but was defeated. He was
then pulled off by an unknown man. The
man patched him up and gave him a disc
upgrade to share with his friends. With the
new upgrade he can now fight multiple
enemies once and lead the revolution into
success.
67
It’s a cold day in the suburbs of Chicago.
Around noon Anthony and his wife invited 3
college friends from way back to have dinner
and a small reunion. Each friend brought a
different dish. As the night went on, people
started to arrive. Each friend who came is
currently very successful in their current
work. From business to engineering, to
doctors, they were all very successful. As
they ate their dinner, the sky got darker and
darker. The wind got louder and louder, and
a storm had arrived. Lighting and thunder
struck often, and to a point when the
electricity went out. Suddenly, there was an
eerie silence. When the electricity came back
on, there was a body laid out on the
staircase. Everyone was shocked, besides the
wife. Amanda (the wife) was a detective. She
decided to use the disc the engineer brought
as a fun party trick earlier, to solve this
murder.
It’s a cold day in the suburbs of Chicago.
Around noon Anthony and his wife invited 3
college friends from way back to have dinner
and a small reunion. Each friend brought a
different dish. As the night went on, people
started to arrive. Each friend who came is
currently very successful in their current
work. From business to engineering, to
doctors, they were all very successful. As
they ate their dinner, the sky got darker and
darker. The wind got louder and louder, and
a storm had arrived. Lighting and thunder
struck often, and to a point when the
electricity went out. Suddenly, there was an
eerie silence. When the electricity came back
on, there was a body laid out on the
staircase. Everyone was shocked, besides the
wife. Amanda (the wife) was a detective. She
decided to use the disc the engineer brought
as a fun party trick earlier, to solve this
murder. She was able to track the enemy by
discovering the shoe size and make. Her
husband was able to apprehend the man
because he was ex-military.
68
Storyboarding
Storyboarding V1
Script #1: Revolution
Narrator: “The Grid is a digital world with programs and human users, currently the people in
a revolt against the tyrannical rule of Clu.”
*Beck sees friend charge to crowd of enemy and dies from being shot*
Beck: “JAsPER NOOOOO!”
Enemy 1: “There’s still one left, get him!!!”
*they begin fighting it out”
Beck wakes up from being knocked out and he’s been healed.
Beck: “Who are you”?
Tron: “I am Tron, I saved the Grid once before”
Tron: “I saved you because I saw you in me, my past self, a revolutionary.” I have been inspired
by your grit! I have been working on a two new disc features”
Tron: The first feature will let you detect enemies around you, you can lock on and view
incoming objects.
Tron: The second feature will let you find any object or person with a voice commanded search.
All you have to do is put the chip between your eyes and ears, and say either “activate search
mode” or “ activate battle mode” to begin.
Narrator: With this new upgrade, Beck is able to find his comrades, as well as fight his
enemies with no fear in mind. His goal now is to share this upgrade with his comrades.
69
Friend dies in battle.
Beck runs into battle for
revenge
70
They tussle.
Beck loses the fight but is
not dead
Someone saves Beck and
removes him from the battle
area.
71
Beck wakes up on a table.
The person who saves him is
a historical hero, Tron. Tron
gives him a disc upgrade to
win the war against Clu.
Beck goes back to his
teammates and uses the disc
to locate them.
72
He finds his teammates.
Beck is able to have his
revenge.
73
Script #2 Murder Mystery
Narrator: One cloudy afternoon, Amanda and her husband Tony have invited 3 friends from
college for dinner.
As the guest settles in, Gio the engineer shows off his new invention: the Identity disc.
Gio: “This disc can hold a lot of information, and also do a lot of helpful things! It can search for
any object or person, or also help you locate enemies!”
Narrator: The small group was very impressed. As the night went on, a storm began to brew.
Soon enough, lighting would strike often.
Narrator: And just like that, *final lightning bolt hits* The electricity is out.
Amanda: OH MY GOSH!!
Narrator: As soon as the electricity came back on, it appears that the guest, Trish, has died!
Amanda: “Before I retired, I was an investor. It looks like she has been hit in the head causing
blunt force trauma.”
Tony: I think there are muddy footprints around her, but they fade away.
Amanda: “I have an idea! Gio, let me borrow your device.”
Narrator: Amanda took the advice and placed the chip from the disc on the side of her face.
74
Amanda: “Activate search mode. I can tell these boots are timbs. Search for the nearest Timbs
in size 10”
Amanda: The search results show that the man is currently upstairs hiding!
Narrator: With the new information given, Tony took the disc and used Battle mode.
Tony: “Activate battle mode”
Narrator: with that he ran upstairs to apprehended the criminal. He locked onto his location
quickly, to see where he would run off to.
It was rather easy for Tony to apprehend him , since he was ex-military.
As the police came, they realized Trish was simply knocked out. She was attacked because her
husband was into shady business and got her caught up.
Amanda greets guests.
75
Rain storm begins
Guest shows off disc
76
Storm continues
Electricity goes out, a body
is found
77
Amanda finds footprints
and figures out what shoes
would make them
Amanda uses the disc to
find the shoes
The man with those shoes
are upstairs
78
Military husband uses disc
to fight the man
Husband wins the fight
79
Storyboarding Evaluation
Story Title
Beck’s revolution
Story Type
Technology saves the day
What are the major plot points in the story?
Main character is given a new weapon, fights them and wins.
Where should more detail be added?
- make turning point more detailed
- detail goggle view more
- show front of him with goggle view
- add detail to differentiate characters
- represent the upgraded weapon differently from original
- add detail to dead friend to show he’s dead
80
Story Title
Amanda The Investigator
Story Type
Technology saves the day
What are the major plot points in the story?
A guest friend dies, and the party attempts to find the killer. They are able to find and fight him
using the disc.
Where should more detail be added?
- add effects to action scene when fighting killer
- add detail to show difference in characters
- goggle involvement in story
81
Storyboarding V2
I chose to develop the Murder Mystery plot because of the stronger story line.
1. Amanda and her husband
greet guests outside
2. They all go inside
3. A storm begins
4. Gio shows off his device from
work
5. He talks about its search and
battle features
6. They're impressed
82
7. Lightning strikes the tree
nearby
8. Electricity goes off briefly
9. A body of one of the guests
appears when the lights go
back on
10. Amanda points out shoe
prints
11. Amanda thinks.
12. She realizes she can search
for the shoes that made those
prints with the disc
83
13. Amanda takes the disc
14. She takes the chip out
15. She puts chip by ear
16. She activates search mode
17. Googles are searching for
shoes
18. Shoes are found
19. Shoes are down the hall
20. Tony, her husband stops her
from continuing
84
21. He explains he can fight him
because he has fighting
experience
22. Amanda gives dsc
23. He activates battle mode
24. He's ready
25. He begins to open door
26. Intruder appears
27. Intruder runs, but Tony uses
lock on feature
28. They chase him outside
85
29. Outside
30. Tony throws disc
31. Disc thrown and hits him
32. He’s knocked out
33. Police come
34. The woman survives and
reappears
86
Storyboard Reflection
Changes from V1 to V2
The changes I have made to create storyboard V2:
➔ I chose the murder mysery story.
➔ I added minimal details to the characters to help with differentiation between
characters.
➔ I added additional detail scenes.
◆ Scenery setting details
◆ Device interactions
◆ Dialog between characters
◆ Transitions to new scenes
◆ Movement from characters
Class Evaluation
Feedback received from classmates was praise for the type of story. They believed the plot
was strong, but had questions about the device interactions. I needed to focus more on how
the device screen is shown through the storyboard.
Reflection
When creating a storyboard I realized how difficult it is to create the scenes from my head. I
can imagine a detailed scene, but it was difficult to translate that to paper. I feel like my sketch
skills would need to improve more in order to get the full details I want to incorporate into my
story video. Another realization I had is that I need to flesh out the action scenes well enough. I
87
will probably need to have animation to show actions like fighting or chasing other characters.
Despite these analysys, I do think this activity was fun. When creating the script for the
storyboard, I also realized how important a narrator will be for my concept ideas. My first idea
with the revolution, there was a lot “showing” rather than explaining. But, it still needs an
outside voice to explain the premise. The second idea with the murder mystery, there was
definitely a lot more explaining to do other than the dialog between the characters in the story.
The outside forces needed explanation along with the ending, to give a conclusion.
Storyboards are a great resource to help plan for a film or video. It is like a visual flow chart of
what scenes will look like, which includes the angle, frames, and the specific details that must
be included. When a storyboard is accompanied with a script, the ideas are easier to
communicate to others what the story will be about and look like. At this state, feedback
should be fairly easy to give as well, since the fidelity is low and things are able to change
easier. Storyboards are also good for reminding the creators which scenes need what edits to
make the idea clearer. For example, if a scene needs animation to display a specific action, it
can be easily noted.
Storyboarding can be used in other instances such as doing a research project that requires a
study. If there is a procedure that must be done, and there's a script needed, a storyboard can
help show visually what the study will look like with participants. For example, for a HCC
related project, visual elements are often tested. It's necessary to know the order and
environment given in testing.
88
Video Draft 1
Video Draft 1 Key Frames
The first video draft included the same images from the storyboard. The video draft has
narration and voice dialog between characters, along with sound effects such as the storm,
thunder, and door creaking noises.
Amanda and her husband
welcome guests into their
home. It’s beginning to storm.
Suddenly lightning strikes
and the electricity is out.
89
A body is found, and there
are footprints that can be
traced back to the culprit.
The enemy is found by using
the disc for assistance.
Using the disc, Tony was able
to knock him out.
90
Video Draft 1 Evaluation
The feedback received from peers:
➔ Video is too long.
➔ Characters need more difference in appearance.
➔ Device needs more screen time.
➔ Add effects to the action scene when fighting the killer.
91
Video Draft 1 Reflection
When I began to draft my sketches, I started using Blender to create 3D models of the scenes.
I realized I did not have the tools to do what I envisioned. Initially I wanted to draw over the 3D
models, but I did not have a digital sketch pad/tablet to make that happen at the time. I
reevaluated my sketches and deemed them thorough enough to be in the draft itself. Because
the previous sketches were already made, I was able to focus primarily on the audio: dialogs
and sound effects.
I would have preferred to do the dialog with actual voice actors, but I did not have any people
willing to do that, and my own voice would not have fit every character so I opted to use
natural readers/ voice to speech. Using voice to speech was very simple, my only issue is I ran
out of free downloads on one website and had to find another. The sound effects were a fun
process. I had to look through libraries online. A lot of the free audio effects were quite silly,
where the sound would be very extreme or weird and unexpected.
With the feedback given, I decided to move away from the sketches and find a new medium to
animate my project. Certain scenes definitely would be fleshed out and translated better to the
viewers once it is animated.
92
Video Draft 2
Video Draft 2 Changes
The changes I have made to create video draft 2:
➔ I used Animaker to create the video instead of having my sketches.
➔ I used Figma and Clipart to create the background scenes.
➔ I removed the scene where the woman reveals she’s not dead due to timing.
➔ Changed the name of the woman to Julia, and changed the name of the engineer to
Miles.
➔ Added more detail to the scene where the electricity goes out.
93
Video Draft 2 Key Frames
Miles begins discussing the device from work.
94
He shows off the device.
After the electricity goes out, Julia is found on the ground who appears to have been attacked.
95
Amanda suggests that she uses the device to find the shoes of the man who hit the friend. She
takes the sticky chip out of the device and places it between her eyes and ear.
96
Goggles activate when she activates search mode and searches for the shoes the culprit wore.
The display gives directions.
97
Amanda and Tony are led to this room where the intruder hides.
The intruder runs out the room while Tony activates battle mode.
98
Tony uses battle mode to lock on and attack the intruder by throwing the disc.
Police come to arrest the intruder.
99
Video Draft 2 Evaluation
The feedback received from peers:
➔ Fix audio timing when Amanda activates the goggles with the chip.
➔ Fix sound waves on goggles.
➔ Reduce the size of goggles on Tony and adjust location.
➔ Change the audio to fit the enemy better.
➔ Audio is too loud and distracting.
100
Video Draft 2 Reflection
Recreating the sketches in Animaker was a lot more difficult than I thought it would be. I had a
basic idea of how I wanted to create the scenes, but using every part of Animaker would not be
satisfactory. I decided that I would not use the backgrounds they provided, but instead to
create them myself. I used photopea, figma, and clipart to piece together the background
scenes. I either made the objects myself or used clipart. This part was fun to do considering I
made a couple things from scratch, like the device itself.
Animakers mechanics were difficult to use, and the more features you want to add the laggier
it got. When trying to play the video at specific times, it was annoying having to wait a while
and then adjusting, and then repeating the process again. I believe if I had the artistry skills, I
would have hand drawn everything instead.
What I did like about Animaker was that they had text to speech available. I was able to use
the dialog I have previously saved from another website, and still be able to edit the dialogs.
The voices were the same so it was really easy. I also appreciated that there was no limit on
the layering of features. I could place audio layers and backgrounds without running into issues
specific to layering.
101
Video Draft 3
Video Draft 3 Changes
The changes I have made to create video draft 3:
➔ I added more sound effects, such as police sirens.
➔ Version 2 had an audio mistake where the siren for the police was played in the
beginning and was too loud. I removed it from the beginning, and fixed the volume
of other audio files.
102
Video Draft 3 Edited Scenes
Siren audio has been removed from this part of the video.
Siren audio has been adjusted to a lower volume in this part of the video.
103
Video Draft 3 Evaluation
The feedback received from peers:
➔ Did not understand the purpose of the chip.
➔ Lock on feature was not clear.
➔ The scenes need music to give a thriller/suspenseful experience.
➔ Tony is not necessary to the plot, so make Amanda the primary user.
104
Video Draft 3 Reflection
In the next version I had to make new scenes and remove Tony as a user. I agreed with the
feedback that Tony is not essential to the plot at all. Also adding onto the mystery aspect,
some music would be great. Without the music, the vibe is kind of dry.
Some improvements I would make if I had the skill or time, would be making the rain have
movement. I used Photopea to create that scene and drew static rain droplets. I would try to
animate the rain myself by making a gif. Another change I would make plot wise, would be to
have a resolution of why there was an attack in the first place. Adding in those details would
make the story stronger, but also longer.
105
Final Video
Final Video Changes
The changes I have made to create video draft 3:
➔ Amanda became the primary and only user in the story.
➔ I fixed the audio levels and placement in the video.
➔ Added more detail to the scene where the electricity goes out.
◆ Added the character attacking Julia to clarify what happened to Julia.
➔ Some of the graphics were changed:
◆ I changed the gif where the device was listening to the user. However, I
made a mistake and couldn't get rid of the background of the gif.
◆ I added a moving gif loading sign when the device registers what the user
was saying.
➔ Some of the dialog was adjusted to clarify device use. I added audio lines to clarify
the point of the chip. The narrator explains it is meant to be the object that emits the
physical glasses.
➔ Music was also added. The songs create more of a dramatic effect to the story.
106
Final Video Link
https://umbc.box.com/s/bzj7ni3kqzo5m8tku6k8mk7yt3j8t4tp
107
Reflection and Conclusion
This project so far has been fun. I am creating a prototype of an interesting device from a world
that would be interesting to be in. This project allows for a lot of creativity and collaboration
that will help me make a project I am proud and passionate about. Through this project I
gathered research by watching movies and TV shows which are different from usual research.
After that initial phase, I began to see the characters from the movie in a different light because
of the empathy maps and the extraordinaire. I also began seeing plot holes or
misunderstandings in the movies and with the device itself. It was interesting to see the
different ideas that stemmed from classmates during the brainstorming, and it was also fun to
see how other students created their initial sketches and prototypes.
Some of my favorite parts of this project were the initial search, sketching, and building up the
medium fidelity prototype. During the initial search of devices I wanted to do something
nostalgic. Tron was one of the first ideas in my head because one of my favorite video games
had a Tron world in it. I was open to other devices but I knew this was the one. After selecting
Tron I went on to re-watch movies and read wikis about the main characters and the device.
Sketching was more fun when revising and viewing other’s sketches. I enjoyed seeing the
creativity required to create an easily understandable visual. I had an idea of how I wanted to
use a mixture of real items and paper and pen to do my sketches, but when trying to put it
together it wasn’t that presentable so I went with regular sketches. Seeing my classmates do
what I envisioned helped make my concept for the medium fidelity prototype come into
fruition.
I liked the medium fidelity prototyping because I was able to build a scene with different items
knowing it won’t have to look absolutely perfect. I was able to use different tools, like the
white background remover to create some of the props. After seeing my classmate’s
108
prototypes too I felt inspired, especially the ones that had working interfaces. With more time I
would like to include animations since my prototype does not have any interface buttons.
The storytelling and storyboarding process was a fun experience. I was excited to explore
another branch of my own creativity by creating fun stories. I wanted to implement things I
enjoy in real life, such as mysteries and action movies. Looking at classmates storyboard was
really cool because you saw their vision and then saw it being put together into a video.
This process was also inspiring because it gave me ideas of story mechanics I can add, or how
to better display elements in my own story.
Creating the videos was a more tedious process than I thought it would be, but I still learned a
lot from it and the importance of planning. Without the storyboard and feedback I would
probably have struggled a lot more when it came to the animation. Two of my biggest future
wishes would be to use real voice actors and also using a different animation format.
Overall, I believe the device I chose and enhanced does help the original users. In the movie
there were problems with finding people and items, and also several times enemies would
come out of nowhere attacking. With the inclusion of these features, Sam Flynn could have
saved more people and also been more efficient with his time.
109
Citations
Tron Wiki. Fandom. (n.d.). Retrieved March 28, 2022, from
https://tron.fandom.com/wiki/Tron_Wiki
Kosinski, Joseph. TRON: Legacy. Walt Disney Studios Motion Pictures, 2010.
110

More Related Content

Similar to prototyping final project.pdf

1. case study video games lvl 3
1. case study video games lvl 31. case study video games lvl 3
1. case study video games lvl 3Fraser Hardwick
 
Bb 8 run - a star wars video game
Bb 8 run - a star wars video gameBb 8 run - a star wars video game
Bb 8 run - a star wars video gameRoberto Falconi
 
10 open source / homebrew games for handhelds in 10 minutess
10 open source / homebrew games for handhelds in 10 minutess10 open source / homebrew games for handhelds in 10 minutess
10 open source / homebrew games for handhelds in 10 minutessRain Ashford
 
Video game case study
Video game case studyVideo game case study
Video game case studykieran Beal
 
A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)
A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)
A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)Sonny Brabez
 
Call of duty ghosts secondary research
Call of duty ghosts secondary researchCall of duty ghosts secondary research
Call of duty ghosts secondary researchrafiqfps
 
Case study
Case study Case study
Case study joe cole
 
Di3211291134
Di3211291134Di3211291134
Di3211291134IJMER
 
Level design and devlopment part 1 introduction to level design
Level design and devlopment part 1  introduction to level designLevel design and devlopment part 1  introduction to level design
Level design and devlopment part 1 introduction to level designDurgesh Pandey
 
Far cry 4 10 essential features it must have www.gamebasin.com
Far cry 4 10 essential features it must have   www.gamebasin.comFar cry 4 10 essential features it must have   www.gamebasin.com
Far cry 4 10 essential features it must have www.gamebasin.comGameBasin.com
 
MMORPG'S AND MOTION CAPTURE
MMORPG'S AND MOTION CAPTURE MMORPG'S AND MOTION CAPTURE
MMORPG'S AND MOTION CAPTURE Isaac Tingey
 
Ctek Multi 7000 - Top Notch Battery Charger
Ctek Multi 7000 - Top Notch Battery ChargerCtek Multi 7000 - Top Notch Battery Charger
Ctek Multi 7000 - Top Notch Battery Chargercageycharlatan194
 
Game Design for Storytellers
Game Design for StorytellersGame Design for Storytellers
Game Design for StorytellersPietro Polsinelli
 

Similar to prototyping final project.pdf (20)

1. case study video games lvl 3
1. case study video games lvl 31. case study video games lvl 3
1. case study video games lvl 3
 
Bb 8 run - a star wars video game
Bb 8 run - a star wars video gameBb 8 run - a star wars video game
Bb 8 run - a star wars video game
 
Black book
Black bookBlack book
Black book
 
10 open source / homebrew games for handhelds in 10 minutess
10 open source / homebrew games for handhelds in 10 minutess10 open source / homebrew games for handhelds in 10 minutess
10 open source / homebrew games for handhelds in 10 minutess
 
Video game case study
Video game case studyVideo game case study
Video game case study
 
A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)
A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)
A Breath From Earth - Gameplay Instructions (Imagine Cup 2009)
 
Videogames
VideogamesVideogames
Videogames
 
Videogames
VideogamesVideogames
Videogames
 
Call of duty ghosts secondary research
Call of duty ghosts secondary researchCall of duty ghosts secondary research
Call of duty ghosts secondary research
 
Case study
Case study Case study
Case study
 
Di3211291134
Di3211291134Di3211291134
Di3211291134
 
Level design and devlopment part 1 introduction to level design
Level design and devlopment part 1  introduction to level designLevel design and devlopment part 1  introduction to level design
Level design and devlopment part 1 introduction to level design
 
Far cry 4 10 essential features it must have www.gamebasin.com
Far cry 4 10 essential features it must have   www.gamebasin.comFar cry 4 10 essential features it must have   www.gamebasin.com
Far cry 4 10 essential features it must have www.gamebasin.com
 
MMORPG'S AND MOTION CAPTURE
MMORPG'S AND MOTION CAPTURE MMORPG'S AND MOTION CAPTURE
MMORPG'S AND MOTION CAPTURE
 
Ctek Multi 7000 - Top Notch Battery Charger
Ctek Multi 7000 - Top Notch Battery ChargerCtek Multi 7000 - Top Notch Battery Charger
Ctek Multi 7000 - Top Notch Battery Charger
 
1. case study
1. case study1. case study
1. case study
 
1. case study
1. case study1. case study
1. case study
 
Game Design for Storytellers
Game Design for StorytellersGame Design for Storytellers
Game Design for Storytellers
 
Week 10 Game Design
Week 10 Game DesignWeek 10 Game Design
Week 10 Game Design
 
Game Doc
Game DocGame Doc
Game Doc
 

Recently uploaded

Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130Suhani Kapoor
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsCharles Obaleagbon
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiSuhani Kapoor
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
Call Girls Bapu Nagar 7397865700 Ridhima Hire Me Full Night
Call Girls Bapu Nagar 7397865700 Ridhima Hire Me Full NightCall Girls Bapu Nagar 7397865700 Ridhima Hire Me Full Night
Call Girls Bapu Nagar 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Servicejennyeacort
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Narsimha murthy
 
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...narwatsonia7
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Douxkojalkojal131
 
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130Suhani Kapoor
 
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxIntroduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxnewslab143
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...Amil baba
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 

Recently uploaded (20)

Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past Questions
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
Call Girls Bapu Nagar 7397865700 Ridhima Hire Me Full Night
Call Girls Bapu Nagar 7397865700 Ridhima Hire Me Full NightCall Girls Bapu Nagar 7397865700 Ridhima Hire Me Full Night
Call Girls Bapu Nagar 7397865700 Ridhima Hire Me Full Night
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
 
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk GurgaonCheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
 
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
 
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
 
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
 
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxIntroduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 

prototyping final project.pdf

  • 1. Final Prototyping Project: Tron Identity Disc Enhancement Quinlan Kimble-Brown Mar 20, 2022
  • 2. Table of Contents Table of Contents 2 Introduction 5 Gathering User Data 6 Source Material 6 User Analysis 7 Task Analysis 8 Environmental Analysis 11 Visualizing Your Data 14 Empathy Map 14 Extraordinaire 16 Reflection on Extraordinaire 17 Hierarchical Task Analysis 18 V2 HTA 20 Reflection on hierarchical task analysis 20 Visualizing User Data Reflection 21 Applying User Data to Select Screen Form Factor 22 Exploring Alternatives 22 Brainstorming Reflection 23 Final Screen location and size 23 Brainstorming evaluation Reflection 24 Low Fidelity Paper Prototype 25 Low Fidelity Version 1 25 Evaluation of Low Fidelity paper prototype 28 Pre-Planning 28 Results from Low Fidelity paper prototype Evaluation 29 Low Fidelity Version 2 30 Summary of Changes from V1 30 Reflection on Low Fidelity 36 Medium Fidelity Prototype in Slideware 38 Medium Fidelity V1 38 2
  • 3. Search Mode V1 39 Battle Mode V1 42 Evaluation of Medium Fidelity Slideware Prototype 45 Pre-Planning 45 Medium Fidelity V2 46 Summary of changes from V1 46 Revised low fidelity prototype 47 Search Mode V1 47 Battle Mode V2 51 Reflection on medium fidelity with slideware 54 Storytelling 55 Storytelling V1 55 Storytelling Evaluation 61 Storytelling V2 65 Storytelling reflection 67 Storyboarding 69 Storyboarding V1 69 Script #2 Murder Mystery 74 Storyboarding Evaluation 80 Storyboarding V2 82 Storyboard Reflection 87 Video Draft 1 89 Video Draft 1 Key Frames 89 Video Draft 1 Evaluation 91 Video Draft 1 Reflection 92 Video Draft 2 93 Video Draft 2 Changes 93 Video Draft 2 Key Frames 94 Video Draft 2 Evaluation 100 Video Draft 2 Reflection 101 Video Draft 3 102 Video Draft 3 Changes 102 Video Draft 3 Edited Scenes 103 Video Draft 3 Evaluation 104 3
  • 4. Video Draft 3 Reflection 105 Final Video 106 Final Video Changes 106 Reflection and conclusion 108 Citations 110 4
  • 5. Introduction This project explores and expands upon the usage of the identity disc device used by programs and users in the world of Tron. The developed version of this device can be found useful to other users and programs in the future. Figure 1. Sam Flynn holding the identity disc in preparation for combat. This project was completed during Spring semester 2022 in the course HCC 613. This project was completed by Quinlan Kimble-Brown as a part of her MS degree in Human-Centered Computing. This project includes visualized user data, brainstorming documentation, and low and medium fidelity prototypes, as well as the interface designed for the device. Along with this are evaluations. This project is dedicated to improving the identity disc to make it more useful with the inclusion of screens. The screen will expand the usage and capabilities to improve the original goals of the device such as battle. The world of Tron is large and vaste, meaning that it’s necessary to have a device to help the user when enemies lurk around. 5
  • 6. Gathering User Data Source Material The information I gathered mainly comes from the movie “TRON: Legacy”. The disc was used mostly for battle, but other usage lacked move coverage. I researched the device through fan wikis as well as watching other Tron content such as “TRON: Uprising”. 6
  • 7. User Analysis User: Sam Flynn ➔ Human ➔ Male ➔ Age 27 ➔ Loves his parents, but grieves for them ➔ Reclusive ➔ Rebellious nature ➔ Able to digitize self into Tron world ➔ Son of creator of Tron world/The Grid ➔ Major shareholder of company ENCOM (father created ENCOM) ➔ Has background knowledge of computers ➔ Knows how to hack ➔ Went to fathers college ➔ Dropped out of college ➔ Has pet rescue dog ➔ Loves to ride motorcycle ➔ Hard for programs to tell if he's a program ➔ Received disc at armory ➔ Knows how to parachute Screenshot from TRON:Legacy of Sam Flynn Some information I wish I knew was how Flynn knew how to fight well. In the movie he was able to defeat several components in the games he played. I also want to know his level of understanding for code and game development. In the movie he was able to hack ENCOM and also get into his father’s computer. But beyond that there is nothing shown of his computer skills while in the Tron world. I would also like to know what the effects of being digitized is 7
  • 8. like. For example, it is possible to read another user's memory, but is it possible to alter another user’s memory like a program? Do all the rules apply to programs as to humans? Task Analysis Task One: Activating a new Disc 1. Disc is picked up by a Siren (female armory programs) 2. Disc is placed and rotated onto the disc holder (on Flynn’s back) to secure the device 3. Once placed, the unlit circle in the middle of the device begins to light up sequentially 4. The full circle is completely glowing, showing the activation is complete. Figure 2. Screenshot from TRON:Legacy where A Siren removes a new identity disc from a stand (left). Another Siren placing the identity disc onto Sam Flynn (right). Unknown details: These sirens work in the armory to prepare players for the disc wars, but for regular programs, why would they need a new disc? Are these discs made specifically for battle, or are they all universal. Can programs come into the armory with their own disc? 8
  • 9. Task Two: Activate Battle Mode 1. Disc is removed off of back 2. Disc begins to glow brighter 3. Helmet begins deployment a. Helmet glass is materialized in front of face as protection Figure 3. Screenshot from TRON:Legacy where Sam Flynn removed the disc off his back whilst activating the helmet. Unknown details: I would like to know how the discs do not hurt the user/program themselves. It is shown they can be used like chainsaws with blades, but they are still grippable. Also, how are the special weapon types activated or programmed into the device? 9
  • 10. Task Three: Reading Memories 1. Disc removed from back of user/program 2. Disc held parallel against ground 3. Disc hologram activated a. 3D image of user/program face is projected b. Information that I can’t decipher is shown, but it looks like TV static. Figure 4. Screenshot from TRON:Legacy where a program removes a disc off of Sam Flynn’s back (left). Clu is given the disc (middle). Clu reads the memories of the user (right) Unknown details: Based off of other scenes, the disc seems to automatically show the 3D head of the user/program, but the next holograms after must be manipulated in a way I can’t figure out a pattern for. Discs appear to give a variety of information but the imagery shown does not reflect that well. Only when the characters say what is going on, then there is an understanding of what the device is doing. 10
  • 11. Environmental Analysis Task One Environment: The Armory The Armory is underneath the arena where programs play death games. The room is very large, and is dimly lit. The room colors are all in the shades of blue. There are 4 Sirens working, each wearing the same white glowy outfits. The room is very symmetrical and has a lot of geometric shapes. On the walls facing Flynn’s right and left side are two pods where the Sirens rest until they are ready to prepare a game contestants. The walls have hidden compartments that have the armor for the contestants. Figure 5. Screenshot from TRON:Legacy: The amory 11
  • 12. Task Two Environment: The Arena The Arena is a space that can be configured into different scenes depending on what game is being played. Task two is performed during disc wars. The disc wars arena has several transparent rooms for each player to face off against another. These transparent rooms are large enough for players to perform aerial attacks and throw their discs around. The rooms themselves are also blue in tint. The rooms constantly shift locations to find a new player after one has been eliminated. After most players are eliminated, the rooms combine so the last two can have a final standoff game. The room is able to change its gravity as well. There are also added features to make the games more interactive like this jump pad below. Figure 6. Screenshot from TRON:Legacy: The arena 12
  • 13. Task Three Environment: Clu’s Ship Clu’s ship has a lot of shades of brown and orange. This matches Clu’s outfit along with his henchmen. This room has a lot of lines and geometrical shapes similar to the armory. There is a lot more equipment shown as well. In another scene it is shown that the room can protect the programs running the equipment by providing a large, metal-like shield above them. The entrance also is like a sliding door. This room is heavily guarded. Figure 7. Screenshot from TRON:Legacy: Clu’s ship 13
  • 14. Visualizing Your Data Empathy Map Task One: Battle Figure 8. Screenshot from TRON:Legacy where Sam Flynn realizes the disc is a weapon This empathy map reflects the moment where Sam Flynn realizes he needs to fight to survive in this arena. He was faced with an opponent who has had previous experience in these types of battles. 14
  • 15. Task Two: Reading disc memories Figure 9. Screenshot from TRON:Legacy where Sam Flynn meets Clu for the first time This empathy map is the moment where Sam Flynn meets Clu for the first time. At first Sam Flynn thought Clu was his father, but he is revealed to be a clone. Reflection on empathy map The empathy map shows how quick of a thinker Sam Flynn is. He faces a lot of confusion when entering the Tron world because it's a separate reality of his own, yet he was able to quickly adapt to it with the assumptions he had prior to entering. Outside of the Tron world, he seems to normally be a very prepared individual, for example his data heist. He had everything ready in order to get what he needed and escape. Whereas within the Tron world, he has to be on his toes constantly. 15
  • 16. Extraordinaire Figure 10. Screenshots from TRON:Legacy This character card is dedicated to Sam Flynn. Main scene: Sam is using a turrent to fight off the main antagonist, Clu, and his henchmen. Sam is excited here to use the weapon and seems fearless. Surprising scene: Sam is jumping from a building using a parachute. This shows he's a risk taker and adventurer seeker. Detail scene: Sam is hugging his father after years of not seeing him. Shows he has people he loves and cares for. He is also showing his softer side. 16
  • 17. Alternative scene: Sam is trying to get into a building and bypass their security. This shows Sam being sneaky, but also adept at using tools to help him. He’s determined to get inside without being caught. Reflection on Extraordinaire When understanding a character it's important to look at them from different perspectives to get a better image of who they are. The character card I created definitely made me realize a couple things about Sam Flynn that I didn’t realize before. My initial thoughts about Sam was that the movie didn’t really show his personality through dialogue, but you can understand his personality through his actions. I realized he’s kind of silly and a quick thinker. His approach to problems is definitely outside the box. Despite him being 27, he seemed quite immature in his portrayal because he seemed to live only in the moment and dwell on his past. 17
  • 19. 19
  • 20. V2 HTA Reflection on hierarchical task analysis The HTA is a diagram that keeps changing throughout the design process. This method of displaying the tasks is very organized and simple. It allows for easy feedback when there are confusing elements or questions about the tasks broken down. The tasks I broke down are the search mode and the battle mode. Both processes include the inclusion of new tasks and modifications based on feedback from classmates. 20
  • 21. Visualizing User Data Reflection I believe that the empathy map and the character card are really great ways to build a user persona. If I were to be designing a website or a visual I would want to create user personas to get an idea of who I am trying to service/cater to. The task analysis is also a good way to make sure websites flow simply. Previously I have used a visual task analysis to create an application that involved a lot of different people and actions for a project. I found it beneficial in understanding the complexity of the task. For this project, the same concept applied where the complexity of the task was analyzed and I was able to formulate questions or realize holes in the tasks. 21
  • 22. Applying User Data to Select Screen Form Factor Exploring Alternatives The purpose of brainstorming was to quickly create several ideas despite their quality. In the context of this project, I brainstormed individually and with a partner to aid in the process. This way, I had different perspectives and inputs in my ideas. Some questions I wanted to address were Where could a screen be placed that's not annoying to look at? What would you need a screen for that the hologram feature can’t already do? Questions like these helped guide me through the brainstorming process. It felt difficult not to think of already made items like a smart watch or a tablet. During the individual brainstorming activity, I thought of ideas such as varying holographic projected screens emitting from the disc, or a projection from the center of the disc. With each holographic projection idea, they would project in different directions depending on their use, such as getting directions would be a project ahead of the user. While with my partner we came up with an AR type environment where the user wears goggles and they can create an AR environment to show information, memories, items, people, etc. They can charge the view with who else is wearing the goggles around them. Another idea was to have the screen on the goggles. Brainstorming itself is a very important prototyping skill. Without brainstorming there would be no prototypes. Group brainstorming can be tricky because people like to talk over each other, however rolestorming can make brainstorming more interactive and beneficial. Rolestorming helps with developing the gaps in ideas. This improv technique is more collaborative and interesting. It is likely that the result in the activity would be questions that 22
  • 23. can deepen the concepts created. Rolestorming can be disadvantageous if people are not contributing to the activity. Brainstorming Reflection Brainstorming is very beneficial in group projects. A more specific example could be in advertising. If done in a group the ideas will be very diverse. It’s important to get different perspectives when creating content to be shared to the world. There are often designs that have ignorant designs, simply because they only had one person in mind while brainstorming. Final Screen location and size I decided to go with the screen on the goggles/AR visuals. This screen is being put as an additional goggles feature. Before, the helmet had a pair of goggles that didn’t do anything but provide eye protection. These goggles are a separate design and deployment that depends on the goal at hand. The battle mode goggles will also have a separate feature of locating enemies (lock on feature), gauging speed, and giving directions. In order to deploy the goggles, the user must take a chip out of the disc and place the chip on the side of their face, between the eyes and ears. For searching they would say, “Activate Search” and the goggles will deploy. To search for people or items, they must also say “Search for _____” and the search will activate. For regular battle they would say, “Activate Combat’ and the helmet goggles will deploy. To lock onto an enemy, the user must speak and also say “ Lock onto enemy (and mention the location/proximity)”. The screen size will be large goggles frames, like ski goggles. When directions are given, the AR technology would be used. Similarly with locking on. The goggles will change the 23
  • 24. interface to provide feedback as well. There will be loading signs, and color indicating the search is loading or is done. Brainstorming evaluation Reflection To narrow down the amount of ideas I've created, I looked at common themes between the ideas and how helpful/ flexible the ideas were. Ideas with projection screens felt constricting when used in other scenarios, like if the users had to use the disc and multitask. Those ideas seemed cumbersome. The ideas relating to AR/goggle screens I felt were more practical. 24
  • 25. Low Fidelity Paper Prototype Low Fidelity Version 1 In order to create the low fidelity prototype, I used a sketchbook with pencils and markers to show colors. Version 1: Focus - Search Mode Activate Search “Search for key” 25
  • 27. Version 2: Battle Retrieve disc & Activate Combat mode Wait for disc to glow Wait for helmet to deploy Voice command “Lock On” 27
  • 28. End Results Evaluation of Low Fidelity paper prototype Pre-Planning What design questions do you have about your prototype? - How can I incorporate the disc more into the design? - What are some limitations? 28
  • 29. What specific question did you want to learn from your evaluation? - How can the disc’s original use be enhanced by the goggles without taking away the entire use of the disc itself. What “role” did your user take? What information did they receive about the user? - The user is performing the actions. What task(s) did your user perform? Task 1: Looking for an object Task 2: Fighting an appointment What compromises did you make with your prototype, and how did you help your user overcome them? - Keeping track with enemies can be troublesome, to overcome this, arrows and color are used to track. How did you document your partner's actions? - I took note though google docs comments Results from Low Fidelity paper prototype Evaluation ➔ Add more disc features ➔ Pulling "item" out of disc to activate the screen goggles ➔ Add speech feedback, like audio bars 29
  • 30. Low Fidelity Version 2 Summary of Changes from V1 I made some substantial decisions when reviewing the version 1. Firstly I change the activation for both battle mode and search mode. Before it required speech alone to activate the deceive. The problem with this, is the goggles and helmet spawned out of nowhere. So I was suggested by my partner that the goggles/screen device be a part of the disc. Now to activate it, the users must place the sticky chip piece on their heads to spawn the screen out of that. Another change I made was adding more feedback. I added a visual audio wave to show the goggles are listening to the user speak. In order to create the low fidelity prototype, I used a sketchbook with pencils and markers to show colors. Added sketches/Version 2: Focus - Search Mode red means revised part Activate Search 30
  • 34. Version 2: Battle Retrieve disc & take sticky chip out 1 Apply sticky chip to between eye and ear 2 Wait for disc and helmet to deploy 3.1-3.2 Voice command “lock on” - When enemy moves left or right, their location in highlighted still 2.21 34
  • 35. Throwing disc - Blue glow in screen show “thrown” status - Light Blue arrow shows trajectory of disc - Yellow glow in screen shows “caught” status 4-5 35
  • 36. End Results Reflection on Low Fidelity Some things I was thinking about adding more were incorporating more of the disc functionalities with the goggles more. I felt like the goggles were becoming the main focus/device so I want to balance both parts. Another thing I was thinking about was what other information can the goggles gather from the user’s view. Some ideas were similar to game mechanics, with enemies having life bars and other enemy related information. The prototyping skill used this week was sketching. Sketching has always been such a top tier tool used to brainstorm ideas. Sometimes words are not enough to get the proper image down. 36
  • 37. While sketching the tasks I have made, I also came across timeline issues with my HTAs. For example, I had a difficult time trying to sketch things that are optional tasks, or simultaneous tasks. To do this I created several sketches and also corrected the HTAs. Sketching brought out the hidden errors I have previously made. Even while not working on the assignment, sketching came in handy. If I were to daydream and come up with an idea it was easy to sketch it so I wouldn't forget. An issue I did come across was when drawing the HTAs. I was unsure how to draw the start of an individual task, or the end of the individual task. For example, drawing the “waiting” part. I was thinking of drawing a before and after but it seems simpler to just draw the after. Sketching is great for developing any prototype or idea. When trying to convey ideas to others, sketching is definitely a great medium to help communicate that idea. Sketching for creating apps is an example of where it’s applicable and appropriate to use. When working with software engineers in developing an app, having a basic understanding of the design will increase the likelihood that the design is close to what was described on paper, rather than just communicated with words alone. 37
  • 38. Medium Fidelity Prototype in Slideware Medium Fidelity V1 To create the medium fidelity prototype I used figma’s prototyping tool. I included textboxes, and images from stock photos to create the scenes. Some objects were cropped and edited to add effects. 38
  • 40. 40
  • 41. 41
  • 43. 43
  • 44. 44
  • 45. Evaluation of Medium Fidelity Slideware Prototype Pre-Planning What design questions do you have about your prototype? - What are features missing on my prototype? - Where are there parts that need better feedback? What specific question did you want to learn from your evaluation? - Is the interface effective? What “role” did your user take? What information did they receive about the user? - The user is wearing the goggles and interacting with the device. What task(s) did your user perform? Task 1: Finding a Key Task 2: Fight enemy What compromises did you make with your prototype, and how did you help your user overcome them? - It was difficult to show movement, so I included “swooshes” to represent that. - Showing the screen vision was difficult. I wanted to show the goggles design and the first person view. So started off with the regular goggles shown, and then moved to a first person view. How did you document your partner's actions? - Through figma comments. 45
  • 46. Medium Fidelity V2 Summary of changes from V1 After discussing with classmates about my medium fidelity, I made quite a few changes to the file. Firstly, I created a consistent activation for the goggles. For search mode V1 it was unclear how to activate it because the Battle mode started off with the addition of a chip and some steps. Another change was the colors I chose to highlight the lost item. Before it was purple, and now it’s red. The red makes the items more visible than the purple. I also added a mini map to help give better directions to the user. I deleted the white sheen look on some of the images. It was unclear what that sheen meant. It was supposed to be the goggle view, but because this is a mixture of AR and interface it was an unnecessary detail. For Battle mode I also deleted the white sheen screen. I added in a counter on the left view of the user to clarify how the count system works. Another addition was to show what the “armed” status looks like. 46
  • 47. Revised low fidelity prototype Search Mode V2 -red means revised part 47
  • 48. 48
  • 49. 49
  • 50. 50
  • 52. 52
  • 53. 53
  • 54. Reflection on medium fidelity with slideware My original thought about using slideware for creating medium fidelities was there are better options. I watched videos about different tricks and tools to make the fidelity look good and my impression changed. Powerpoint and Google slides offer a lot of options to make their tools and programs able to compete with other web tools such as Figma. What is also beneficial is that most people have knowledge of how to use Powerpoint and google slides so there is not much of a learning curve. Both slidewares are great to use in a pinch as well. For collaboration they offer a lot of possibilities that help enhance a team’s productivity. To create my medium fidelities I used figma. I used it because I was already familiar with their tools, more so than powerpoint. My medium fidelity didn’t require any buttons or any prototyping on figma which made the assignment simple. I have seen how to link slides on powerpoint and I do prefer figma for the visuals on how linking each component looks. What I do appreciate about Powerpoint is the simplicity of their program, but also there is a wide variety of capabilities available if you search for them. The documentation is helpful and the community who uses powerpoint is very large, so there should be no issues when using the software. Using slideware for creating medium fidelities is great especially when you do not have the time to learn a new software or have the money to buy a software dedicated for creating medium fidelities. I can see myself using slideware when working with those who do not use figma. 54
  • 55. Storytelling Storytelling V1 Brief description Sam Flynn locates his father’s disc and escapes successfully. Synopsis Sam Flynn has reached the “The Grid” world and is trying to escape with his father. He comes across several obstacles that prevent him from escaping along with his father, but he also meets new friends while being in “The Grid”. In order to leave the Grid, Sam needs his father’s disc but it was taken by his father’s clone Clu. Since Clu is trying to prevent them from escaping he throws the disc into the abyss where rogue programs exist. Sam uses the disc to find his father’s disc, and also to scout the area for the dangerous programs lurking in the abyss. From there, he escapes in a jet towards the real world. 55
  • 57. Brief description Revolution in the Grid against Clu’s tyrannical rule. Synopsis Clu’s tyrannical rule has caused The Grid’s people to revolt against him. Beck, a program, is one of many who have had other friends die at the hand of Clu and his henchmen. Beck looks up to Tron, who was a hero from the past who stood up against the MCP (master control program). Unfortunately for Beck, he was in the middle of a battle and his disc had suffered major damage. He was able to escape to an underground city of outcasts. There he finds programs that can help upgrade his disc. With the new upgrade he can now fight multiple enemies once and lead the revolution into success. 57
  • 59. Brief description Murder mystery with 8 people and a dead body. Synopsis It’s a cold day in the suburbs of Chicago. Around noon Anthony and his wife invited 3 college friends from way back to have dinner and a small reunion. Each friend brought a different dish. As the night went on, people started to arrive. Each friend who came is currently very successful in their current work. From business to engineering, to doctors, they were all very successful. As they ate their dinner, the sky got darker and darker. The wind got louder and louder, and a storm had arrived. Lighting and thunder struck often, and to a point when the electricity went out. Suddenly, there was an eerie silence. When the electricity came back on, there was a body laid out on the staircase. Everyone was shocked, besides the wife. Amanda (the wife) was a detective. She decided to use the disc the engineer brought as a fun party trick earlier, to solve this murder. Story Visualization 59
  • 60. Brief description A highschool is kidnapped and escapes with the help of the disc. Synopsys Walking home from school, young Trish could see a man in the distance following her home. To confirm that she circled the block in her neighborhood 3 times to see if he was still following. Not knowing what to do next, she calls her father while going on her 4th circle around. Her father said to use the disc he had given her for her 16th birthday just in case, and to also go to the police station, but he was abruptly cut off from the attacker. The man hit Trish in the head and she was knocked out. Hours later, Trish woke up in a warehouse. Fortunately she had all her stuff besides her phone. Unfortunately she does not remember much other than her name. She rummages through her bag, and finds the disc. From instinct, activates the battle mode, where she can see others around her. From here she sneaks around the warehouse avoiding any nearby people. As she navigates through the warehouse and escapes, her memories come back. Story Visualization 60
  • 61. Storytelling Evaluation Story Title Sam Locates Fathers Disc Technology saves the day Setup Once upon a time there was A boy, Sam, looking for his father In the grid. Event One Day Sam finds Clu- his fathers clone, who trapped his real father. Consequence Therefore / Because of that Sam fights Clu. Clu knows they need his fathers disc to escape the grid, so he throws it in the abyss and beats Sam up. Therefore / Because of that Sam dives into the abyss and uses his own disc features to find his fathers disc. Therefore / Because of that Quorra was also there trying to find the disc, but she was able to help save Sam after he dived into the abyss Resolution Until Finally They teamed up to fight Clu and save the father. Which section is too long? - The exposition is long Suggestions / Comments: - Quorra needs a better introduction 61
  • 62. Story Title Revolution in the Grid Technology saves the day Setup Once upon a time there was a tyrannical rule from a program named Clu. Programs in The Grid hate him. Every day Beck and his comrades fight Clu’s army Event One Day Beck’s teammate dies in battle. Consequence Therefore / Because of that Beck runs out to fight but gets defeated. Therefore / Because of that Someone brings him to safety and repairs his injuries. He receives a disc upgrade to help fight against Clu from the mysterious individual. Therefore / Because of that He leaves the underground area and returns to his comrades. Resolution Until Finally He shares the upgrade and everyone is able to fight against the evil Clu. Suggestions / Comments: - To get the upgrade, it was too long. - Mysterious figure reveal might take too long to explain 62
  • 63. Story Title Murder Mystery Showcasing the future Setup Once upon a time there was a Couple Event One Day They decided to have a dinner party, inviting three other guests. One being an engineer. It was storming outside Consequence Therefore / Because of that The engineer showed off his new device that can do various things to assist people Therefore / Because of that The electricity went on and off, and it seemed that one guest was attacked by an intruder Therefore / Because of that Amanda, the wife uses the disc to find the attacker Resolution Until Finally Tony uses the disc to attack the man. Which section is too long? - too many details in the exposition Suggestions / Comments: - focus on the interaction with the device 63
  • 64. Story Title Kidnapping Technology saves the day Setup Once upon a time there was Young teenage girl named Trish Every day She’d walk home from school Event One Day A man began to follow her Consequence Therefore / Because of that She calls her dad but gets attacked Therefore / Because of that She gets taken to another location, a warehouse. She has amnesia, but she has her belongings (which includes the disc) Therefore / Because of that She uses her disc to attack and avoid the bad man, she finally gets her memory back. Resolution Until Finally She uses the disc to locate her father to get home safely. Suggestions / Comments: - change story location, she could be in a forest maybe 64
  • 65. Storytelling V2 Brief description Revolution in the Grid against Clu’s tyrannical rule. Synopsis Clu’s tyrannical rule has caused The Grid’s people to revolt against him. Beck, a program, is one of many who have had other friends die at the hand of Clu and his henchmen. Beck looks up to Tron, who was a hero from the past who stood up against the MCP (master control program). Whilst fighting the enemies with his close comrade, Moni, she died. Out of anger Beck ran up to avenge but was defeated. He was then pulled off by an unknown man. The man patched him up and gave him a disc upgrade to share with his friends. With the new upgrade he can now fight multiple enemies once and lead the revolution into success. Story Visualization 65
  • 66. Brief description Murder mystery with 8 people and a dead body. Synopsis It’s a cold day in the suburbs of Chicago. Around noon Anthony and his wife invited 3 college friends from way back to have dinner and a small reunion. Each friend brought a different dish. As the night went on, people started to arrive. Each friend who came is currently very successful in their current work. From business to engineering, to doctors, they were all very successful. As they ate their dinner, the sky got darker and darker. The wind got louder and louder, and a storm had arrived. Lighting and thunder struck often, and to a point when the electricity went out. Suddenly, there was an eerie silence. When the electricity came back on, there was a body laid out on the staircase. Everyone was shocked, besides the wife. Amanda (the wife) was a detective. She decided to use the disc the engineer brought as a fun party trick earlier, to solve this murder. She was able to track the enemy by discovering the shoe size and make. Her husband was able to apprehend the man because he was ex-military. He was able to use the disc the engineer brought as a fun party trick earlier, to solve this murder. Story Visualization 66
  • 67. Storytelling reflection Changes from V1 to V2 The changes between V1 and V2 I changed some details of my story. I primarily changed the stories that I planned to develop. For the first I provided more detail on the event that led Beck to find Tron. The second story I provided a conclusion on how Amanda and Anthony were able to solve the mystery. Red means revised part Before After Clu’s tyrannical rule has caused The Grid’s people to revolt against him. Beck, a program, is one of many who have had other friends die at the hand of Clu and his henchmen. Beck looks up to Tron, who was a hero from the past who stood up against the MCP (master control program). Unfortunately for Beck, he was in the middle of a battle and his disc had suffered major damage. He was able to escape to an underground city of outcasts. There he finds programs that can help upgrade his disc. With the new upgrade he can now fight multiple enemies once and lead the revolution into success. Clu’s tyrannical rule has caused The Grid’s people to revolt against him. Beck, a program, is one of many who have had other friends die at the hand of Clu and his henchmen. Beck looks up to Tron, who was a hero from the past who stood up against the MCP (master control program). Whilst fighting the enemies with his close comrade, Moni, she died. Out of anger Beck ran up to avenge but was defeated. He was then pulled off by an unknown man. The man patched him up and gave him a disc upgrade to share with his friends. With the new upgrade he can now fight multiple enemies once and lead the revolution into success. 67
  • 68. It’s a cold day in the suburbs of Chicago. Around noon Anthony and his wife invited 3 college friends from way back to have dinner and a small reunion. Each friend brought a different dish. As the night went on, people started to arrive. Each friend who came is currently very successful in their current work. From business to engineering, to doctors, they were all very successful. As they ate their dinner, the sky got darker and darker. The wind got louder and louder, and a storm had arrived. Lighting and thunder struck often, and to a point when the electricity went out. Suddenly, there was an eerie silence. When the electricity came back on, there was a body laid out on the staircase. Everyone was shocked, besides the wife. Amanda (the wife) was a detective. She decided to use the disc the engineer brought as a fun party trick earlier, to solve this murder. It’s a cold day in the suburbs of Chicago. Around noon Anthony and his wife invited 3 college friends from way back to have dinner and a small reunion. Each friend brought a different dish. As the night went on, people started to arrive. Each friend who came is currently very successful in their current work. From business to engineering, to doctors, they were all very successful. As they ate their dinner, the sky got darker and darker. The wind got louder and louder, and a storm had arrived. Lighting and thunder struck often, and to a point when the electricity went out. Suddenly, there was an eerie silence. When the electricity came back on, there was a body laid out on the staircase. Everyone was shocked, besides the wife. Amanda (the wife) was a detective. She decided to use the disc the engineer brought as a fun party trick earlier, to solve this murder. She was able to track the enemy by discovering the shoe size and make. Her husband was able to apprehend the man because he was ex-military. 68
  • 69. Storyboarding Storyboarding V1 Script #1: Revolution Narrator: “The Grid is a digital world with programs and human users, currently the people in a revolt against the tyrannical rule of Clu.” *Beck sees friend charge to crowd of enemy and dies from being shot* Beck: “JAsPER NOOOOO!” Enemy 1: “There’s still one left, get him!!!” *they begin fighting it out” Beck wakes up from being knocked out and he’s been healed. Beck: “Who are you”? Tron: “I am Tron, I saved the Grid once before” Tron: “I saved you because I saw you in me, my past self, a revolutionary.” I have been inspired by your grit! I have been working on a two new disc features” Tron: The first feature will let you detect enemies around you, you can lock on and view incoming objects. Tron: The second feature will let you find any object or person with a voice commanded search. All you have to do is put the chip between your eyes and ears, and say either “activate search mode” or “ activate battle mode” to begin. Narrator: With this new upgrade, Beck is able to find his comrades, as well as fight his enemies with no fear in mind. His goal now is to share this upgrade with his comrades. 69
  • 70. Friend dies in battle. Beck runs into battle for revenge 70
  • 71. They tussle. Beck loses the fight but is not dead Someone saves Beck and removes him from the battle area. 71
  • 72. Beck wakes up on a table. The person who saves him is a historical hero, Tron. Tron gives him a disc upgrade to win the war against Clu. Beck goes back to his teammates and uses the disc to locate them. 72
  • 73. He finds his teammates. Beck is able to have his revenge. 73
  • 74. Script #2 Murder Mystery Narrator: One cloudy afternoon, Amanda and her husband Tony have invited 3 friends from college for dinner. As the guest settles in, Gio the engineer shows off his new invention: the Identity disc. Gio: “This disc can hold a lot of information, and also do a lot of helpful things! It can search for any object or person, or also help you locate enemies!” Narrator: The small group was very impressed. As the night went on, a storm began to brew. Soon enough, lighting would strike often. Narrator: And just like that, *final lightning bolt hits* The electricity is out. Amanda: OH MY GOSH!! Narrator: As soon as the electricity came back on, it appears that the guest, Trish, has died! Amanda: “Before I retired, I was an investor. It looks like she has been hit in the head causing blunt force trauma.” Tony: I think there are muddy footprints around her, but they fade away. Amanda: “I have an idea! Gio, let me borrow your device.” Narrator: Amanda took the advice and placed the chip from the disc on the side of her face. 74
  • 75. Amanda: “Activate search mode. I can tell these boots are timbs. Search for the nearest Timbs in size 10” Amanda: The search results show that the man is currently upstairs hiding! Narrator: With the new information given, Tony took the disc and used Battle mode. Tony: “Activate battle mode” Narrator: with that he ran upstairs to apprehended the criminal. He locked onto his location quickly, to see where he would run off to. It was rather easy for Tony to apprehend him , since he was ex-military. As the police came, they realized Trish was simply knocked out. She was attacked because her husband was into shady business and got her caught up. Amanda greets guests. 75
  • 76. Rain storm begins Guest shows off disc 76
  • 77. Storm continues Electricity goes out, a body is found 77
  • 78. Amanda finds footprints and figures out what shoes would make them Amanda uses the disc to find the shoes The man with those shoes are upstairs 78
  • 79. Military husband uses disc to fight the man Husband wins the fight 79
  • 80. Storyboarding Evaluation Story Title Beck’s revolution Story Type Technology saves the day What are the major plot points in the story? Main character is given a new weapon, fights them and wins. Where should more detail be added? - make turning point more detailed - detail goggle view more - show front of him with goggle view - add detail to differentiate characters - represent the upgraded weapon differently from original - add detail to dead friend to show he’s dead 80
  • 81. Story Title Amanda The Investigator Story Type Technology saves the day What are the major plot points in the story? A guest friend dies, and the party attempts to find the killer. They are able to find and fight him using the disc. Where should more detail be added? - add effects to action scene when fighting killer - add detail to show difference in characters - goggle involvement in story 81
  • 82. Storyboarding V2 I chose to develop the Murder Mystery plot because of the stronger story line. 1. Amanda and her husband greet guests outside 2. They all go inside 3. A storm begins 4. Gio shows off his device from work 5. He talks about its search and battle features 6. They're impressed 82
  • 83. 7. Lightning strikes the tree nearby 8. Electricity goes off briefly 9. A body of one of the guests appears when the lights go back on 10. Amanda points out shoe prints 11. Amanda thinks. 12. She realizes she can search for the shoes that made those prints with the disc 83
  • 84. 13. Amanda takes the disc 14. She takes the chip out 15. She puts chip by ear 16. She activates search mode 17. Googles are searching for shoes 18. Shoes are found 19. Shoes are down the hall 20. Tony, her husband stops her from continuing 84
  • 85. 21. He explains he can fight him because he has fighting experience 22. Amanda gives dsc 23. He activates battle mode 24. He's ready 25. He begins to open door 26. Intruder appears 27. Intruder runs, but Tony uses lock on feature 28. They chase him outside 85
  • 86. 29. Outside 30. Tony throws disc 31. Disc thrown and hits him 32. He’s knocked out 33. Police come 34. The woman survives and reappears 86
  • 87. Storyboard Reflection Changes from V1 to V2 The changes I have made to create storyboard V2: ➔ I chose the murder mysery story. ➔ I added minimal details to the characters to help with differentiation between characters. ➔ I added additional detail scenes. ◆ Scenery setting details ◆ Device interactions ◆ Dialog between characters ◆ Transitions to new scenes ◆ Movement from characters Class Evaluation Feedback received from classmates was praise for the type of story. They believed the plot was strong, but had questions about the device interactions. I needed to focus more on how the device screen is shown through the storyboard. Reflection When creating a storyboard I realized how difficult it is to create the scenes from my head. I can imagine a detailed scene, but it was difficult to translate that to paper. I feel like my sketch skills would need to improve more in order to get the full details I want to incorporate into my story video. Another realization I had is that I need to flesh out the action scenes well enough. I 87
  • 88. will probably need to have animation to show actions like fighting or chasing other characters. Despite these analysys, I do think this activity was fun. When creating the script for the storyboard, I also realized how important a narrator will be for my concept ideas. My first idea with the revolution, there was a lot “showing” rather than explaining. But, it still needs an outside voice to explain the premise. The second idea with the murder mystery, there was definitely a lot more explaining to do other than the dialog between the characters in the story. The outside forces needed explanation along with the ending, to give a conclusion. Storyboards are a great resource to help plan for a film or video. It is like a visual flow chart of what scenes will look like, which includes the angle, frames, and the specific details that must be included. When a storyboard is accompanied with a script, the ideas are easier to communicate to others what the story will be about and look like. At this state, feedback should be fairly easy to give as well, since the fidelity is low and things are able to change easier. Storyboards are also good for reminding the creators which scenes need what edits to make the idea clearer. For example, if a scene needs animation to display a specific action, it can be easily noted. Storyboarding can be used in other instances such as doing a research project that requires a study. If there is a procedure that must be done, and there's a script needed, a storyboard can help show visually what the study will look like with participants. For example, for a HCC related project, visual elements are often tested. It's necessary to know the order and environment given in testing. 88
  • 89. Video Draft 1 Video Draft 1 Key Frames The first video draft included the same images from the storyboard. The video draft has narration and voice dialog between characters, along with sound effects such as the storm, thunder, and door creaking noises. Amanda and her husband welcome guests into their home. It’s beginning to storm. Suddenly lightning strikes and the electricity is out. 89
  • 90. A body is found, and there are footprints that can be traced back to the culprit. The enemy is found by using the disc for assistance. Using the disc, Tony was able to knock him out. 90
  • 91. Video Draft 1 Evaluation The feedback received from peers: ➔ Video is too long. ➔ Characters need more difference in appearance. ➔ Device needs more screen time. ➔ Add effects to the action scene when fighting the killer. 91
  • 92. Video Draft 1 Reflection When I began to draft my sketches, I started using Blender to create 3D models of the scenes. I realized I did not have the tools to do what I envisioned. Initially I wanted to draw over the 3D models, but I did not have a digital sketch pad/tablet to make that happen at the time. I reevaluated my sketches and deemed them thorough enough to be in the draft itself. Because the previous sketches were already made, I was able to focus primarily on the audio: dialogs and sound effects. I would have preferred to do the dialog with actual voice actors, but I did not have any people willing to do that, and my own voice would not have fit every character so I opted to use natural readers/ voice to speech. Using voice to speech was very simple, my only issue is I ran out of free downloads on one website and had to find another. The sound effects were a fun process. I had to look through libraries online. A lot of the free audio effects were quite silly, where the sound would be very extreme or weird and unexpected. With the feedback given, I decided to move away from the sketches and find a new medium to animate my project. Certain scenes definitely would be fleshed out and translated better to the viewers once it is animated. 92
  • 93. Video Draft 2 Video Draft 2 Changes The changes I have made to create video draft 2: ➔ I used Animaker to create the video instead of having my sketches. ➔ I used Figma and Clipart to create the background scenes. ➔ I removed the scene where the woman reveals she’s not dead due to timing. ➔ Changed the name of the woman to Julia, and changed the name of the engineer to Miles. ➔ Added more detail to the scene where the electricity goes out. 93
  • 94. Video Draft 2 Key Frames Miles begins discussing the device from work. 94
  • 95. He shows off the device. After the electricity goes out, Julia is found on the ground who appears to have been attacked. 95
  • 96. Amanda suggests that she uses the device to find the shoes of the man who hit the friend. She takes the sticky chip out of the device and places it between her eyes and ear. 96
  • 97. Goggles activate when she activates search mode and searches for the shoes the culprit wore. The display gives directions. 97
  • 98. Amanda and Tony are led to this room where the intruder hides. The intruder runs out the room while Tony activates battle mode. 98
  • 99. Tony uses battle mode to lock on and attack the intruder by throwing the disc. Police come to arrest the intruder. 99
  • 100. Video Draft 2 Evaluation The feedback received from peers: ➔ Fix audio timing when Amanda activates the goggles with the chip. ➔ Fix sound waves on goggles. ➔ Reduce the size of goggles on Tony and adjust location. ➔ Change the audio to fit the enemy better. ➔ Audio is too loud and distracting. 100
  • 101. Video Draft 2 Reflection Recreating the sketches in Animaker was a lot more difficult than I thought it would be. I had a basic idea of how I wanted to create the scenes, but using every part of Animaker would not be satisfactory. I decided that I would not use the backgrounds they provided, but instead to create them myself. I used photopea, figma, and clipart to piece together the background scenes. I either made the objects myself or used clipart. This part was fun to do considering I made a couple things from scratch, like the device itself. Animakers mechanics were difficult to use, and the more features you want to add the laggier it got. When trying to play the video at specific times, it was annoying having to wait a while and then adjusting, and then repeating the process again. I believe if I had the artistry skills, I would have hand drawn everything instead. What I did like about Animaker was that they had text to speech available. I was able to use the dialog I have previously saved from another website, and still be able to edit the dialogs. The voices were the same so it was really easy. I also appreciated that there was no limit on the layering of features. I could place audio layers and backgrounds without running into issues specific to layering. 101
  • 102. Video Draft 3 Video Draft 3 Changes The changes I have made to create video draft 3: ➔ I added more sound effects, such as police sirens. ➔ Version 2 had an audio mistake where the siren for the police was played in the beginning and was too loud. I removed it from the beginning, and fixed the volume of other audio files. 102
  • 103. Video Draft 3 Edited Scenes Siren audio has been removed from this part of the video. Siren audio has been adjusted to a lower volume in this part of the video. 103
  • 104. Video Draft 3 Evaluation The feedback received from peers: ➔ Did not understand the purpose of the chip. ➔ Lock on feature was not clear. ➔ The scenes need music to give a thriller/suspenseful experience. ➔ Tony is not necessary to the plot, so make Amanda the primary user. 104
  • 105. Video Draft 3 Reflection In the next version I had to make new scenes and remove Tony as a user. I agreed with the feedback that Tony is not essential to the plot at all. Also adding onto the mystery aspect, some music would be great. Without the music, the vibe is kind of dry. Some improvements I would make if I had the skill or time, would be making the rain have movement. I used Photopea to create that scene and drew static rain droplets. I would try to animate the rain myself by making a gif. Another change I would make plot wise, would be to have a resolution of why there was an attack in the first place. Adding in those details would make the story stronger, but also longer. 105
  • 106. Final Video Final Video Changes The changes I have made to create video draft 3: ➔ Amanda became the primary and only user in the story. ➔ I fixed the audio levels and placement in the video. ➔ Added more detail to the scene where the electricity goes out. ◆ Added the character attacking Julia to clarify what happened to Julia. ➔ Some of the graphics were changed: ◆ I changed the gif where the device was listening to the user. However, I made a mistake and couldn't get rid of the background of the gif. ◆ I added a moving gif loading sign when the device registers what the user was saying. ➔ Some of the dialog was adjusted to clarify device use. I added audio lines to clarify the point of the chip. The narrator explains it is meant to be the object that emits the physical glasses. ➔ Music was also added. The songs create more of a dramatic effect to the story. 106
  • 108. Reflection and Conclusion This project so far has been fun. I am creating a prototype of an interesting device from a world that would be interesting to be in. This project allows for a lot of creativity and collaboration that will help me make a project I am proud and passionate about. Through this project I gathered research by watching movies and TV shows which are different from usual research. After that initial phase, I began to see the characters from the movie in a different light because of the empathy maps and the extraordinaire. I also began seeing plot holes or misunderstandings in the movies and with the device itself. It was interesting to see the different ideas that stemmed from classmates during the brainstorming, and it was also fun to see how other students created their initial sketches and prototypes. Some of my favorite parts of this project were the initial search, sketching, and building up the medium fidelity prototype. During the initial search of devices I wanted to do something nostalgic. Tron was one of the first ideas in my head because one of my favorite video games had a Tron world in it. I was open to other devices but I knew this was the one. After selecting Tron I went on to re-watch movies and read wikis about the main characters and the device. Sketching was more fun when revising and viewing other’s sketches. I enjoyed seeing the creativity required to create an easily understandable visual. I had an idea of how I wanted to use a mixture of real items and paper and pen to do my sketches, but when trying to put it together it wasn’t that presentable so I went with regular sketches. Seeing my classmates do what I envisioned helped make my concept for the medium fidelity prototype come into fruition. I liked the medium fidelity prototyping because I was able to build a scene with different items knowing it won’t have to look absolutely perfect. I was able to use different tools, like the white background remover to create some of the props. After seeing my classmate’s 108
  • 109. prototypes too I felt inspired, especially the ones that had working interfaces. With more time I would like to include animations since my prototype does not have any interface buttons. The storytelling and storyboarding process was a fun experience. I was excited to explore another branch of my own creativity by creating fun stories. I wanted to implement things I enjoy in real life, such as mysteries and action movies. Looking at classmates storyboard was really cool because you saw their vision and then saw it being put together into a video. This process was also inspiring because it gave me ideas of story mechanics I can add, or how to better display elements in my own story. Creating the videos was a more tedious process than I thought it would be, but I still learned a lot from it and the importance of planning. Without the storyboard and feedback I would probably have struggled a lot more when it came to the animation. Two of my biggest future wishes would be to use real voice actors and also using a different animation format. Overall, I believe the device I chose and enhanced does help the original users. In the movie there were problems with finding people and items, and also several times enemies would come out of nowhere attacking. With the inclusion of these features, Sam Flynn could have saved more people and also been more efficient with his time. 109
  • 110. Citations Tron Wiki. Fandom. (n.d.). Retrieved March 28, 2022, from https://tron.fandom.com/wiki/Tron_Wiki Kosinski, Joseph. TRON: Legacy. Walt Disney Studios Motion Pictures, 2010. 110