Final Video & Project Documentation (Due 5/16)

Assignment: Document your project including Ideation (data gathering, physical brainstorming, task analysis), Screens (low fidelity, medium fidelity), Storytelling (storyboarding) other (clever tricks with audio/image manipulation, physical prototyping/digital fabrication). Choose the documentation format of either a portfolio (web or print) or video. The purpose of this portfolio is to explain to the user why and how this device was made. Also include a 500 word reflection (explained in a few slides)

Final Video

Final Video Link:

Project Documentation

Power Point Link: ww_ppt3

Final documentation: ww

Project Reflection

This class and  definitely the project helped me learn many prototyping skills. While creating the prototype for Wonder Woman’s bracelet, I polished my skills designing different low and medium fidelity prototypes. Initially as expected I started with a low fidelity model where I learnt that you can not expect it to be perfect, it will come with its own loop holes and latter while passing by every prototyping step you gradually solve each defect and com up with a satisfactory product, so gradually I brought in new features and moved to a medium fidelity model and finally I was able to create touch screens on Wonder Woman’s bracelet which is a very new idea and improvement. Through out this journey, I build the prototype, evaluated it and made continuous improvements to the user interface so that the device is more user friendly. I think more I will practice and ask the right questions to the user, I would be able to make the necessary improvements required in UI.

In my current internship role, I do create prototypes for mobile applications for different clients based on the requirements. I always try to ask lot of questions and try to understand the client requirements and involve the users more so that I develop a prototype which is going to meet the needs. I can related with this very well as in this prototyping class our professor taught us to know our user first very well doing several data gathering approaches including user analysis and environmental analysis, which helped me at my job as well. This course was very helpful since I learnt more on data gathering, prototyping, brainstorming, and story telling, story boarding which I am definitely going to focus and use more in future.

Moreover, we used different tools in the class that gave me lot of insights. Not only the tools I used for my prototyping project but the class critiques and discussions helped a lot to learn new stuff and tools that my classmates are have used(try new tools which I am not yet comfortable with, which definitely gives me a courage stuff out of my comfort zone in future). I believe there are more new tools that will be invented in near future, so a UI developer its important we have the ability to learn something new and make ourselves expert in that. It’s important to choose the right tool that is required for an particular job. One thing I would like to do in the future is to use web and mobile prototyping tools like InVision and master other prototyping skills which I got inspired for after taking this class.





Weekly Reading: Sketching with Foam Core(Due4/20)

This reading introduces the method of creating a physical prototype for any physical design. Use of basic cheap materials by designers to create these physical mock-ups such us foam core, cardboard, glue, scissors, paper, and cutting knife has been focused. Tracing a photo to create an arm sketch on the computer is a starting step to provide an example of a digital watch. After the sketch is printed and placed on the foam with the right size.  They cut the screen and place a paper prototype for a series of screens that are going inside the arm and appears in the cutter foam screen ,  after preparing the arm. This way the designer is testing the steps performed on the digital watch using a physical prototype. I will say, this method is easy to implement and design. It is also cheap and does not require an designing skills or special materials. The designer can start building his/her prototype at home using basic material. However, I think printing the prototype screens is better than drawing the sketches. The physical mock-up can be created directly after the sketching stage or even within the sketch stage to save time an effort of duplicating the work of prototyping.

Weekly Reading: the Wizard of Oz Prototyping Approach (Due4/13)

I really liked reading this week’s reading post.This reading is about the Wizard of Oz prototyping approach which aims to help designers in the iterative design process. The Woz method allow the designer to test and evaluate the design with initial prototype before completing the whole system. Although the WOz concept seems interesting, it is time consuming and takes a lot of effort to develop. The stage of prototyping is supposed to be fast and easy to implement, I found this concept hard to understand and I think acquiring it in a work environment will require special expertise in this method. Because this concept is implemented on uncompleted systems, the designers must cover the missing parts of the system and imitate the real ones. To accomplish that, there are several roles within the Woz including the controller, supervisor, and moderator. Moreover, the reading discuses a case study on how the method is used with the DART system in Oakland cemetery tour system. DART used in three different tests and the role was different in each test. Applying similar scenario in business projects will take time and a lot of money to complete the testing and evaluation. I believe the time spend on applying such method is better used to develop the real system.

Video Evaluations Round 3 & Documentation Draft (Due 5/11)

Assignment: Show video to at least 5 people (not in this class) your video. Summarize the demographic information about them and what feedback they had. Then update your video based on their feedback and provide a 200-300 word summary of what you changed based on this feedback.


Demographic Info & Feedback

Colored items are items that were implemented

Viewer 1

Demographic Information

Age: 67


How much do you know about Wonder Woman from wonder woman comics: I know a lot about them, and am a huge fan!


