Weekly Inspiration-Prototyping Tools to Test Web and Mobile Designs:(Due-4/27)

Prototyping Tools to Test Web and Mobile Designs:

 

Prototyping is an integral part of the design process as it lets you and your team review concepts and share feedback in the early stages of a project. By creating an interactive mockup of a website or mobile app, you are able to identify any shortcomings in the flow and usability of your design before investing too much time or money into development.

 

hoho

 

While every designer has a unique set of needs for their mockups, using prototyping tools offers the functionality and flexibility required to create highly interactive concepts without a single line of code. Here are the best prototyping tools used in the industry:

  1. InVision – used for Web and mobile (Android and iOS)
  2. Justinmind – used for Web and mobile (Android, Windows, Blackberry and iOS)
  3. Marvel – used for Web and mobile (Android and iOS)
  4. Origami – used for Web and mobile (Android and iOS)
  5. Pixate – used for Mobile only (Android and iOS)

 

Weekly Inspiration-Windows Live Movie Maker (Due-4/20)

hahaWindows Live Movie Maker

 

This week I learnt how to use Windows live movie maker and here are the few things I did using the tool:

  • I took few photos which I added in movie maker
  • Added audio files right after the photos
  • I also could add music and video files in the movie maker
  • Then I added animation and visual effects to make the photos interactive
  • Also learnt how to modify the timeframe and made the required edits

All these learnings will help me immensely for my final project work.

Weekly Inspiration-UI Prototyping process(Due-4/13)

 

UI Prototyping process:

haha1

UI Prototyping process:

While doing UI prototyping it’s very important to follow the below process. As you see in the activity diagram there are four high-level steps in the UI prototyping process. The first step is to analyze the user interface needs of your users. User interface modeling moves from requirements definition into analysis at the point you decide to evolve all or part of your essential user interface prototype into a traditional UI prototype. This implies you convert your hand-drawings, flip-chart paper, and sticky notes into something a little more substantial and you build the prototype and then continuously evaluate the prototype until you have the final product.

 

Reference: http://www.agilemodeling.com/artifacts/uiPrototype.htm

Video Evaluations Round 2(Due 5/4)

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: 31
    • How much do you know about Wonder Woman from wonder woman comics: I know a lot about them, and am a huge fan!

  • Feedback
    • 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?
      • I feel like there are to many controls on the interface, like for every single step the user is using a button to do the work. You can add more screen while giving background of wonder woman.

Viewer 2

  • Demographic Information
    • Age: 23
    • How much do you know about Wonder Woman from wonder woman comics: I know several things about them
  • Feedback
    • 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: 26
    • How much do you know about Wonder Woman from wonder woman comics: I know several things about them
  • Feedback
    • 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 use background music or stress for few portion which are important. First two  slides are too much of story telling than pictures.

Viewer 4

  • Demographic Information
    • Age: 23
    • How much do you know about Wonder Woman from wonder woman comics: I know several things about her
  • Feedback
    • What things in the video make sense?
      • It was all pretty clear

    • What things in the video are confusing?
      • why is there no role of villagers (I clarified saying the device was originally as well as  in the assignment given needs to be used by a user and operated by the user, moreover their was no function of villagers related to the bracelet.)

    • 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?
      • Use smooth flow from one screen to next using better animation and visual effects

Viewer 5

  • Demographic Information
    • Age: 29
    • How much do you know about Wonder Woman from wonder woman comics: I know a lot about her, and am a huge fan!
  • Feedback
    • 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
    • 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 ill people
    • How did the user interact with it?
      • Touch Screen on the bracelet
    • What other recommendations do you have?
      • make it more colorful

Changes made based on Feedback

Video shown: https://youtu.be/iH452VBFt6M

Edited video after critiques: https://www.youtube.com/watch?v=Tje12XuKbiI
Colored items above are items that were implemented

I was a little worried that the changes from last week were so significant that my viewers this week would not have any feedback to give. However, I was relieved to receive more great feedback for my video this week.

But there was actually huge number of changes being made for this round. In the last round in the second slide I mentioned that wonder woman  “is” used  to live in  a village called amazon. Thanks to one of my viewer who pointed this grammatical mistake out.
Again as pointed out by another viewer that when we select a button on a screen it generally gets changed from red to green, but is it something opposite happening in my video, so I took care of it and showed that when wonder woman clicks on the ” attack mode” it gets changed from red to green.
Another significant change I made was the addition of a screen shot all together which says “mission accomplished”, this I should say is a real good observation that once the work is successfully done the device should give a signal to the user to confirm its been handled. Not to mention there are several screen and narration being added on public demand to make sure that the video makes sense to all, which again required changes in animation and visual effects and while narrating I added background music this time to focus on the impact of few slides.

