HCDE Process Blog #6: Interactive Prototype

For our last normal assignment before the final project, our class was tasked with wireframing an interaction for an application that pairs with a wearable. This wearable also needed to have haptics associated with it, and we had to graphically depict the haptics in storyboards. There were a couple of parts to this assignment and it was a great learning experience.

Design

I designed wireframes for a fitness app for open water swimming. This application provides users with workouts and has two paired wearables: headphones and a wrist band. With the waterproof headphones, users are able to connect to their phone and hear the workout as they are swimming. This was a necessary addition, since the swimmer won’t be able to check their phone in the water.

The paired wrist band sends haptics to the user. The haptics for the band are triggered due to distance swam and distress services. Every 25 yards in the open water, the user will be notified of their distance so they know when they’ve done one lap (as if they were in a pool). For distress services, the band is reading motion levels and oxygen levels and therefore will be able to recognize when the swimmer is at risk for drowning or over exerting themselves.

To help myself with designing the prototype and haptics, I created a user flow diagram laying out each step in the process (Figure 1).

Figure 1: A user flow diagram for the steps of the wireframes and haptic devices.

Prototype

For my wireframes, the task I had the user walk through was selecting a workout and following it to completion. I made 7 screens to go through this process (Figure 2).

Figure 2: Screenshots of my wireframes. Wireframe kit thanks to @oscarsun from Figma

I also drew two storyboards for the two haptics (Figure 3). The first storyboard attempts to show a haptic that is small and light, just notifying the user that they have traveled 25 yards. On the other hand, the second storyboard tries to convey a haptic that is much more rapid and intense when the user needs to relax and help themselves.

Figure 3: Storyboards for the different haptics that the application/devices provide.

Test

My test was with my roommates who are not involved in HCDE or knew anything about this assignment. I treated this like a usability test to see the functionality of the application, seeing how easy it is to go from page to page. I also asked what the users liked about the process as well as what was confusing to them. I took their verbal feedback as well as their mouse movements on the screens to learn what was confusing and what made sense.

For the storyboards, I gave my users the storyboards, giving them context that they were connected to the wireframes, but asked them to walk me through what the storyboards were depicting. This was helpful to not only see how well they could understand what the haptics mean, but also to see how well my sketches could tell a story.

Analysis

Summary of the results of your testing and critique — what about the prototype worked well, what needed improvement, and what you concluded about the effectiveness of your design from the testing. Please ensure you include any supporting evidence for your conclusions.

Wireframing Testing

From my wireframe tests, I learned that steps in the application were pretty easy to understand, but added features might be helpful.

Suggested features:

• “Normal” oxygen and movement levels for the individual so that they know if they are in a safe range
• More clarification on what is presented in the summary page

What I would change about my wireframes:

• Add in those features!
• Create exit strategies (I had no back buttons)
• Make the workout description page more cohesive to the rest of the wireframes

Storyboard Testing

The storyboards were definitely more confusing than the wireframes, which makes sense with my background as I have more experience in wireframing than storyboarding haptics. While users could understand the general story, they did not understand the graphically depicted haptics. I brainstormed a few ways that I could better convey the haptics:

• A color key for intensity of vibration
• Radial lines for duration of haptic
• Length and style of line changing depending on the type of haptic (crazy lines for intense and rapid, smooth for calm and long)

Other suggestions for application and devices from critique:

• When the band detects that a user is in critical condition, a light could be shown for bystanders to see that something is wrong in the water
• Similarly, 911 could be alerted of the location of the incident
• Perhaps not a wrist band, but an anklet or a ring (not a swim cap, as that would be more alarming to have something buzz on your head!)

Video

A link to a clip of my wireframe testing