What things in the video make sense?


The additional screen display is very well thought approach. 

What things in the video are confusing?


There is nothing confusing in the video

Where is there too much detail?


 I think that the level of detail is actually very good. 

Where is there too little detail?


 I think that the level of detail is actually very good. 

What does the technology do?


attacks enemy with lighting strike to stop them from invading the village

How did the user interact with it?


Uses a touch screen to choose options on the device

What other recommendations do you have?


you can add a male voice for the demon Ares

Viewer 2

Demographic Information

Age: 34

How much do you know about Wonder Woman from wonder woman comics: I know several things about them


What things in the video make sense?

The idea of showing every single step for the working of the bracelet.

What things in the video are confusing?

While telling the story you said the mission accomplishes is shown on the screen but did not find any screen attached for that.

Where is there too much detail?

There was none

Where is there too little detail?

There was none

What does the technology do?

Stops  enemy from attacking

How did the user interact with it?

They use a touch screen and interact with their fingers

What other recommendations do you have?

Maybe edit the sound a little bit, some places the level of volume was different.

Viewer 3

Demographic Information

Age: 47

How much do you know about Wonder Woman from wonder woman comics: I know several things about them


What things in the video make sense?


It all made sense

What things in the video are confusing?


Ares being a man why has female voice.

Where is there too much detail?


the device is user friendly so no instructions needed on how to use it.

Where is there too little detail?


There was the right amount of detail

What does the technology do?


help save common people from enemy

How did the user interact with it?


pressing the touch screen of the bracelet.

What other recommendations do you have?


you can add tittle to the project as well as credit . moreover if possible you can also add few wordings into the video as caption

Viewer 4

Demographic Information

Age: 13

How much do you know about Wonder Woman from wonder woman comics: I know several things about her


What things in the video make sense?


It was all pretty clear . The explanation was very good.

What things in the video are confusing?


Why Ares at all attacks Amazon?(Explained their previous fights)

Where is there too much detail?


I think there was a good level of detail throughout the video. Everything went at a good pace

Where is there too little detail?


Wanted to get to know the character more but that’s fine till the process is clear it makes relevant why the character is doing so

What does the technology do?


protects you from enemy attack

How did the user interact with it?


She used a touch screen to interact with it

What other recommendations do you have?


you can animate it more

Viewer 5

Demographic Information

Age: 31

How much do you know about Wonder Woman from wonder woman comics: I know a lot about her, and am a huge fan!


What things in the video make sense?

the way the story is narrated makes it very easy to understand

What things in the video are confusing?

why is the user using the screen at all which is not part of the original story (I explained that’s the need of this class)

Where is there too much detail?

There were no points where I felt it was info overload

Where is there too little detail?

I would like to see how the screen looks when wonder woman successfully kills her enemies

What does the technology do?

The technology allows user to protect the village against evil people

How did the user interact with it?

Touch Screen on the bracelet

What other recommendations do you have?

make some change with the music

Changes made based on Feedback

Video shown:

Edited video after critiques:

I loved doing a lot of changes from my previous video as per the comments of my viewers. I appreciate the way they have give honest feedbacks which helped me take my video to a superior level, after watching my video myself I could not believe its the same story that I started with. It can look so real. The story line got little twisted from time to time in every version though there is no major change. In many places I added new photos an deleted the previous one, to make it more prominent, as some viewer suggested the photos were not prominent enough. In this final version I have made my friend play the role of Ares and recorded his voice for Ares’ dialogue’s to give it male voice. I added caption wherever the viewer said its important, again added tittle and credits as suggested by another viewer. I changed all the photos and animations and the visual effects as well as it seems it did not look much clear before. I again worked on the music for this view to make it more soothing for the ears.

Documentation Draft

Assignment: Document your project including Ideation (data gathering, physical brainstorming, task analysis), Screens (low fidelity, medium fidelity), Storytelling (storyboarding) other (clever tricks with audio/image manipulation, physical prototyping/digital fabrication). Choose the documentation format of either a portfolio (web or print) or video. The purpose of this portfolio is to explain to the user why and how this device was made. Also include a 500 word reflection (explained in a few slides)

Here I have collected the initial thoughts and write up for documentation. This will be display in a more creative way in the final post.


For (human centered prototyping )this class, we are to use almost all  prototyping methods so I have walked through the prototyping process  in order to modify an existing gadget from a fictional story. The modification of the mobile or wearable gadget included adding a screen. I chose to add a screen to the bracelet device that the character Wonder Woman uses from Wonder Woman comics.


Data gathering (understanding your users)

Post: Data Gathering (V1 Due 2/10, V2 Due 2/17)

So the very first prototyping process I had to first learn about the user who would be interacting with my device and where they would be interacting with it. I did this by performing a user analysis and a environmental analysis.

