LoFi-Group:The A-Team

From CS 160 User Interfaces Sp10

Jump to: navigation, search


Team Members

  • Jeff Bair: The N00B - Interviews, Video Script, contributed to video prototype, interface sketches/scanning, Methods.
  • Long Chen: The Friend - Introduction and Mission Statement, Pictures/Captions, Drawing/Scanning, Interviews, Demo Script
  • Richard Heng: The Director/Editor - Interviews, interface design/sketching, shot & edited the video prototype, Results, and Discussion
  • Annette Trujillo: The Recorder - Interviews, helped design paper prototype, and helped with writeup
  • Jason Wu: The Pro - Interface sketches, consent form, interviews, helped create the video prototype and wrote about the process

Introduction and Mission Statement

Skateboarders are constantly seeking out new places to skate and looking to improve their skills. Novice skateboarders face several problems that may hinder their efforts to improve their skills and learn new skateboarding tricks. Our system allows users to keep track of learned tricks with a checklist, locate nearby skate spots, add new skate spots to share with others, as well as record videos of themselves performing tricks. The interface allows them the freedom to associate the videos to tricks on the checklist and to geotag the videos to locations on the map. They can also edit the videos and send them to other users to share and get feedback. Furthermore, they can watch videos posted by other users to learn how to perform tricks at each skating spot.

We will conduct low fidelity experiments to quickly and accurately let real world users test our interface to detect problems and to comment on what functionalities could be added or improved. It is an important step of our design process as it allows rapid feedback and gives us the opportunity to correct usability issues early on in development. Based on the feedback, we could also make minor tweaks and adjustments to cater to user needs and to improve the intuitiveness of the interface.

Mission Statement: The goal of our application is to provide a easy-to-use and portable community for skateboarders to share and connect. The application will help beginning skateboarders learn new tricks, improve their skills, and find new places to skate. The checklist functionality and user generated content will form a relationship between the growth of the user and the development of the application. The application will attempt to simplify the lives of skaters by consolidating the roles of video cameras, computers, YouTube, and maps.


Our prototype was created with sketches on paper. We sketched them out first, and then outlined them. We used an iPhone mask to put all the screens on to give a simulated feel. In order to have the interface react to users' inputs, we made cutouts of different text and put them over the text to be replaced. For example, we had checkmark pieces that we would put over the x's once the user had completed a trick. More descriptions of each of the frames can be seen below.

Home Page
Trick List [Difficulty]
Trick List [Type]
Image: Title 1
Image: Title 2
Image: Title 3
The home screen has three functionalities: watch a video, upload a video, or add a skating spot to the database. The trick list view has a checklist of all the skating tricks possible. This view sorts the tricks by difficulty and lists a checkmark by the tricks that the user has completed. The user can also access the associated personal video of each trick. The same trick list view, but now the tricks are sorted by type - such as flips or grinds or jumps.
View for a Trick (Kickflip)
User Videos for a Trick (Kickflip)
Video View
Image: Title 1
Image: Title 2
Image: Title 3
A trick view is populated when a trick is selected. In this case, the trick has not been completed. Clicking on "User Videos" shows all the other user videos for this trick, clicking "My Video" shows current user's video for this trick, if any. The list of other user videos for a trick. The videos can be sorted by proximity (the nearest tagged location), rating, or date uploaded. The standard video view window allows the user to watch the embedded video in normal speed or slow motion. Also shows the information of the video, and gives the user the abilities to share or favorite the video. This concludes the first home page functionality of "Watch Video".
View for Add Video
Editing Video being Added
Selecting Location for Video Being Added
First view users see when they want to add a video. This lists all the videos already recorded by and stored in their phones. The user must edit trick name and location for a new video to be uploaded. The user can geotag the video to the current location or to an existing spot in the database.
Selecting a Existing Spot on the Map
View for Add Spot
Selecting a Defining Picture for Spot
If users choose to tag the video to an existing spot, they can see a map with all the spots marked on it. Clicking on a pin selects the spot. This concludes the second home page functionality of "Add Video". This Add Spot view is shown when the third option is selected from the home page. Users can select a picture to tag to the spot, edit the spot name, and select the spot coordinates/location. To select the picture, users can select an existing photo from their phone or take a new picture.
Taking Picture
Camera Roll
Edit Location of Spot
The camera function pops up if the user decides to "Take Photo" for the new skate spot. The pictures already stored on the phone are shown is the user chooses to "Select Existing" For the location of the spot, users can select their current coordinates or select new coordinates for the new spot.
Select Spot Location from Map
Sharing a Video
To assign a new coordinate, users can drop a pin and move it around the map, specifying the location/coordinates of the new spot. This concludes the third functionality of "Add Spot". The keyboard that pops up for any text entries. This pops up when users decide to "Share" their videos with friends.

