Design Refinement

UI Redesign

Reframing the Problem

  • Story Board Scheduling

    A story board for scheduling

  • Story Board Timing

    A story board for timing

Originally in our storyboard, we had focused on scheduling, since personal trainers often had trouble with rescheduling and filling their days, as well as on timeliness of client arrivals, since clients would sometimes come late, throwing the personal trainer off schedule. These were problems that we had uncovered during our interview, but we eventually decided instead to reframe our design goal into facilitating the interface for logging workouts. Stemming for the uniquely personal trainer problem, this reframing allowed us to focus on a task that personal trainers constantly face with unsuccessful technological tools. Since logging workouts is a very tedious task, trainers often revert back to the classic pen and paper approach, a simple and easy approach. Thus, our focus for this design refinement was on the task of logging (add and editing) workouts.

Entering Numbers

Number Scrolling

Entering workouts with a scrolling control

Number Pad

Entering workouts with a numeric pad

With the problem reframing in mind, we knew that we had to make a fast and very responsive interface. At first, we used a scroll interface to allow users to select number for workout weights and repetitions because OS X uses this type. After speed tests, we realized that the scroll is not as fast as we had imagined because the user often speeds over the number that she wanted to select. Instead, we switched to a numerical pad, where the user could easily and accurately select the numbers they wanted. The pad provides a large surface area for the user to select, making sure that the user can select the correct number on the first try. The numeric keypad also has a delete button, so that edits can be made.

Icons and Labels

  • Paper Prototype Icons

    Icons in the paper prototype

  • Balsamiq Icons

    Icons in the Balsamiq Mockup

From our first round of user studies with Shannon, we redesigned our placement, labeling, and grouping of our icons. In our paper prototype, we had a figure with the client's name next to it on the top left and middle of the header with a gear at the top right. The gear had an ambiguous function and was not necessary to have in the workflow of the user. On the footer, we had three icons: multiple profiles layered, a trophy, and a horizontal bar graph. One of the icons referred to all of the clients while the other two referred to the specific client whose profile the user is in. The multiple profiles layered together represents the button to bring the user back to the main page with all of the clients' profiles. The trophy represented the client's goals but so of our testers did not think that the trophy symbolized it well enough. The horizontal bar graph connects to the client's progress page with all the graphs. People were confused by this icon because they were not used to seeing horizontal bars.

In our refined prototype, we placed a back arrow on the top left with the label "All Clients". This provides an intuitive button for the user to return to the home page with all of the client profiles listed. The back arrow represents that the user will be going back to the beginning. By having this on every page, the user can easily maneuver around to whatever page she wishes in one click. In the middle of the top bar, a profile icon with the client's name reminds the user of which client profile is in progress. On the top right hand side, there is either a pencil edit button or a "Done" button. Since the right side usually represents "done" or "move on", it seemed like the most logical and natural position to place these buttons. On the bottom, per Shannon's advice, we placed buttons that were specific to this client and this client's profile, so that the user would not get confused with which client these icons referred. We added the icon "measure" with a tape measure to represent the page where the personal trainer could track the client's measurements of progress, like bicep circumference or weight. The workout logging page is represented by a clipboard and the label "work out". Progress is represented by a bar graph that has vertical bars. We switched the bars to be vertical because this is more common and easily recognizable. The graphs helps to represent a visual representation of progress and other data points. The fourth icon on the bottom is the trophy labeled "All of these icons are highlighted when the user is on that page to inform the user of where she is.

Searching and Selecting Workouts

Paper Prototype Body Search

Searching for workouts by selecting body parts

The low-fidelity prototype had three ways to search and select workouts: by clicking the body part of an image, typing with auto-complete, or clicking the list of most commonly used workouts. In the workout logging page, we wanted to have multiple ways that the user could operate easily, so we thought a visual representation of the body would be helpful. If you clicked on the arm of the image, the screen would auto-populate with workouts that exercised the arm. Our user testings showed us that people did not realize that you could click on these figures to help find workouts. Furthermore, having a split image of the body was unfamiliar to our users who have been trained to view detailed muscular systems. In our revised prototype, we simplified the search/selection process to two methods: typing with auto-complete and clicking the list of most commonly used workouts. These methods are fast and straightforward.