User: Wonder Woman

Wonder Woman used to protect the village from any male invasion.

She used to live in a female dominant village called “Amazon”

This female icon named “Wonder Woman” is said to be made of clay by her mother and the Greek gods bestowed her with life, making her the only Amazon who was not conceived.

Amazons, among whom she grew up, who taught her the skills of a warrior as well as the lessons of peace and love.

Wonder Woman was already gifted with a wide range of superhuman powers and superior battle skills and the main weapon was her bracelet that also had superman powers, which helped her to win every battle.

She is a fair, slim and  of average height of 5 inches 5 feet.

Her age would be around 25. She got black hair and black eyes.

Her stamina affords her an incredible degree of resistance to blunt force trauma.

However, her skin is not invulnerable and can be pierced by sharp projectiles.

Environmental analysis: Amazon village

The village is very peaceful.

Wonder Woman was already gifted with a wide range of superhuman powers and superior battle skills

No men is allowed in the Amazon village and wonder woman makes sure no men enters the village.

She is said to be made of clay by her mother and the Greek gods bestowed her with life, making her the only Amazon who was not conceived.

As far as sound conditions there are noises of weapons or people shouting out of fear, when enemy invades otherwise its peaceful.

As far as temperature, people usually wear summer clothes, leading me to believe that the temperature is usually kept on the higher side.

Physical Brainstorming

Post: Brainstorming (Due 2/24)

So after I gathered information about my user ,Its was time learn about their environment , it was time to brainstorm how I would add a screen to the wonder woman’s bracelet  device.

Some methods for brainstorming included role storming, which is interesting as I had to act out few episodes and ask my friends to act few portion for me. This was a real fun

Role Storming-  Its became easier to understand my user, when you actually step into someone’s shoe to see how they feel or do, so it is a form of brainstorming where people act out different scenes (similar to improve) and hope to gain different perspective and ideas of the interaction

I tried to write as many situations or possible circumstance as possible to help complete my brain storming or role storming.

The in class activity-Brain Writing: get a group of people and have them write their ideas on their own sheet of paper. After 10 minutes, the group rotates the sheets to different people and build off what the others wrote on their paper. They then continue until everyone has written on everyone else’s sheet.


The screen is on Wonder Woman’s left palm

The front of the bracelet is an interactive screen

Screen is between her two foot

The screen projects out of the Bracelet

Screen is in the form exactly like Google glass in front of her eyes

Selection of the latitude and longitude of the position of enemy are done by interacting with the screen using body gestures

The power generation is done by interacting with the screen by smiling

The screen is projected in front of Wonder Woman and interacts by your hands’ movement

The screen is on your shoes and interacts by your eyes’ movement.

Bracelet is encased in a globe and the user can interact with a screen on the globe


The final screen location I chose was to have a screen for locating the target and reflecting missile as well as making lightening strike on enemy is on the front of the bracelet (like how people look at wrist watch). The interface is located in the middle of the bracelet  that the user wears on her wrist. The user can locate the target and create force field around the village or deflect an incoming missile into ocean. there are buttons on the screen that can be used by slight touch that changes and gives option to the user to select the right or appropriate option. She is also allowed to choose which operation to perform like the attack or protection . The screen is about the size of 5×13″ . The user bangs the bracelet to turn on the bracelet and quickly it shows the option of start button from where the operation may be started.

Task Analysis

Post (Task Analysis first version): Low Fidelity Prototype & Task Analysis (V1 Due 2/24, V2 Due 3/2)

So the next part was to  where this device was going to be used after establishing who the user was, and where the screen will be added I had to develop a task analysis to figure out how it would function.

First Task analysis

Firstly I wanted to jot down all possible plan to execute the tasks, or to find out and limit the tasks to be performed, which was mainly how to work  on the different tasks

So the task which I thought in the beginning was not all the same till the end as I had to fuse to tasks to get the video fit for 3 minutes.

Final Task Analysis: TASK ANALYSIS

As I was receiving critiques and adjusting the designs I had to adjust my Task Analysis. By doing so this helped me stick to a plan and understand how the device should work in relation to all of its functions.

Initially, I had to show that instead of bullet wonder woman had to face missile which needed more intensity to be deflected back to ocean as the default setting was already for bullet. So this were few twists I had to make  in my script as well .


The next step in the prototyping process was to develope low and medium fidelidy prototypes.

Low fidelity

Post: Low Fidelity Prototype & Task Analysis (V1 Due 2/24, V2 Due 3/2)

Very written based becuase it was harder to draw icons on paper

Medium Fidelity (PowerPoint, Desktop, or Mobile Prototyping tools)

Post (PowerPoint): Medium Fidelity Prototype (V1 Due 3/2, V2 Due 3/9)