I have showed the working screens of the bracelet on single separate screen unlike last time, where I showed all the screen as pop-up on the side of the user’s hand. So for all these changes I had to write a new script so as to give it a new look or make it sound little different from the previous version which I felt was little monotonous.(This is absolutely my thinking as I have heard my video over and over again).

Video Evaluations Round 1 (Due 4/27)

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: 54
    • How much do you know about Wonder Woman from wonder woman comics: I think I have heard of her

  •  Feedback
    • What things in the video make sense?
      • What the device does and how to use it to locate the target.
    • What things in the video are confusing?
      • How she actually interacts with the device
    • Where is there too much detail?
      • I did not think that there was to much detail
    • Where is there too little detail?
      • On the device itself, until the screens are seen
    • 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
    • What other recommendations do you have?
      • Bring wonder woman’s image in the video. In the video you can add the dialogues in dialogue bubble to make it more clear.

Viewer 2

  • Demographic Information
    • Age: 58
    • How much do you know about Wonder Woman from wonder woman comics: I don’t think I have heard of wonder woman
  • Feedback
    • What things in the video make sense?
      • The description of how the device used
    • What things in the video are confusing?
      • How does the actual device look like. That wasn’t very clear, if could have provided a physical prototype or the screens of the device
    • Where is there too much detail?
      • there was never too much details rather it can be bit extended and stretched till 2 minutes.
    • Where is there too little detail?
      • The back story or introduction, not enough information on the characters or the device
    • What does the technology do?
      • creates lighting through a screen on wonder woman’s bracelet to stop enemy when they approaches
    • How did the user interact with it?
      • Like a mobile phone on wrist with a wrist band
    • What other recommendations do you have?
      • More details in the beginning to understand who the character is and that its a story about interaction of a hero and her device

Viewer 3

  • Demographic Information
    • Age: 46
    • How much do you know about Wonder Woman from wonder woman comics: I know who she is
  • Feedback
    • What things in the video make sense?
      • Interactions and how she interacts with the device makes sense
    • What things in the video are confusing?
      • Why did I select particularly wonder woman’s bracelet and why implemented a screen on it, which was not there originally?
    • Where is there too much detail?
      • don’t need so much introduction about the device or the character
    • Where is there too little detail?
      • It was described well
    • What does the technology do?
      • kills enemy before they could attack
    • How did the user interact with it?
      • With her fingers
    • What other recommendations do you have?
      • Men voices for Ares.

Viewer 4

  • Demographic Information
    • Age: 23
    • How much do you know about Wonder Woman from wonder woman comics: I know several things about her
  • Feedback
    • What things in the video make sense?
      • The explanation is clear for what is going on in the story
    • What things in the video are confusing?
      • Where did Ares come from? why is he attacking village?
    • Where is there too much detail?
      • I don’t think there is an overabundance of detail anywhere, everything has a good amount of explanation.
    • Where is there too little detail?
      • Everything being explained properly
    • What does the technology do?
      • It creates lighting strike
    • How did the user interact with it?
      • She’s uses her fingers and fingerprints to interact with it
    • What other recommendations do you have?
      • At last when wonder woman wins she should celebrate happily with villagers

Viewer 5

  • Demographic Information
    • Age: 49
    • How much do you know about Wonder Woman from wonder woman comics: I think I have heard about her
  • Feedback
    • What things in the video make sense?
      • What she is trying to accomplish and how she is going to accomplish it.
    • What things in the video are confusing?
      • Nothing really
    • Where is there too much detail?
      • Nowhere,its perfect
    • Where is there too little detail?
      • In the beginning when the device is turned on, few screens of the device will give better visualization
    • What does the technology do?
      • kills enemy with lighting strike
    • How did the user interact with it?
      • She used her hands and pressed the screen of the device.
    • What other recommendations do you have?
      • Make it 2 minutes long,now its just 1 minute. As you said it should be 2 minutes long.

Changes made based on Feedback

Original: https://youtu.be/IkLXaRkVrwk

Updated: https://youtu.be/iH452VBFt6M

New Modified Script: script_story2_v1_april27

 

 

There are huge changes made in the versions. The numerous changes made to the video are all based off of the feedback gathered this week which is nearly 20 in number. The most common piece of feedback was to clean up the video and to give the viewer more detail on how the user interacts with the device. For this I  edited my story and script a lot to make sure all the feedbacks are taken into account.

I have incorporated many changes as outlined below: I added interaction of the user with the device. I have given quite a detailed introduction of my user as well as the device she is using. I have stretched the video long enough to go beyond 2 minutes and 9 seconds but earlier it was just 53 seconds. I also showed the physical prototype by making wonder woman’s bracelet using paper, sticky notes to show the screen as shown in the photos below.

