Forward Strides - GR2

Scenario

Coach Martin is trying to plan a track workout for today. He wants to change the workout depending on how well his runners have grown, but has only a vague idea and doesn't want to risk injuring his runners. He's been taking down times for the last 3 years at Packer Collegiate Institute as the head coach on a clipboard. As a result, Coach Martin has now a drawer full of times for his team. He has attempted to use Microsoft Excel to put all the workouts in sheets, but it is too tedious to rewrite a season's worth of times. And because Martin is not especially proficient at Excel, all he can do transferring times to excel is collect them in one place. Martin has now looked to Forward Strides to help him solve this problem going forward.

Task Order:

1. Put his team into the Forward Strides system
2. Enter a workout and assign members to workout
3. Take times during workout on this device
4. Disply results in a nice visual representation

Design Sketches

Stephen Zhang

Design 1:

Goal: Designed with a focus on workouts

INTERFACE: Menu bar displays today's workout, previous workouts, and a performance trend button

First page is the today's workout page after expanding. Times/Stats can be taken by clicking on one of the line next to an athlete's name.

Adding a new tab is simply clicking on the new event button and then filling out who belongs in this group.

This second page is the past workouts page. Here you can see the date at the top; pushing the arrows move them by day / week / month (Some interval).

Each event for that day is listed, expanding them gives you the time/stat that each athlete performed.

The 3rd slide I'd like to bring up is the results slide. Here, you select the date range that you'd like. Clicking may drop down a calendar widget or just allow input with assisted formatting. All members ever put on a workout on the program will be available for selection. There is also an all members checkbox next to the Members header. Then the coach can select which factor's to show the graph against. It could be date, it could be workout difficulty, it could be any factor that was detailed in the events section in another slide. More features can be fleshed out but this is a bare bones idea at the moment. The graph should update in real time as you add members or change the x-axis without much reloading. The transitions would also need to look smooth.

Design 2:

Goal: Standard use

Design: Focus on Extremely small display

Listed below is an example of the app on an iPhone. Much like an iPhone app, the menu bar is along the bottom in icons that detail what each tab does.

The first screenshot is how to take times. On the left is a list of all the events. Tapping one shows the members in the group. Tapping a time box allows users to type in a time via the iPhone layout. Then saving it will save one instance of that event time to the user.

The second screenshot is how to make workouts. Clicking the plus sign allows you to add a new event for the current workout. Then fill out the title, the distance/field event, the # of repetitions to be performed and the groups / individuals who are doing that portion of the workout.

The third screenshot is when viewing a profile of an athlete. It shows their name and groups they belong to. In addition, it shows all the events / times for that day. Clicking on the see more at the bottom will show previous days' workouts.

The final screenshot is the graphical trends interface. First idea is that the user can pick which athletes to include (multiple is allowed), what distance, and what x axis to run it along. When one of each field is selected, the graph will update, and clicking on the graph brings it to full screen. This is cluttered and needs to be refined as to how to get the best looking graph. maybe make the graphical trends interface multiple screens, selecting first event, then members, then axis. This allows you to filter down the available athletes to the pertinent event.

Design 3:

Goal: Tablet usage

Design: Focus on efficiency and ease of use during workouts

This is my third design focusing on tablets. Diagram 1 is the member screen. Here, a user can add members by hitting the big button on the upper right, and then adding additional information such as their picture or year. The lower half of the screen that can be scrolled to is the group screen. Here, you can add a new group, and drag in any members from above. This allows you to quickly move people from one group to another during a workout.

The second screen is the workout's screen. The currently created events are put on the right hand side, with a small tab to expand for additional details. The main portion of the screen is the add new event window. Here you can focus on adding each new event for today's workout. This page will update every day according to your tablet's clock.