Video Prototype

Video Link

File:Skater App Video.zip

The Process

We first worked together to develop a script that included live-action sequences, which would provide realistic context for our three tasks, as well as stop-motion sequences with voiceover narration to demonstrate the functionality and intended use of our prototype. We then filmed the live-action segments with a point-and-shoot camera and used SAM Animation with a webcam to record the stop-motion UI interactions. Later, we used iMovie for editing. We arranged the various clips according to our script, and then Jeff, the primary user in our video, dubbed over certain parts of the live-action clips as well as narrated the stop-motion sequences, which we lengthened as required to sync up with Jeff's voice. Lastly, we used iMovie to add smooth transitions between different clips for a more pleasant viewing experience.

Interesting Techniques

To compensate for the poor low-light performance of the borrowed webcam, we tried many different combinations of light sources. In the end, we found that placing a white coffee filter between a lamp and our lo-fi prototype did an excellent job of diffusing the light, creating just the right amount of light we needed to get good shots for the stop-motion video.

Also, rather than sync voiceovers with the stop-motion frames in SAM Animation, we decided to import the stop-motion video into iMovie and perform the syncing there. We found that this method offered more flexibility than SAM Animation, as we could easily stretch out certain stop-motion scenes in order to properly match up with the voiceovers.


We had many difficulties using the SAM Animation software and the borrowed webcam to create our stop-motion sequences. Lighting was a major issue, it took us much trial and error to find an adequate solution. Even after we managed to find a decent source of light, we quickly realized that the quality of the frames captured by the borrowed webcam was quite poor, and we could barely read the text on our lo-fi prototype in the resulting videos. To remedy this problem, we decided to use a better webcam, which unfortunately was not a model that could be mounted on the borrowed stand, so we had to improvise. We also used dark ink to trace over all of our prototype screens, which we originally drew in pencil because we thought it would be easier to make quick improvements to the prototype between interviews.

In addition, one thing that really disappointed us about the SAM Animation software was the lack of copy and paste functionality for frames. We would have had a much easier time of syncing the voiceover to the stop-motion if we could have simply copied and repeatedly pasted frames that were supposed to remain onscreen for extended periods of time. We eventually overcame this problem by using iMovie to do the syncing.

What Worked Well

Although using SAM Animation was quite tedious and despite all of the setbacks we encounter throughout the video prototype process, we were impressed by the video we managed to create. The stop-motion technique allowed us to simulate interactivity with only a pen and paper prototype, and we were even able to include transition effects between different screens that gave the video prototype an iPhone look and feel. Stop-motion may very well have been the best way to demonstrate the features of our app without having to actually create a high fidelity prototype or use computer animation.


1st participant:

Our first participant was someone who skated once in a while and could only do basic tricks. He started skating at around the age of 16 and has been practicing tricks since he was 19 but has not become an expert at it and is still working on it. Thus we could say that he was a beginner at skateboarding. We chose him since he is the ideal target user group for our app, someone who knows how to skateboard but wants to start learning tricks and is new to it.

2nd participant:

Our second participant was someone who had skated since he was 12 and he was fairly proficient in skateboarding tricks. We could say that he was an advanced skateboarder and could do a fair amount of tricks. We chose him since we wanted varying degrees of expertise in skateboarding and we could see how advanced users react to our app that is geared more towards beginners.

3rd participant:

