Velocity Usability Report

California Polytechnic State University Art and Design Department ART 388: Interaction Design II Winter 2017 Professor Bruno Ribeiro

Velocity Virtual reality glasses for Zumba

Monike Chan Amanda Pe

21 March 2017

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Table of Contents Introduction 3 Abstract 3 Schedule 4 Audience 5 Technical requirements 5 Possible constraints 5 Research 6 Preliminary research design 6 Findings from the research 6 Personas 9 Goals 9 Competitive analysis

10

User interaction design Scenario 18 Sketches 18 Wireframes 19

18

Usability analysis 23 Usability analysis tests 23 Usability analysis results 23 User interface design Annotated layouts 24

24

Final product 28 Presentation poster 30 Future enhancements 31

2

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Introduction Abstract Velocity brings the experience of Zumba to you through virtual reality. This experience is made possible through virtual reality glasses that would display an instructor and classmates in the comfort of your home. The glasses includes a corresponding app that allows users to choose a specific instructor to follow.

Velocity would allow users to have an immersive exercise experience without needing to go to a gym. This promotes an active healthy lifestyle for shy users or beginners wanting to learn Zumba. Since it is so conveniently accessible, it would encourage continuous use for more experienced Zumba dancers.

3

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

4

Schedule Week 3 1/24 Report due. Interviews completed and summarized 1/26 Work on personas/goals, user interface competitive analysis Week 4 1/31 Report due. Start writing out scenario, drawing interaction framework, and wireframes 2/2 Continue working on scenario, interaction framework and wireframes Week 5 2/7 Report due. Start on test tasks, working prototype, and video recordings 2/9 Continue working on test tasks, working prototype, video recordings Week 6 2/14 Report due. Start on reviewing notes and recordings from test tasks, work on usability analysis tests and results and continue working on wireframes 2/16 Continue reviewing notes and recordings. Continue working on usability analysis tests and results and updated wireframes Week 7 2/21 No class 2/23 Report due. Work on visual language references and high def layouts Week 8 2/28 Report due. Start on final product, technical requirements, and possible constraints 3/2 Continue working on final product, technical requirements, possible constraints Week 9 3/7 Report due. Continue to work on final product, think of future enhancements and design poster 3/9 Continue working on final product, future enhancements, and poster.

Week 10 3/12 Work on report and practice presentation 3/13 Finish Report, presentation and poster 3/14 Report due and Presentations 3/16 Final Presentation

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

5

Finals Week 3/23 Final Report Due

Audience Our target audience is young adults ranging from the ages of 18-30 who go to Zumba classes. This audience can use Velocity in their homes rather than going to the gym. Hopefully this will increase the frequency of physical activity and promote a healthier lifestyle.

Technical requirements Velocity relies on virtual reality glasses and a smart phone in order to be used.

Velocity would also require a Bluetooth connection to sync up the glasses and phone application.

Possible constraints Some possible constraints for our application is that virtual reality glasses may not be able to accurately track people’s progress in burning calories. Another constraint may be if the servers of Velocity were hacked, there would be access to the users’ Facebook account and email information since they are required to sign up for an account.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

6

Research Preliminary research design We interviewed six young adults that have taken a Zumba class before because we wanted to learn what motivated them to start, their favorite aspects, and their preferred environment while doing Zumba. We would start off by asking about the person’s background in dancing and their beginnings of Zumba. Some other questions we asked were what were their annoyances in Zumba, memorable moments, and other resources they used to help them outside of the class. We also asked if Zumba helped improve their lifestyle.

Findings from the research Julie–21 »» Julie has previous dance experience which inspired her to start Zumba »» Getting to the gym is annoying but having friends go along with her helps motivate her to go. Also people who stand in the front and don’t know what they are doing is also annoying. »» She likes the high energy and positive vibe of Zumba. The instructor has a large impact on the vibe of the class. She would prefer smaller class sizes. »» She would watch Zumba videos on Youtube outside of class when she is not at school to do Zumba. »» Zumba doesn’t inspire her to live a healthier lifestyle, but it does inspire her to try different types of group exercises.

Damon–20 »» Damon had some dance experience from PE classes in middle and high school.

In the class, didn’t like that he was the only guy, if there were an equal distribution of gender in the class he would be more likely to go again.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

7

»» He liked that the instructor was enthusiastic and cheered him on. His ideal atmosphere for Zumba would be in a huge auditorium where he is unseen and with a group of people who are on the same level as him.