The 3rd screen is the Times screen. After discussion during friday's studio, this is an outdated feature. I think that there should instead be 1 large start and stop button at the bottom, and everytime the coach taps the start button, it would take a split time down. A second screen with user profiles would show up when assigning times. The time to be assigned would be at the top, and then tapping a profile picture of an athlete will assign that time to him. The safety of this design is low, but incredibly quick for a coach trying to quickly record times. A slower way to error correct can be found on workout page after the workout is completed for the day. The urgency put on being able to only see the current workout forces coaches to update their mistakes quickly while it is still fresh on their mind.

The last screen is the member's screen. This screen is found when expanding one of the member's by tapping on them. This brings up their past workout from yesterday and previous workouts and then the workout for today and his times currently or how many reps he or she needs to do.

The screen not shown is the performance screen. Because I could not develop a different enough prototype for this screen, I am most likely going to use a similar screen to Design 1's, with touch screen capabilities.

Tyler Singer-Clark

*Currently out of town. Will update when he returns.

Raven Clayborn

First, it is important to keep in mind that the project will focus largely on mobile usability, particularly tablets, and that the designs below focus on the problem of coaches having an efficient means to record and recall player performances.

That is, these design focus on Task 3: inputting player workout times / scores.

Design 1:

The first design focuses on simplicity, chunking, efficiency, and feedback.  Additionally this design is robust to different training routines.

The user selects the player, routine, and date using the sliders and calendar selector on the top.  The user then inputs performances for that routine and gets feedback about how that player has been trending as well as recent performances.

Design 2:

The second design focuses on efficiency of inputting scores for multiple players.  Some robustness is sacrificed as the UI is more tailored toward fast recording the performances of a number of players in a team.  The user selects the date and routine at the top of the screen (another selector, such as 'Player Group' could be added).  The first and second columns of the main UI list player numbers and names.  The third column displays a range of likely values for player performances based on previous performances, so that to record a particular performance the user (a coach) need only tap the screen once..  The range is horizontally slide-able, and a 'long press' can pull up a touch-screen keyboard for text input, in the case that the value is outside the desired range.  The last recorded value per player is faintly highlighted and their performance for this routine/day (if recorded) is boldly highlighted.

For continuous-domain performance recording, a slider is used instead of the selector above per row. 

Design 3:

This design focuses on being robust and information rich.  It is lightly metaphorical in that it takes after an actual clipboard.

The user selects the routine/date at the top of the screen, and the scores for all players for that routine/day are displayed.  Scrolling (sliding) vertically shows information for different players and sliding horizontally shows information for different exercises (if there are too many to display).  The user can then on one screen edit information for any player and for any exercise by pressing on a table entry, which brings up a quick interface for selecting the desired value.  A double tap will allow standard text input via a pop-up number pad.

The default interface is a slider with values displayed in a likely range and the slider initially set to the last recorded value for that player/exercise, but the exact interface will depend on what is being recorded--for instance, if recording a time, a clock-based selector would appear.

Tabs on the bottom allow the user to navigate to other screens, to add players, set up routines, view results, etc.

For safety, the table is only editable by default if its date is the current day.

The primary focus of these designs overall is on efficiency of input.

Josh Duncavage

Design 1 Mobile Interface:

This is an example of a mobile interface for coaches to input data regarding their athletes' workouts as well as make last minute adjustments.

Groups Page:

This can be considered a central page which allows coaches quick access to each athlete and group, as well as a link to begin recording times.

Training Page:

This is the primary page that coaches will use to record times and assign them to athletes in a group.

Workout Page:

This page shows the current workouts for each group, and allows coaches to make last minute changes to these workouts.

Athletes Page:
This is a page with the functionality to allow Coaches to see which athletes are members of which groups, and to change those associations if necessary.

Design 2 Tablet Interface:

This is the primary page which shows a quick overview of the weeks workouts.

This page is the workouts page, allowing the user to sort by groups as well as by date for easier editing of workouts.

This page allows an all in one input for all the workout groups.  For the ease of the user, the user can prefer to enter all of the results by group, or all of the results by date.