Our third participant was someone who skated casually since high school but did not do many tricks. Much like our first participant, we could say that he was a beginner and was an ideal target user for our app, someone who knows how to skateboard but wants to start learning tricks and is new to it.

4th participant:

Our third participant was also someone who started skating in high school but had tried a couple of tricks and learned them already. We could say that he was an intermediate user which meant that ideally he should be able to still learn some of the more advanced tricks with our app. We wanted to see how he felt about our app and how it could help intermediates as well who have already learned a couple of tricks.

Roles for each member:

Jeff: Greeter

Richard: Computer

Jason: Observer

Long: Facilitator

Annette: Observer

Testing Procedure:

For our testing procedure we first showed our participant how to do a basic function of our application. We showed them how to browse the list of tricks on the app which from the home page we would hit 'Watch Video'. This goes to a 'Tricks List' that was scrollable and we showed them that they could list the tricks by difficulty and type. In terms of positioning we had at least one person observing what mistakes the interviewee made while the greeter prodded the interviewee with questions just to make sure we had an idea of what the interviewee was thinking while performing the tasks. Our computer switched out the views of the iPhone while the paper iPhone itself was stationary and we slid the screens under a flap to simulate the transitions. Our facilitator made sure that everything was in the correct order and any questions were directed to him.

Test Measures

What we looked for:

We took down notes on how many errors the user made while going through the tasks according to how we typically thought the way to go about doing a certain task should be. We also tried to ask the interviewer on input about certain features such as little thumbnails of the videos that you are watching. Also we asked if the interviewer had anything that they particularly liked or disliked about the app even if it did not cause an error for the user.

Process Data

Most of the issues with the watch and add video were inconsequential. However, Sharing a video caused huge headaches with all except one of our interviewees. Also having the watch video button bring up a list of tricks was a little disorienting for most of our users but they were able to get through it. Interestingly our add video seemed to have few problems except for when they tried to just add the video without editing the info of the video. A default name and location of the video may be useful.

Number of Errors
Tasks Easy task Medium task Hard task
Interviewee #1 0 1 3
Interviewee #2 0 0 6
Interviewee #3 0 1 7
Interviewee #4 1 1 0


We asked our users to perform the three tasks browsing videos, uploading and tagging videos, and sharing videos.

For browsing videos, most of the participants understood how to use the interface, and could figure out how to get to the videos. Some were confused by the fact that a list of tricks was the first item to be presented, and expected a list of videos instead. It was clear for the users after they selected a particular trick, that the "User Videos" button would take them to an view where the other uploaded videos would be shown. Although, most people selected the video with the highest rating, so that might be a good candidate for default sort order.

Adding videos did not have too many problems, although we did learn that it might be useful to make it obvious to users that they need to fill out the information for the video before they can finish adding the video. Perhaps it was unclear to the users that uploading videos accomplish more than making the videos public.

Sharing videos by sending e-mails was by far the most problematic task. Most users struggled to find out how to share the videos. There was no link on the home page, and the share button was multiple levels of views deep into the interface, which the users did not like. The dialog that popped up was also not clearly designated to require an e-mail address.

Overall, users enjoyed the interface and it's consistency with Apple's standards, but had problems with the visibility of some functions.


We learned from the experiment that there are some visibility problems with our interface, but we still have mostly successes. Our home screen was successful in the fact that it listed the common tasks. We feel that we should extend the home screen to have more common tasks. This would minimize the number of screens the user would need to traverse to accomplish their task. In particular, a share video button might be useful to minimize the steps for sharing videos.

The second thing that was apparent was that users want the interface to be different in response to their current goals. Our interface uses the trick list as a gateway to all the functions. We thought it would be nice to have this consistency to access functions, but we may need to change things due to the users responses. So for our video browsing, we might need to provide a large list of videos with extensive sorting options. These options would include the same types of sorting options we provide for our trick list.

Lastly, our sharing interface itself could be improved upon. Currently, we have a share button that simply prompts the user with a "To:" field. We could create another view that explicitly asks e-mails, or we could integrate the iPhone's existing contact system. And this action could be streamlined to the home screen as well. A share videos button on the home page could take users to a view that contains all the videos that the users have tagged. This view can again have extensive sorting options to allow users to quickly find what they are looking for.