I have added all the screens that shows step by step how wonder woman using her bracelet on her wrist to kill enemy. I even added wonder woman’s photo instead of the hand drawn photos to make sure it looks more real as the hand drawn photos are not always very impressive.
I almost modifies 90 percent of my video to give it a better look and feel , for this I even had to change the my script a lot to make sure the flow of the story is maintained well enough. I added animation and visual effects to all the video slides a s necessary. I added text to the second last slide to make sure its more clear  how much the villagers of Amazon are grateful to Wonder Woman. Out of the 20 slides I didn’t add animation for nearly four slides (including slides numbers 3.5, 3.6, 3.7, 3.8, 3.9 ) to make sure the photos are not just seen for few seconds which makes it difficult to interpret.

The biggest thing I did in this version was making the bracelet more like the bracelet from the comics.This major change is to implement the physical prototype because when I started making it I had to actually think of every button and each screen and to keep it simple instead of showing the screens on the physical prototype I used the place beside the hand to show by zooming out what exactly is going on in that particular screen. Finally added the left hand to help the viewers understand where the user is selecting each item and how the interact with the device. I added the multiple hoops around the screen that is seen in the original device.Adding these hoops allowed me to easily show the viewer how Wonder Woman  uses the screen from the beginning to the bend. I actually created a physical prototype out of tape, paper, post it, adhesive and a paper clip (see below) to get the correct angle of using the device.

I did not introduce new buttons or feature as suggested by a viewer, to the device because I believe there are almost more than sufficient number of screens showing how the device works. The steps to operate the device are quite simple , that too has been well explained in the video, so I did not find it to be a very important thing that is missing. Another change I didn’t implement is the addition of 1 minute introduction as expected by a viewer who has less knowledge about wonder woman. I think 1 minute introduction is really boring and  the video should concentrate on the interaction rather than the background of the user and the device.

 

Weekly Assignment:Video (V1 Due 4/13, V2 Due 4/20)

Assignment: Write a script for a video that should last about 2 minutes. This should include things characters say, information the viewer needs to know , what actions will happen in the scene. Make a 2 minute video, use images/stills from your storyboard. It is OK to include sketches at this stage. Record your own audio track (it is OK if you are the only voice actor).


Version 1 (Due 4/13)
script_Story1_v1

 

 

In the first version of my video story I chose to modify my story 1 from the other assignments. I chose to do story 1 and 2 because it makes the user have more complex interactions with the device (like deflecting the missile into ocean and creating force field around the village ). To make it look like a story while writing the script I took chunks of my story from the Storytelling assignment and added some narrative. I am satisfied as I didn’t use extra  time and was able to complete my videos within 2 minutes. I added the introduction to my user and the device as well as kept equal time to represent the interaction with device to help people understand my story better. Lets wait for others comments. in my story 2 I kept 2 types of interaction of the device and my user (like banging both the bracelets and using the screen to create lighting strikes.)

I used an app called “Sound Recorder” to record my audio and “Windows live Movie maker” to combine the audio with pictures. I found both applications to be easy to pick up and learn.Sound  Recorder allows you to record yourself and then upload the files to your computer quickly. I enjoyed using Windows live Movie maker because it let me attach elements of both picture and voice elements. It also made movie editing quick and easy. I am keeping my fingers crossed, to know how good my stories look.

Version 2 (Due 4/20)

script_Story2_v1

 

 

In version 2 of this video I wanted to makes all changes as per the the feedback I got from friends and use it to improve the video. While there was many helpful things said, I took few things people recommended I changed and implemented them (or thought about how I could implement them). The main change was I just kept one story  like  others instead of two.
So I basically added animation to my video to make it look more real. This helped a lot to explain the story. Animation is such a  feature which can actually break or make your work. If done nicely can exactly bring out your mind but if overdone can indicate something can you never wanted to portray.

I even tried to make it look better by adding visual effects. The animation was bit hazy in the beginning(but gradually it showed its power) and the visual effect makes my video more bright and colorful. I tried to make the story sound bit different by changing the script first, but was not much successful as the changes did not fit much, so I am not implementing it for the time being , but have plans to do it in my next version. Moreover I added some very meaningful colors as in some obvious colors for making easy for the viewers to understand my video.

 

Reflection between V1 and V2

My video sketch did change quite a lot between version 1 and version 2 in respect to color combination, animation and visual effects. Thanks to the helpful feedback which helped to get a clear picture of the viewer’s mind. I did put lots more animation to make sure the transition are clear to my viewer and even the visual effects enhanced its significance quite a lot. Now I even more options to keep experimenting with my video which looks quite interesting to me. In my up coming assignments I will make more changes to make sure the video looks much improved and advanced. I am happy that we started making the video quite early instead of waiting till the last moment which gives us time to play around with our video.