This page is the performance page that lets coaches and scouts see trends in their athletes performance.

Design 3 Computer Interface:

The computer interface, unlike the two mobile interfaces, focuses more on reading and manipulating data that has been entered into the system rather than the efficient input of data and quick workout and group changes.

The main page here has a global search at the top, a menu pane to the left, and recently viewed and favorites list of charts and diagnostics.

This page is for coaches and scouts to search for workouts based on groups and/or athletes, and then compare the selections in the bottom two panes.

This page is more of a graphical representation of the data.  Users here will want to select filters such as time frame, groups, athletes, and even tags for specific workouts.  The chart segment in the page would allow overlays of multiple selections for an easier visual representation and comparison.

Storyboards

*IMPORTANT: DUE TO SOME ISSUES LAST WEEK FOR OUR TEAM, I (STEPHEN) AM THE ONLY ONE WHO HAS FULLY UPLOADED ALL 3 DESIGNS. FOR NOW, I WILL BE STORYBOARDING MY IDEAS AND THE IDEA PRESENTED AT STUDIO. THIS WILL BE UPDATED WHEN MORE ARE UPLOADED. SORRY FOR THE INCONVENIENCE.*

Storyboard 1

This design is probably the learnability of this design is low. Here, the design goes as follows. Martin enters the today's workout and creates an event. In the event he adds his users one by one into the event he wants them to do. This establishes them in the system as a user. On the same page, after entering in a user, he can immediately start timing by clicking on the line next to a person and writing down his time. This saves it to that user listed right there on the page and so forth till practice is over. For certain tasks such as forgotten parts of the workout, adding in a new event is easy. simply hit the + new event button on image 1, and then add the people who need to be there. Afterwards, he can review previous workouts individually at the past workouts tab, or go to the graph picture to view the performance of his runners over a period of time.

Storyboard 2

This design was developed to encourage mobile device usage. The feedback and use case most likely for coaches is taking times and stats down at the workout location. As such, most coaches would prefer not to bring their full laptop, especially if its at the swimming pool for swim team practice. This was designed for extremely small displays, such as an iPhone. Although I have both separate ideas here, the combined idea is what was presented during Studio. Taking the menu bar and the graphic display from the first image, and combining it with Josh's mobile phone version, this version was created. The storyboard works like this: First, Coach Martin will open up his iPhone and press on the members button on the menubar. This opens up the Edit Athletes page, where Martin can create users and drag and drop them into groups he creates. Then he can create workouts for specific groups of people. This includes what event and how many reps. Then Martin will click on the timer button, which brings up the stopwatch. Here, we considered both a large button at the bottom for starting and stopping the timer as well as adding the stop and start functionality to the volume rockers on mobile phones. After starting the timer, tapping an athlete would save that time for that specific person. Tapping multiple times would save multiple times for that athlete. After the timing is done, he presses stop and can move onto timing another group or event. Finally, he can tap the performance tab to bring up a series of screens. First he picks which event he wants to look at. Then Martin taps which groups or individual athletes he wants to see. Then he taps which axes to generate the graph around, and finally a full screen graph is shown. Tapping the graph will bring up a dialog box asking if the coach is done looking at this graph and would like to generate a new one or return to dashboard. If he returns to dashboard, he'll be left on the edit team page. If not, he will be brought to the event selection screen again.

Storyboard 3

This last design was designed with a tablet interface in mind. Here Coach Martin would first enter in his users, and then drag and drop them into groups that he makes. Then he would head to the workout's page where he can create a workout for his athletes. Afterwards, he goes to the timer page, where he can enter in times for each athlete. This screen would probably be better now after studio if it started a large timer and each time a runner runs by he taps their picture or name to take a time down. Finally he can use a interface much like design 1 and 2 to filter by event, then group, then axes and create a graph to display the trends the coach wants to see.