ZAPT - Interactive Prototype Report

Team Akshaya Venkat: Management, User testing

Michael Zhou: Development

Brenna Smith: Documentation

Tom Lehmann: Design

Problem and Solution Overview

The goal of our application is to help our users practice safe and and productive

methods for working out. We have found throughout our design and testing processes

that many times people don’t know how to reach their fitness goals, or are too

intimidated to try. Feeling like a workout is uneffective is discouraging and not knowing

how to perform these workouts can cause mild to serious injury. ZAPT is a personal

trainer that stays in your pocket. With ZAPT you can get all the benefits of a personal

trainer that you hire at the gym, without the extreme costs. ZAPT provides its users with

the ability to get planned workouts based on their body type, goals, and available

resources. It will also give step by step feedback on the user’s performance as they

perform an exercise (when available). We hope that ZAPT will help motivate people to

get the results they want and motivate them to keep healthy.

Tasks

Our 3 representative tasks:

● Complex - Profile Setup and Goal Selection

○ Low frequency

○ Somewhat difficult to enter all of your information and take body scans

● Moderate - Learning a New Exercise

○ Medium frequency

○ You have to choose an exercise and have the option of seeing the tutorial

or not

● Simple - Getting Interactive Exercise Feedback

○ High frequency (applies to most workouts)

○ Should not require much effort from the user as it is a function performed

by the app

All of our tasks have remained the same since our Low-Fi prototype, but we’ve made a

couple changes to our tasks since the contextual inquiry. We have changed our current

tasks from our initial tasks when we started the design process. We have changed our

original complex task from “scheduling workouts” to “profile setup” and we changed our

simple task from “getting a personalized workout” to “Getting interactive exercise

feedback.”

Revised Interface Design

While we did make some changes from our low fidelity prototype, there weren’t too

many major interface features to be changed. In our low-fi prototype testing one of the

only things that caused confusion was the X that located in the upper right hand corner

of most screens (displayed in figure 1). The X, as it is used in computer applications, is

unnecessary in most mobile applications. We have gotten rid of this X completely, and

put “Go Back” buttons where necessary.

Fig 1 - Our low fi prototype with the ambiguous X

We also added a full “Main Page” that has three options that the users can choose from.

The first button “Set Up Your Profile” will lead you into taking your body scans and

setting up your account. This button will change to say “Edit My Profile” once the user

has created their profile and signed in. Next is the “Single Workout” button. Clicking this

button will lead you to a list of common workouts that are organized by your workout

goals. Our final button says “Workout History” and will lead you to a short summary of

the progress you have made on different workout days. Below, figure 2 shows a shot of

the main screen (before account creation) on our interactive prototype. In our low fidelity

prototype we skipped over this selection page and went straight to the goals screen. We

want our prototype to have more flexibility, so we added this screen to allow the user to

choose where they want to go based on the task they are trying to complete.

Fig 2 - Interactive prototype Main Page

As mentioned before, on our main page we have included a button that allows you to

see the progress you have made on a specific day. While it has always been our

intention to include a way to track your progress, we did not include any sort of

rudimentary progress tracking in our previous prototype and have added to our medium

fidelity prototype.

Scenarios for 3 tasks

Complex - Profile Setup and Goal Selection

Repeat the 2 steps above for left scan and right scan.

Moderate - Learning a New Exercise

Simple - Getting Interactive Exercise Feedback

Mock visual of user performing their exercise.

Prototype Overview

Out team used the Justinmind Prototyper that was recommended by our professor to

create our interactive the prototype. The Justinmind Prototyper can be downloaded from

www.justinmind.com. The prototyper can also be used for further user testing when it is

uploaded to Justinmind Usernote.

Overall, we found this tool was very beneficial and straightforward to use. Justinmind

provided easy-to-use widgets that made prototyping much faster than coding from

scratch. Laying out the user interfaces using Justinmind was significantly easier than

just using HTML and CSS. The HTML widget allowed for additional functionality to be

hard coded in when it didn’t already exist which allowed for more flexibility. Also, linking

together screens throughout the application was quick and intuitive. This allowed our

task flows to be built with focus on the interface as opposed to the programming. In fact,

this prototyping tool helped us to focus most of our efforts on the user experience as

opposed to just the background programming.

While Justinmind was very helpful in the creation of our prototype, there were some

problems that arose while working with it. Essentially, this prototyper makes web pages

that resemble phone applications. This is great if your sole purpose is testing for the

basic interface, but makes it very difficult to simulate real world interactivity. This

limitation also makes some things that are somewhat easy to do using phone software

development toolkits, more difficult to accomplish in Justinmind. In addition, this

prototyping tool does not have many of the essential capabilities that smart phones

provide such as a camera or GPS. These limitations burdened us with more hard

coding and railroading (leading the user), and also forced us to simply drop some of

functionalities we originally planned for.

As previously stated, our functionality options were reduced due to the Justinmind

Prototyper creating a web based product. Because of this there was no option for voice

input on our prototyping tool. Our initial plans for ZAPT included a voice input option for

several stages of our tasks. Unfortunately, we had to completely leave this ability out for

our prototype, and design solely for touch interaction.

On a similar vein, our prototype won’t allow users to actually take their own photo for the

profile setup task due to the lack of camera. We used several Wizard of Oz techniques

to try to avoid the “no camera” limitation. We have provided pre-taken scans (of Tom)

that will pop up for a pseudo picture taking experience when the user presses the “Take

Picture” button. Our original design includes giving voice feedback in the “Learn an

exercise” task as well as the “Interactive workout feedback” task. However, due to lack

of capabilities, we have instead included step by step workout videos for each of the

three available exercises. As for the interactive workout feedback, the prototype will

have specific pop-ups on the screen that it will say each time someone performs that

task. Seeing as we cannot actually see the users as they progress, this feedback

cannot be programmed to say what each user is really doing wrong during their

workout.

Finally, due to the lack of time and tool abilities, we weren’t able to create a full

database of all available exercises (i.e. workouts won’t actually be based on what the

user enters for their goals). Instead, we have only fully programmed for a couple of

exercises to be available to the user. This is so that the user can perform our basic

tasks including learning an exercise and getting interactive workout feedback.

Prototype Screenshots

Home Page Main Options Screen

Body Scan Prompt Mock Front Picture

Body Scan Prompt Suggested Workouts

Goal Selection Screen Endurance Goals

Strength Goals Fitness Goals

Coordination Goals Lifting Tutorial

Phone Setup Prompt Tutorial Prompt Screen

Single Workout Selection Running Tutorial

Running Interactive Feedback

Running Statistics Lifting Statistics

Pull Ups Interactive Feedback

Stretching Tutorial Stretching Statistics

Hip Flexor Interactive Feedback

Mock Workout History