I find like this prototyping skill very interesting as to how it makes you change the you think, and makes you think more about how someone else will think about your work. Good that it comes with many  versions that helps you to add stuff that you wanted to add but its all rework again.(so that’s the fun of prototyping). I think this prototyping skill is particularly important while launching a new device in market , so that its easy to identify what customers might think seeing a particular screen or button. To get a knowledge of customer’s view its really important to make some people who did not see the device before,to go through the sample device and come up with open comments. Even the softwares like “sound recorder” and “windows live movie” were amazing to use, which are absolutely new to me.

 

 

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

Version 1 (Due 4/6)

Poster
poster_v1.jpg

Storyboard 1 (Story 1)

story1.jpg

Storyboard 2 (story 2)

story2.jpg

To be honest I  am poor when it comes to drawing, but still I tried my level best to make it look like what I want it to look like. I really enjoyed story boarding because it reminded of my childhood days when my drawing teacher used to give us instructions on how much its important  to make to make sure the thing we see in general needs to get on appear the same way keeping some angle into consideration and the size of the objects matters a lot to show how far or near it may be.

But now I get the feel that my device is quite ready. However I had to use annotation for my story blog as the picture were not very self explanatory. After I did the story blog I asked my husband to tell me the story he understands from my drawing , to my surprise it was not clear to him.I used only few interaction with the device to make sure its not taking up many slides, but still it was quite time consuming. Moreover I didn’t use any color to make sure my pictures have pencil outlines and have a prominent and clean look. This helped me know my user better but I am not sure how much my story board is conveying my story.For the Extraordinary card I was able to dive into a side my user has but has not really been touched upon in these exercises. I think that this process really helped me understand her better and remind me that she is more than power woman who saves “Amazon” who loves her villagers, she is a little girl inside who loves playing with little children of Amazon village.

Version 2 (Due 4/13)

Poster

poster_v2.jpg
Storyboard 1 (Story 1)story1_v2.jpg

Storyboard 2 (Story 2)
story2_v2.jpg

The second time around doing the story boards I would say I did not learn as much as version 1. However, I was able to edit and adjust my story boards faster. I think this is because I had a clear understanding of what I wanted to add and adjust and how the story should be emphasized. I added color to make the things look bright and eye catchy. Moreover the colors I added has significance , like I applied pink color to denote wonder woman(as she is a girl and pink being a girly color.) I used obvious colors for grass and sky as green and blue respectively. I used dark blue to denote the lighting effect in story 2. I kept the river blue and the hand in the extraordinary card in details section as human skin color. I even showed the enemy troop as bold black the amazon villagers as  light black. For story 1 I added two more slides by showing it with arrows, the 2 slides show how wonder woman not only creates the force field just not around her but around the village a s well.As pointed out by a classmate during critique session, I could noted this point that wonder woman is saving the whole amazon village.  Not only in the story board of stories 1 and 2 , I also applied color to the poster or the extraordinary card with the same significance as before.I think this distinction helps the reader of the story understand what is in the present and what is in the past.  After seeing what people did with them in class I realized how valuable they are to show how the user is interacting with the device.

Reflection between V1 and V2

The feedbacks my partner gave me for version was really helpful and a lot I have changed in between for both storyboard and poster this two versions.

For the Extraordinary poster I have added color.  I used obvious colors for grass and sky as green and blue respectively. I used dark blue to denote the lighting effect in story 2. I kept the river blue and the hand in the extraordinary card in details section as human skin color. I even showed the enemy troop as bold black the amazon villagers as  light black.I also added interactions  in different colors to help show the reader what was happening without using written annotation. I think this really emphasizes how the user interacts with the device and what is happening in the story.

 

I would take this opportunity to appreciate this prototyping skill. This is a very important in terms of understanding your user and   Overall, I think this is a valuable prototyping skill because it not only helps you potentially learn more about the characters you are portraying but it also helps you for a story that you can then use to market the device. The process is practically too time taking and effort-full so how much its feasible in work life that’s a question mark in my mind. But the most advantageous part of story boarding I found was narrating the story without even writing a single line/word. For this particular assignment I was able to show the interaction between my user and the device successfully. For extraordinary card I did concentrate on the user analysis but for story boards I concentrated only on the interaction of the user with the device.

I think this prototyping skill can be best used in nursery books to let children understand the story better through pictorial diagram. This is something most of us must have already seen. Its a fast as well as I should say efficient way of sharing with people who is that not competent with reading and understanding stuff (like children). Its easy understandable way of reading and acquiring the knowledge.