The test did not reveal anything for the items which fell out of the scope of the three items. As for the items that did fall within the scope of the tests, our tests were hindered by the inability to use the user data. For example, we could not have the user enter their own videos into application. We therefore could not see the intricacies of how they would tag their own videos.


Consent Form


Interview #1

Task 1: Watching User Videos

  • Severity 2: After finishing the first task, the user was unsure of how to get back to the Home screen. However, this may have been due to the fact that our prototype was quite primitive and merely listed "Home" on the tab bar. This is likely a cosmetic problem because, in the final product, we will include a Home icon in the tab bar that will better match up with users' expectations.

Task 2: Adding a Video

  • No critical incidents

Task 3: Sharing a Video

  • Severity 4: During the third task, in which the user was asked to share his own video with a friend, it was not immediately clear to him how to do so from the Home page. He had to poke around through several screens before realizing that he had to go scroll through his checklist of tricks, select the trick associated with the video, select My Video, and then hit Share. Since sharing videos is a key feature of our app, we will need to come up with a way to make it much more user friendly. (Put an option on the home screen?)
  • Severity 2: After finding the Share Video screen, the user did not immediately realize that he was supposed to type an email address into the To: box. This is another cosmetic problem, and in the final product we will be sure to make it clear what the input should be. ("To Email:" and URL Field keyboard?)

Interview #2:

Task 1: Watching User Videos

  • Severity 3: When the watch video popped up a list of tricks he was a little disoriented since he was expecting actual videos.
  • Positive: He liked the little icons for the videos before viewing them.

Task 2: Adding a Video

  • Severity 3: When adding a video and editing the video info, he brought up the fact that what if the trick that he performed wasn't on the list. Something that we should think about since we would need to have a huge database of all tricks.

Task 3: Sharing a Video

  • Severity 4: When the user was asked to share a video from the home page, he had no idea how to do it. First he went to add video which requires adding a video before sharing it. So if he wanted to share a video that he just watched he would not be able to do it without going back to the main menu.
  • Severity 2: When the user hit the share button, he wasn't sure what went into the "To" part and just hit the share button with a blank input. We should give an error when the "To" field is blank.

Interview #3

Task 1: Watching User Videos'

  • Severity 1: When the user was asked to watch videos uploaded by others, he went straight to the List tab rather than select Watch Videos from the Home screen. We found this choice strange because we intended for users to be able to easily access the main features of the app through the home screen, but we do not believe this is a usability problem at all since both actions give the same end result.

Task 2: Adding a Video

  • Severity 2: During the second task, the user hit the Done button on the Add Video screen without selecting a trick type and a location to associate with that video, resulting in a pop-up box informing him that he must provide additional information before adding the video. (Perhaps we should make it more obvious the info is required?)

Task 3: Sharing a Video

  • Severity 4: The user had much difficulty in figuring out how to share videos. Eventually, he selected Watch Videos and from there managed to find the Share option for his video. This seems to be a recurring problem, and it is imperative we fix this problem before release.
  • Severity 2: The user mentioned that he would prefer if the keyboard opened automatically along with the "To:" box when trying to share the video with a friend. In our current prototype, the user must tap the "To:" box before the keyboard pops up, which we believed was more aligned with iPhone platform standards.
  • Severity 3: The user did not like having to go back to home and through four additional screens in order to share his video, and he stated that we should find some way to accelerate this process as well as make it easier. We should fix this problem because our app is based on user-generated content, and if users find it inconvenient to share their content, our app will not be very popular.


  • Positives: The user thought that all of the functions, with the exception of sharing a video, were very easy to use. Regarding the sharing video feature, he mentioned that the first time using it was difficult, but it was easy once he figured it out, leading us to believe that particular problem is not persistent.

Interview #4

Task 1: Watching a Video

  • Severity 2: During the first task, the user was a bit confused when he selected Watch Videos and was brought to the list of tricks. He tried to ask us how to see others' videos, but eventually he figured out that he needed to select a trick and then select User Videos.