Cognitive Walkthrough

For our coginitive walkthrough, we focused on the following tasks:

  • Adding a new client
  • Adding goals for a new client
  • Adding a workout

For the first two tasks, a lot of our feedback was relevant to the visual design of the application. The person we tested with found the lack of color intimidating, and thought the amount of white space in the app made use somewhat intimidating. The tester also recommended we change the way we give trainers feedback about the quality of the goals they enter: rather than including opinionated text, he recommended we use text highlighting (reminiscent of how Microsoft Word highlights typos). He felt the text was too opinionated, and could get in the way of a trainer.

We feel the most critical feedback we received was around the third task we included in the walkthrough: adding a workout. The tester felt that the system gave him absolutely no feedback when he added a workout. This caused the tester to try to enter the same workout multiple times, and was an obvious violation of standard usability guidelines. In response to this feedback, we implemented several feedback mechanisms that immediately inform a trainer that their information is saved, and clue the trainer about what was added.

Personal Trainer Initial Prototype Manual

Our goal was to redesign the method that personal trainers use to log their client's workouts. In designing our prototype, we wanted an interface that would not need a manual but these list of instructions can still add as a helping guide especially since the prototype is still being developed.
The prototype simulates the touchscreen on an iPhone or iPad that a personal trainer might have and use to aid them in their occupation.

Let's Get Started!

To get started, tap the profile image of the client you wish to view on the homepage. Search for the client by scrolling down the page until you can see the image of the client you have in mind. The client list should be listed by how recent their last appointment was, so the clients who are scheduled to come in next will have their profiles at the top of the page. This is based off the information originally imputed in the core client profile.

Add a Workout

After selecting the client profile for whom you wish to add a workout for, tap the clipboard icon with the label "workout". On this page, there is a search bar at the top of the screen, there you can tap the search bar and begin to start typing in the exercise you have in mind. If you have already worked out with this client you can either use the search bar or select an exercise from the pre-populated list of most popular exercises for that specific client. When the exercise you wants appears on the screen, add that exercise by tapping the "+" button. The screen will then split and open up a section that allows you to input more information about that exercise, such as repetitions, sets, weight, time, etc if applicable. Tap the "done" button on the bottom right when you have filled out all of the corresponding information.

Edit Workout

In order to change the details of a workout that has already been added, you must go to the workout summary page first by tapping the "workout" clipboard icon on the bottom of the screen. Click the "Edit/Pencil" button on the right hand side of the specific exercise that you wish to edit. Using the same interface and format from when you originally entered the data, select the correct numbers on the numerical keyboard. Complete this task by selecting the "done" button.

View Workout History

To browse through all past workouts for a specific client, you simply click on the profile of the client that you want to view the history for. Once in the specific client's profile, select the "add a workout" link or the "work out" icon on the bottom of the screen. A list of all past workouts will be displayed. You can scroll through the workouts to see previous dates.

View Client Progress

To see how the client's workout progress relates to their goals, you can view a graphical visualization of how the client has done over time. After selecting the client from the client home screen, tap "add a workout". In this screen, click the graph icon labeled "Progress" at the bottom right of the screen. This pulls up the charts onto the screen.

Prototyping:

Go to our prototype
Go to our Balsamiq prototype

Heuristic Evaluation

Class Presentation

Work Distribution

Cypress Noam Sharon Dana
Prototype 60% 40% 0% 0%
Cognitive Walkthrough 25% 25% 25% 25%
Presentation 1% 33% 33% 33%
Prototype Manual 0% 0% 50% 50%
Website 10% 45% 0% 45%