InteractivePrototype-Group:Metal Pony Z

From CS 160 User Interfaces Sp10

Jump to: navigation, search


Team Members and Contributions (2nd iteration)

Linsey Hansen

  • developed the group sections for the fundraising portion of the app

Raymond Lee

  • developed the group sections for the fundraising portion of the app
  • wrote document

Hugh Oh

  • developed map overlay functionality for the fundraiser portion of the app

Kathryn Skorpil

  • developed the coding framework for the app
  • developed badge tracker portion of the app
  • setup an SVN to allow our team to collaborate on a single project
  • recorded demo videos

Peter So

  • gathered and input the information for each merit badge
  • composed interface layout for the individual badge view
  • wrote document

Problem & Our Solution

The Boy Scouts have made building model citizens a major focus of their program. To achieve good standing with his peers, the scout will have to be organized. The modern scout has several requirements he must fulfill in order to progress in the Scouting program. Currently, these requirements are spread across a collection of books for each individual badge that each scout must carry with him. The hassle of carrying around multiple books has caused many scouts to leave them at home. However, our scouting application, iScout, aims to prevent the inconvenience of the often forgotten, large and clumsy book, as well as provide other organizational tools to allow the scout to keep track his own progress, and also the progress of his fellow scouts. Specifically, our app seeks to improve the scout's awareness of the merit badge requirements for the set of badges he is currently working on by providing a means to look up a list of badges and their requirements directly from his iPod/iPhone and take note of his progress. Other tools include an event roster, a meal planner, and a fundraising group map/roster, all there to assist the scout in his most important organizational tasks.


Easy: "Keep track of personal progress in multiple merit badges and look up individual merit badge requirements." Based on nearly unanimous demand for a portable index of merit badge requirements. To meet this demand, our team set out to present an easy-to-use, familiar design for the scouts to navigate through the numerous merit badges, implementing a requirement check-off system and a progress icon for each badge.

Medium: "Keep track of friends' progress on merit badges." Advancement through merit badges is often done in tandem with other scouts. By allowing scouts to share one's badge work with another, they can better coordinate common badge-earning events together.

Hard: "Assign members of a troop to smaller fundraising groups to designated areas of a neighborhood." As a non-profit organization, scouting typically relies heavily on fundraisers to fund outdoor outings and other troop events. Several times a year, scouts will go into their surrounding neighborhood to sell goods, distribute food collection bags, and even pick up and clear christmas trees as a way to pay for camping. Our app provides a utility to help divide a scout troop into groups and draw on top of a neighborhood map to section off each group's coverage. The scout can also reference the driver's name and phone number for all groups.

Revisions of Initial Interface Design

Post Lo-Fi Testing Changes

Results from our Low-Fi prototype testing has shown where our initial interface design could be improved. Using the user fedback we made the following changes to the design and implemented them into this version of the Hi-Fi prototype.

Badge Tracker

In our user studies with our Wizard of Oz low fidelity prototype our initial badge tracker layout was received well and users had very minimal cosmetic issues with the interface.

  • To make the fraction of completed requirements more apparent, the fraction was made larger to make it easier to find.
  • We have added a new section for the badge tracker where the user can automatically view only completed badges, for a total of four sections: show all badges, show complete badges, show incomplete badges, and show friends badges.


  • When adding a member to a group, the user originally had to tap a "+" symbol on the right hand side of the table view cell representing that member. During Lo-Fi testing, many users failed to tap this button to add a member and instead tapped just the cell. In this iteration of our prototype, we have adapted this user behavior to simplify adding members. Additionally, when the user adds a member to a group, a red "X" image (where the "+" was supposed to be) changes to a green checkmark to improve feedback and recognition that the user has just modified the group roster.
  • When editing driver name and phone number, the user was originally able to edit those text fields by tapping them without entering any sort of editing mode. We found that this could be prone to erroneous user behavior in which the user accidentally edits the driver name or phone number. To correct this we have added an edit button to the top right of the navigation bar. This is a common arrangement in most iPhone applications.
    • In edit mode, the user is able to edit the driver name and phone number by tapping on the cell, and save that information by clicking the Done button (the "Edit" button turns into a "Done" button in Edit mode). This removes any possibility of accidental editing of the text fields.
  • In our Lo-Fi prototype, we did not provide a clear way to remove members or groups. In Edit mode, we have used a common iPhone design for deletion of table view cells in order to delete members and groups. Edit mode places (-) symbols next to editable cells (group or member cells) which allow the user to easily delete several individual cells. Deletion of a group predictably removes all members associated with that group from the group.

Unimplemented Portions of the Interface

We have implemented a majority of the functionality we displayed in our Low-Fi prototype. We have concentrated on implementing the most important features related to the tasks we set forth through the badge tracker and the fundraising portions of our app. We had several other tasks in the beginning that we did not test for the Lo-Fi Prototype, and the following sections display our rough sketches for those portions