Kristina–20 »» No background in dancing and doesn’t particularly enjoy dancing but Zumba is more fun than other forms of exercise. Likes that Zumba doesn’t seem like a chore. »» She doesn’t like when people are in the way in class, for example, doesn’t move the right way. She really likes it when the instructor is engaging and has good songs. »» She would go more often if her school schedule allowed her to. Her ideal environment is a big studio with a welcoming vibe. There is a lot of room to move and the people are accepting. Now she does spin class because Zumba inspired her to try other fun exercises in similar environments.

Larson–20 »» Doesn’t have dance experience and is self conscious about his skills in dancing.

Went to only two Zumba classes for a friend. Didn’t really have an interest in Zumba but it was a good change of pace for him. Doing Zumba didn’t change his lifestyle at all. »» The things that bothered him most was being self conscious and was afraid of people judging him. Enjoyed that the teacher was very motivating at 8 am class and there was a cute girl. »» He would go again if he knew another person who would go. His ideal atmosphere is a mid sized class (around 20), everyone is into it, environment is high energy, and cute girls in the class.

Danica–20 »» Danica had dancing experience from doing ballet from grade 1 to 5. She started doing Zumba because of what she saw on TV shows and from culture that showed how fun workout classes were. She imagined Zumba was dancing but exercising. »» Some things that bothers her during Zumba is that it focuses more on Latino

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

8

music and that it’s hard for her to find spots in classes. She’d prefer that the class played music she knows so that it pumps her up even more. »» Doing Zumba inspired her to do other workout classes such as pilates and six pack abs. Her favorite parts of Zumba is that you can shamelessly be bad at dance and it’s ok because other people are trying too. What would motivate her to go more often is having friends who are persistent in getting her to go and having more classes offered in different times. »» Her ideal atmosphere is between 20-30 people with interactive and social people.

Also having instructors who are conscious of their students and with various dance experience would be ideal.

Katie–21 »» Katie attends Zumba class consistently because she sincerely enjoys doing Zumba. She has some previous dance experience through tap and ballet classes during elementary school. She started doing Zumba because she wanted a different exercise that was more fun than running. Staying healthy and getting fit is a motivation for her. »» Her favorite thing about Zumba is that everybody is usually very positive and really happy to be at Zumba. She also really likes it when the instructor is very high energy and has a good playlist. »» She doesn’t like it when the class is crowded, the instructor’s playlist isn’t as good, and when people block her view of the instructor. »» Her preferred environment for Zumba is a large room with AC, a moderate amount of people, loud music, and having a little stage for the instructor because it makes it easier to see them.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

9

Personas

Adrienne is a 22 year old student at Cal Poly, she is a Computer Science major who is currently doing her senior project. She loves to do cardio but doesn’t enjoy running so her alternative is doing Zumba. She used to go to Zumba classes frequently but because of her busy schedule this year, she has been unable to attend Zumba classes. Her class schedule conflicts with attending the Zumba class with her favorite instructor.

“I want to be able to take Zumba classes at a convenient time with my favorite instructor.”

Goals »» Adrienne wants to be able to do Zumba despite her busy schedule. »» She wants to live a healthier lifestyle by exercising more. »» She wants to be able to do Zumba with her favorite instructor.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Competitive analysis Google Glass Google Glass is a pair of augmented reality glasses that functions like a smartphone.

10

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Samsung Gear VR Samsung Gear is a portable and wireless headset that allows Samsung phones to attach to it, putting the user in a 360 experience.

11

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

12

Microsoft Hololens Microsot Hololens is a mixed reality smartglasses that is known for being the first computers to run a holographic platform under the Windows 10 operating system.

Work Out Trainer App A training app with customizable workouts, which includes instructional videos with coaches while keeping track of your fitness progress.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

13

Kinect Dance A Xbox camera with motion sensing technology that allows users to play games without a controller.

Fitbit Fitstar A program that Fitbit developed where users can have a virtual personal trainer and customize workouts.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Youtube Users resort to using Youtube to do Zumba outside of class.

14

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Visual Language References

1. Some color palettes that we could draw inspiration from.

2. Example of a userinterface that tracks activity using simple iconography.

15

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

3. An example of a fitness app interface that tracks different aspects

4. Another fitness app interface tracking statistics related to working out.

16

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

17

5. An example of an interface design that tracks calories and offers the user to view different days of working out.

6. Userinterface with menu bar on the bottom and other features and simple minimal icons. Colors that accent off of the white background.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

User interaction design Scenario Adrienne’s favorite Zumba class is at 6:45pm on Mondays at Cal Poly. However, she ends class at 7pm on Mondays, causing her to miss those Zumba classes.