Post (InVision- Desktop): Medium Fidelity 2 (V1 Due 3/9, V2 Due 3/23)

Post (InVision- Mobile): Medium Fidelity: Mobile UI (V1 Due 3/23, V2 Due 3/30)

Eliminating as much text as possible, and switching to a icon based interface, to make the interface cleaner and hopefully easier and faster.

The icons were replaced by iconic images which added more significance to the screen to helped to create a more clear picture for the purpose of the icons.

Later on, changed some aspects of the design based off of critiques received through video revision process

It was not very clear in the beginning whether the inputs for the location of the target are given by the device as input or its the output of the device that helps the user to identify the position of the enemy. So it was made clear and decided upon that its the device that is giving the information and helps in deflecting the missile or creating lightening strike on the enemy troop that is about to attack the village

Added more detail to the device to make it look like a bracelet

Used protection icon for “protection mode” and an attack icon for “attack mode” to make sure it could be differentiated easily.


Once the device was designed and tested multiple times, it was time to develop a story line. This story line would be used to market the device to other users and teach them how it works.


Post: Storyboarding (V1 Due 4/6, V2 Due 4/13)

Hand drawn

More on characters than device

Post: Above video

Designed in windows live movie player

More on device and the interaction with the user


Clever Tricks (audio / image along with animation and visual effects manipulation)

Used windows live movie maker to add animation as well as used few animations of PowerPoint as well into video

Colored the hand drawn outline of the images in the initial stage.

Physical Prototyping / Digital Fabrication

Use physical prototype made out of glue, tape, and a paper clip, paper, bangle to help with drawing the rotation of the device


Weekly Inspiration-Thermal Prototyping:(Due-5/18)



Thermal Prototyping As ICs get faster and denser they dissipate more heat. This is compounded by increasing densities of those ICs on the PCB and in the system. Having ICs exceed a critical temperature has two affects. First, it reduces performance. The ICs literally slow down and the performance of the system suffers. It may also result in timing errors that result in functionality failures. The second effect is reliability. Above a critical temperature the reliability of the IC decreases exponentially and may result in a long term failure and warranty costs to the product. This second affect may not be discovered through physical prototyping as the failure may take months or years to materialize and building/testing a physical prototype may not run long enough to cause the failure.  So analyzing the product for proper thermal management is absolutely necessary. But virtual prototyping during the design process is a multi-tiered process requiring the collaboration of both electrical and mechanical designers, as viewed in Figure 3.

Figure 3 – Thermal management of an electronic product requires virtual prototyping at all levels of the product and participation by both electrical (ECAD) and mechanical designers (MCAD).

First, the IC supplier usually analyzes the component package and delivers a model of the thermal characteristics. Next we want to analyze the standalone PCB as the design is being performed.

Weekly Inspiration-why are adding screens important in prototyping:(Due-5/11)

hoho2 why are adding screens important in prototyping

The importance of prototyping should be obvious to anyone involved in designing website or mobile apps.

A prototype allows a designer or developer to create a form out of a concept, so that everyone who is involved in the process can give their feedback and make necessary adjustments before a final version is produced.

From the very beginning of a project it is important to test each element and to ensure that it all works as intended. Navigating around a working prototype and trying out different actions allows you to experience what it would be like to use the interface.

You can explore all the functions and solve any problems during the planning stage, rather than discovering them through testing at a later stage when it might not be so easy to get them fixed.

Another reason why a working prototype is so helpful is because it gives you a master plan in more than one dimension. Prototyping is the best way to determine the final specifications for a working website or a mobile app.

The biggest benefit of prototyping is that it prevents important factors from being overlooked and it stops you making any assumptions that could be revealed as inaccurate later on in the process.






Weekly Inspiration-HOW to make someone understand your story:(Due-5/4)


HOW to make someone understand your story

What if you’ve tried to find a creative solution and the situation doesn’t improve? For example, after several conversations and promises to improve, a direct report continues to be disrespectful. Or after your numerous requests to be prompt, an important member of the team continues to show up late or not at all. Did I mention there are no guarantees? You may not get your point across, ever. You can, however, remain respectful, interested, and purposeful. In the final analysis, this is where your power lies. You can also employ your company’s performance management system as early in the process as possible and hold your staff accountable to its guidelines. At this stage, the point you want to get across changes. You are no longer asking for behavior change. Instead you’re making sure the employee understands the consequences of the road he is traveling.

I practice and teach the martial art Aikido, often translated from the Japanese as “the way of blending with energy.” In aikido, as the attack comes I center and extend ki (life energy) to meet the attacker, align with him, and redirect his energy. I lead without force. In life and business, you do the same when your language and manner are poised and focused, when you exercise both power and compassion, and when you make your adversary a partner by honoring his energy and positive intent.