Menu Planning

  • The toolbar will include views for menus, recipes, and dietary needs
  • The menus will have an area to input meals and costs for each meal
  • The recipes will include views to add recipes and their costs/person
  • The dietary needs will list any special needs people may have (vegetarians, no wheat, etc)

Events Roster

  • The different tabs will be for organization by event or by person
  • Selecting an event/person will bring up options to add events/people


Scenario 1: Merit Badge Woes

Scouts, Tom and Petey, find some free time in the afternoon at camp and Tom is worried about his merit badge requirements. Petey recognizes the all too familiar problem and pulls out his trusty iPhone and uses his new iScout app to put their scouting worries to rest.

Tom: Oh man, Petey. This American Cultures badge is giving me a really hard time. There are so many requirements I canʼt remember them all.
Petey: You should get this iPhone app I have called iScout.
Petey: I can look at the badge tracker here, and view all my badges.
Petey: Here I can see all the badge requirements for the American Business Badge!
Petey: Oh wait, I just finished this requirement. [check it off].
Petey: This app is pretty cool, huh?
...Sometime later, Tom also gets the iScout app. Tom: Hey Petey! I've got the iScout app! Why don't you check out my progress on your phone?
Petey: OK! Let me load up the badge tracker again...
Petey: Oh, I see you're almost completed with the American Business Badge too! This is great, now I can keep track of your progress and you can keep track of mine!
Petey and Tom: Let's be badge buddies!

Scenario 2: Fundraising Flurry

Scouts, Tom and Petey, are in charge of organizing their Boy Scout troops next fundraiser. They have already picked out the neighborhood where they want to do their fundraising but are having trouble dividing the troop into small groups to split up and cover all the houses more efficiently. Petey's iScout app comes to their rescue!

Tom: Man, I wish there was an easy way to manage our fundraising groups. Petey: I know! Let's use our iScout app's fundraiser function!
Petey: Let's check out my fundraising Group, Group Z!
Petey: Oh, there's our driver and his phone number. Let's add a new neighborhood to our fundraising route....
Petey: There! Wow, we have a lot of ground to cover!
Petey: I think Raymond wanted to fundraise with us! Let's add him to our group.
Petey: Yay! Raymond is officially on our group.
Petey: Let's check out where everyone's fundraising!
Tom: This app makes everything so easy!

Prototype Overview

Feedback on the iScout's interface design gathered from the user studies from the Wizard of Oz Lo-Fi prototype have been incorporated into the second phase of development: the interactive Hi-Fi prototype where functionality has been implemented onto the iPhone.

Overview of the implemented UI

Image Caption
  • iScout home screen used to navigate to the four sections of our app.
    • Badge Tracker
    • Fundraising
    • Menu Planner
    • Event Roster

Badge Tracker

Image Caption
  • The Badge Tracker view. This section of our app allows the user to navigate across its four views using the segmented button control at the bottom of the screen:
    • View a list of all the merit badges and his progress in each badge
    • View a list of badges he is currently working on
    • View a list of his friends and their progress on individual badges.
  • In the All view, a list of the merit badges is shown so the scout can easily browse through all the badges and has quick access to their requirements.
  • In the Individual Badges view, a detailed description of the merit badge and a scrollable list of requirements is shown.
  • Requirements can be checked off as they are completed by tapping the check box next to each requirement. The fraction of completion at the top of the view is updated to reflect the scout's progress on the badge.
  • A due date can be assigned for individual requirements to help the scout complete the badge in a timely manner.
  • In the Incomplete view, a scout can easily view all the badges he is currently working on.
    • Tapping on the individual badges brings up the Individual Badges view containing the badge description, requirements and due dates.
  • In the Complete view, a scout can show off all of this completed badges in a single view.
    • Tapping on the individual badges brings up the Individual Badges view containing the badge description, requirements and due dates.
  • In the Friends view, a list of the scout's friends are displayed.
    • Tapping on a name brings up the friend's list of completed and in progress badges.
  • In the Friends Badge view, a list of the friend's completed and in progress badges is shown.
    • Tapping on the individual badges brings up the Individual Badges view containing the badge description, requirements and due dates.


Image Caption
  • The Fundraising Groups view.
  • The individual cells can be tapped to access that specific group.
  • Editing mode, in which groups can be added or deleted, is accessed by tapping the Edit button.
  • The group color, displayed next to the group name, is also the color of the group's overlay in the fundraising map.
  • The bottom toolbar allows the user to access the troop-wide map.
  • The Troop map, accessed from the Fundraising Groups view. This map displays all color-coded overlays of all fundraising groups in the troop.

  • The individual group view, accessed from the Fundraising Groups view.
  • Driver information
  • Edit Map presents the group's corresponding fundraising area map.
  • Names of the members of the group are displayed.
  • Edit Button
    • The user taps the edit button to enter edit mode.
    • In edit mode, the driver information text fields become editable.
    • New members may also be added.
  • The individual group view, in Edit Mode.
    • The user taps the edit button to enter edit mode.
    • In edit mode, the driver information text fields become editable.
    • New members may also be added by tapping the + symbol next to Add New Member
  • Done button saves changes.
  • The add members screen, accessed from the individual group menu.
  • Scouts in the troop may be added to the current group by tapping the cells.
  • An X signifies that the member is currently not in the group, and a check means that the member is currently in the group.
  • Adding a member from another group to the current group automatically removes that member from the old group.
  • The edit map screen, accessed from the individual group menu.
  • The user can tap points on the map to pin points of a color-coded polygonal overlay, and save that overlay as the fundraising area for his group.
  • The user differentiates points of new polygons from old polygons by using the bottom toolbar.
  • Several overlays/regions can be saved per group.

