InteractivePrototype-Group:Metal Pony Z
From CS 160 User Interfaces Sp10
Contents
|
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.
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.
Fundraising
- 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
 |  |  |  |
Storyboards
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.
 |  |  |  |
 |  |  |  |
 |  |
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!
 |  |  |  |
 |  |  |  |
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 |
|---|---|
| |
|
Badge Tracker
| Image | Caption |
|---|---|
 |
|
| |
|
 |
|
 |
|
| |
|
| |
|
Fundraiser
| Image | Caption |
|---|---|
| |
|
| |
|
| |
|
 |
|
| |
|
 |
|
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.
Fundraising
- 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.
Other
- 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.
'"Fundraising"'
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
- Task 1: File:MPZ-HiFi-Task1.mov
- Task 2: File:MPZ-HiFi-Task2.mov
- Task 3: File:MPZ-HiFi-Task3.mov