So instead of going to the class, she goes home and puts on her Velocity glasses to do Zumba. She enters the four letter code for her favorite instructor, Charlie, into her Velocity phone app. Once she enters the code, the class begins and she sees Charlie and her friends who are also using Velocity. The class finishes in an hour and Adrienne completes her workout. Once she finishes, Velocity records her attendance and displays how many calories she burned. She takes off her glasses and looks at her phone, a window pops up on the app and asks Adrienne to rate Charlie, she gives him a 5 out of 5 stars. Then the app gives her suggested instructors based on similarities to Charlie.

Sketches

18

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Wireframes

19

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

20

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

21

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

22

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

23

Usability analysis Usability analysis tests 1. Take a class with Charlie who is your usual instructor.

2. Exit the class and give your instructor 5 stars.

3. A friend told you that this instructor, Haley Perkins, is really good. Find her and add her to your list of instructors.

Usability analysis results From the usability tests, we learned that people automatically searched for their favorite instructor rather than look for them in the favorites tab since it was their first time using the app. We also learned that the order of the tasks that were given matters because when the tasks were switched around, we received different results. We also have to keep in mind of regular users as compared to new users who wouldn’t think to use the favorites tab. We realized that we had to keep in mind if we wanted to prioritize learnability or usability while designing our user flow.

Changes from the results of usability analysis We added a back button on the search page so that users can go back to the activity feed, which is clearer to understand than just tapping the blank space where the feed is supposed to be covered by the overlay of the search bar.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

24

User interface design Annotated layouts First variation using purple and orange to represent the activeness from Zumba.

Orange highlights important parts of a screen. Shadows added to each content square to add depth. Used squares to frame content in the interface and circles to frame the pictures. Activity feed scrolls down to past activity. Lots of white space as to not crowd the content in each page. Back arrows used to indicate users are able to go back to previous page. Menu bar is placed on the bottom similar to typical menus and labels of the screen are placed on the top.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

25

Second variation, similar with using squares for framing. Using one color to highlight important parts of the screen. Dates on the activity feed differentiated with white and grey backgrounds. Favorite button is with a plus instead of a star sign. The duration and calories are changed in size to make the information more important than the date. Third screen menu has line separations removed to experiment how the menu bar looks with or without it.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

26

Third variation with a lot of white space and only using one color again to accent important content on a screen. Activity log features only one day and the option to view other days. Time and calories are also shown through circle iconography.

Favories also show the instructors’ ratings. Pictures are also framed within a circle to keep with consistency of the circle motif throughout each frame.

Similar to third variation but with rounded squares to frame the content. Orange is used for the more important content while pink is the background color. Symbols are used to easil identify which information is either time or calories burned.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

27

Through the fifth variation, we combined the task bar of the second variation and the simplistic layout of the third variation. We decided to keep the round elements as part of the visual language and experimented with having a gradient background with white text. We also decided to add a daily, weekly, and monthly date options to viewing your Zumba stats in the activity log.

Our last variation before our final choice for our visual language has the same layout as the fifth variation but with different color choices. This variation has a white background with purple and a magenta as the acent colors.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

28

Final product Activity feed shows the activity for a selected date. Top tabs have the option to view activity in days, weeks or months. The duration and amount of calories are also symbolized through the circle gauges.

The favorites screen shows a list of favorited instructors the user can choose from to take the class with. After clicking on an instructor, a screen pops up to give the option to enter the class.

The in progress screen shows that you are currently in a class and have the option to exit the class.

After finishing or exiting the class, a pop up menu prompts the user to rate the instructor.

When searching for instructors, suggestions will pop up below the search bar.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

29

Once finding the correct instructor through the search bar, the profile of the instructor is shown. A short biography of the instructor and the overall rating is available. There is also an option to add the instructor to the favorites list to save for later.

Settings is where users can edit their profile and information. There is also an option of what class type users can take, either with a group or by themselves and an option to set the max amount of calories to better gauge the correct amount of calories they aim to burn.

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

Presentation poster

30

ART 388: Interaction Design II Winter 2017 Velocity Chan Pe

31

Future enhancements Some future enhancements that would be added onto Velocity would be the ability to choose different types of exercises. For example, future users would also be able to do yoga, pilates, or body combat. Another enhancement is allowing users to be able to join a class with their friends and being able to see each others’ activity in order to create a fun and competitive environment which would motivate them to exercise more. A future enhancement that would bring more people to participate is having virtual reality contact lenses so that people can workout with more ease as opposed to wearing glasses.