Task 2: Adding a Video

  • Severity 3: Same problem as interviewee #3: tried to hit Done on the Add Video screen without providing all the relevant information.

Task 3: Sharing a Video

  • No critical incidents


  • Positives: He said it was "cool" that a user can sort tricks by type and difficulty. Also, he is a former iPhone owner, and he liked the fact that the our app is fairly consistent with iPhone conventions (e.g. when typing in a recipient email, the user must hit the "To:" box for the keyboard to show up; interestingly interviewee #3 disliked this convention)

Demo Script

Thank you for participating, this is our skater app. It’s an app for skaters to keep track of what tricks they can perform and also an app to help them improve. I will first show you a basic functionality, and then I will ask you to perform some tasks.

The first thing I’m going to show you how to browse the trick list: You can either press watch video from the home page or the list tab. The trick list can be sorted by difficulty, a single star is for the easier tricks and more stars being more difficult. You can also sort by type, such as jumps or flips or grinds.

Now it’s your turn to interact with the interfact: Your first task is to browse videos. Just pretend you’ve opened the app for the first time and wanted to look at some skateboarding videos posted by other users.

  • User presses a trick from the trick list.

You really want to see a kickflip.

  • User presses the kickflip trick and the kickflip videos page pops up.

Good job!

Now that you’ve watched a bunch of videos and learned how to do tricks, you can upload a video of yourself for others to see. Pretend you have already practiced a lot and had someone record a video of you using your iPhone. Your next task is to upload a video; can you show me how you would do this?

  • User finished the upload and the trick list pops up with a new check mark.

Great! Now your trick is check-off and the video is tagged to that trick.

Your next task is to share the video you just uploaded with a friend.

  • User presses send after choosing to share.

And now you’ve completed all three of our tasks!

What was your favorite aspect of the application?

Was there anything you didn’t like about our application? What other features would you like us to include?

Thank you for participating!

Script for Video Prototype

Cast Jeff: N00b; Long: Friend; Jason: Pro

  • Skate around

N00b: I think I got skating down. Maybe I should try out some tricks! I know! I'll use this buttery app I got called the Skate App on my iPhone! Hmmm, what do I want to do first? I guess I'll take a look at other user videos to see how other people do tricks.

  • SAM animation

N00b: All right, we're on the home screen let's hit watch video. Hmm what trick do I want to do? Let me list it by type. That's dope! Wait I didn't want that lets organize by difficulty again. Let me try scrolling a bit..hmmmm…I guess I'll take a look at kickflips. Oh wow, it gives a description of how to do a kickflip! Nice! Ummm, let's take a look at what other users have posted. Oh neat! There's little icons for each of the user videos! How cool! Let's see… I want to take a look at the one with the highest rating. That was sweet video! I'm gonna try it out now.

  • end SAM animation
  • Try skate trick and succeed

N00b: Oh cool I finally got that trick down.

N00b: Hey dude, dude, can you take a video of me doing this sweet trick?

Friend: Yeah sure no problem.

  • Do the trick

N00b: All right, thanks man.

N00b: Let me tag this video and upload it so other people can see it.

  • SAM Animation

N00b: So I want to add the video now…Oh cool, a list of the videos i've recorded with my iPhone. Hmm let's see I want to select which trick I've done. All right, let's look through this list…ah here we go, kickflip. Oh sweet it popped up. Let's edit the location now. Add to the nearest spot sounds good. Oh nice it selected it for me. Let's click done. Oh sweet I got a checkmark next to the trick I've done. That's awesome! I wanna share this video with my friends. Let's see, hit my video. Click share. Put in my buds email in the to box. Hit send. And I'm done! That's great!

  • end SAM Animation

N00b: Awesome, I sent the video to Pro.

  • Cuts to pro

Pro: Oh awesome, N00b just sent me a video. Let's check it out...hmmm...wow that was pretty good, I'll give it 5 stars

  • Cuts to N00b

N00b: Oh sweet, Pro just rated my video. Oh sweet he gave me 5 stars that's awesome! I love the Skate App!

[add comment]
Personal tools