Design

Login page

The login page is the first page the trainer sees.

Trainer Home page

Logging in takes the trainer to his or her home page.  The trainer's home page presents the trainer with athletes that he or she has been working with, giving them a snapshot of the health and injury status of the students they work with.  The user can view the profile page for an athlete by clicking on their thumbnail if it appears, or using the auto-completing search bar if it does not.  If the trainer wants to add a new athlete, clicking on the "add a new athlete" button brings up a form to fill out their vital information.  The look and feel of this page has changed very little since the original paper prototype.  One important difference is the way new athletes are created; rather than having a "+" button next to the search bar, the button now explicitly states that it is for adding a new athlete.  This helped with usability for first time users.

Athlete profile page

The athlete profile page shows the trainer information about the athlete.  The trainer can see his personal info (name, hometown, sport) as well as information about his health, injury history, workout plan.  In the upper right is the athletes status; a short summary of his current health and buttons that allow the user to change that status.  Below are three tabs: workout program, injury history, and notes.  The workout program is the most interesting of these.  On the left, the user can find exercises that can be added to the current program by dragging and dropping onto the current workout.  The sets and reps of exercises can be changed by clicking on the values, and exercises can be removed by clicking on the "x" button on the right.  Clicking on the injury history tab will bring up a list of the athletes previous injuries and clicking on the player notes tab brings up a list of notes, which can be added to by typing in the box and clicking the add note button.  This page changed significantly from the paper prototype.  We removed images of the exercise to make the page aesthetically simpler, and changed the way dates worked.  Based on the feedback we received, we decided that rathe than having "Day 1", "Day 2", etc. it was better to organize the workout by weeks.  Also, since many users seemed confused by the ambiguity we changed the interface to give concrete dates as well.  Finally, many users, in all of our user tests, struggled with adding exercises to the workout.  Most didn't intuitively guess that exercises needed to be dragged and dropped, so we added a help message that told them this.

Adding a new athlete

The user sees this page when they want to add a new athlete to the database.  This page allows them to enter vital information about the athlete.  It has changed very little since our paper prototyping sessions.

Adding a new injury

Adding an injury to a student takes the user to this page, where he or she adds the basic information needed to update the athlete's profile page.  It also has not changed much since the paper prototypes.

Reflection

There were two big things we took away from this course that we think we had all undervalued prior to the course; prototyping, and user testing.  Most of us thought that going into this class we would learn more about what makes a good UI rather than the process of creating one.  Even when presented with these ideas, some of us thought the idea of creating a paper prototype wasn't worth the time.  It seemed nearly as easy to make the website in html and then later change whatever small things needed to be changed.  I don't think any of us realized that getting a good UI on the first try just isn't going to happen, and the paper prototypes definitely allowed us to see problems with our UI before we created it.  It was pretty surprising how some of the elements in our UI that we considered intuitive were anything but to the users we tested.