What was left out and why

For our Hi-Fi prototype, we omitted functionality that was not demonstrated in our Low-Fi prototype and does not directly aid in completing the three user tasks defined from our user studies.

Badge Tracker

  • We implemented the methods to read in friend's data, but we did not set up network/server access for it, so we used Wizard of Oz for it so it would still be usable. Please read the Wizard of Oz section of this write up for more information.


  • We have left out "sharing" of fundraising group information between friends for now, as it is not directly relevant to the user interface.
  • When viewing fundraising group overlays on the fundraising map, our intention is to allow the user to tap the overlay shapes to access the corresponding group. This was difficult to show in the low-fi prototype due to limited screen space for displaying instructions/affordances, and as a result our Hi-Fi prototype does not yet have this functionality either. We plan to implement this functionality in a future iteration.


  • The event roster and food menu planner remain unimplemented, because they are unrelated to the three tasks we set forth for the Low-Fi prototype. We plan to implement them in a future iteration.

Any Wizard of Oz techniques that are required to make it work

Badge Tracker

We had to use Wizard of Oz for the friend's portion of the Badge Tracker since we don't have any way to share friend's data across iPhone. We would eventually like to use Bluetooth or a server for this information in the future. However, for now it is part of our core data database.


A region on a map can be assigned for each group, however the collection of individual regions for each group do not appear in the Troop Map. In the future the assigned regions will be saved as coordinates and updated onto the Troop map so that any changes made to the individual regions in the groups' view will also be changed in the Troop Map.

Documentation of any code not written by the team (libraries used, etc.)

Craig Spitzkoff: Framework for map overlay based on Spitzkoff's projects and tutorials.

Operating Instructions

Using the Badge Tracker Section

1. Tap on the Badge Tracker Icon from the home screen to open the Badge Tracker.

2. Use the navigation bar at the bottom of the screen to switch between views in the Badge Tracker. Tap "All" (default) to view a list of all merit badges. Swipe your finger up and down the screen to scroll through the list of badges.

3. Select a badge by tapping on the badge icon to pull up a view containing a description of the badge and the list of requirements.

4. To assign a due date to a badge requirement, find the requirement by scrolling through the list and tap on the blue arrow icon next to "Due Date:." Select a date using the date picker that popped up and tap "Done."

5. To check off a completed requirement, find the requirement by scrolling through the list and tap on the box to the left of the completed requirement. A check will appear in the box to indicate you have completed that requirement.

6. To view only the badges you are currently working on, tap "Incomplete" in the navigation bar at the bottom of the screen. Clicking on the badge icons will show its list of requirements and your progress in the badge.

7. To view only the badges you have completed, tap "Complete" in the navigation bar at the bottom of the screen. Clicking on the badge icons will show its list of requirements.

8. To view your friend's badges, tap "Friends" in the navigation bar at the bottom of the screen. Select a friend's name from the list that appears and a list of his completed and in progress badges will be displayed.

Using the Fundraising Section

1. To create a new fundraising group, tap on the "Fundraising" icon from the home screen. A list of current groups will be shown.

2. Tap on edit at the top-right of the screen. The list changes to edit mode and "Add New Group" is now available in the list. Tap on "Add New Group" to begin entering information about the new group.

3. Enter the new group's name and tap "Done" at the top-right of the screen. The group will be added to the list of groups. Tap "Done" to exit edit mode.

5. Tap on the group's name to edit the members of the group. The group's information view will appear.

6. Tap "Edit" at the top-right of the screen to edit the group's information.

7. Enter the driver's name and phone number by tapping on each field and using the keyboard to enter the information.

8. To assign a group to a certain area of a map, tap on "Edit Map" to bring up a new view with a map.

9. To draw a new region on the map, tap on "New Area" at the bottom of the screen and then tap on the map to mark off an area. Once you have finished drawing the region tap "Save Map" and the region will be saved to the group. Tap "Done" to return to the group information view.

10. To change the color of the group, tap on the color block in the group information view to bring up a palette of colors. Tap on the desired group color and tap "Done" to return to the group information screen.

11. To add members to a group, tap the "+" icon next to "Add More Members" to pull up a list of people in your scout troop. Tap on the names of the people to be added to the group. People assigned to your group are marked with a green check and those that are not are indicated with a red "x". If people are already assigned to another group, the group name they are assigned to is listed below their name. Tap "Done" to return to the group information view.

Video Demo

Source File

[add comment]
Personal tools