Running with Watches

Runzo- A running app specifically for a watch / information at a glance

When on a run, you don’t have much time to look at your watch. Technology, however, goes hand in hand with exercise.

“Runzo” is an application prototype that I came up with for people to breach their exercise goals while running. The app effectively monitors the runner’s pace as well as help the user to improve their running time.

What I wanted to achieve in creating the watch application.

An interface that displays-

• How long the user has been running.
• The average pace being ran by the user.
• The distance the user has ran.

The problem-

The user is clearly occupied when running and the interface of a watch is so small there is limited real estate for the user to read the information in a short amount of time.

My Goal-

Create an attractive interface that can communicate to the user with just a glance. The key to solving the problem is effectively implementing architectural hierarchy.

I wanted to create this design/prototype strategically within an expedited process.

Design Process

• Evaluating common assumptions for runners.
• Creating narratives to meet a “runner’s” persona.
• Sketching with pen and paper.
• Create wireframes in sketch.
• Prototype wireframes in invision
• Refine

Tools Used:

• Sketch
• Principle
• Invision

Assumptions

Most important assumptions were:

• A runner would like to improve their running. / A runner doesn’t care to improve their running.
• A runner would like to set goals. / A runner just wants to run.
• A runner wants their running history documented. / A runner just wants to know their running details in the moment.
• A runner only has time to glance at their watch. / A runner would like to stop and view the details about their run.
• A runner would like to customize their run (or their running goals.) / A runner would like their run (or goals) to be provided for them.
• A runner wants to further their running distance. / A runner wants to limit their running distance.

EMPATHIZING / DEFINING

PERSONA GOALS:

• Improve as a runner- beating record / reaching a goal
• Feel progress as an active runner
• Be safe and attentive while running- avoiding any injuries.

NARRATIVES TO REFLECT PERSONA’S GOALS

• As a runner, I want to know my running status so that I can improve and beat my running record / goal.
• As a runner, I want to see my running history so I can feel like I am improving as an active runner.
• As a runner, I want to just glance at my watch so that I can be safe and attentive.

IDEATION

a page of my sketches with pen and paper + jotting notes and ideas (and some doodles).

The crucial moment in this design took place in this stage of ideation.

I was trying to solve a proper hierarchy while trying to answer the question- “What do you want to know at a glance?” That arose another question- “What can you know at a glance?”

I finally came up with an answer. The runner wants to stay on track with their goal. I figured that it would be best to have their goal visible as a graph of the pace needed to reach the goal. The app would be able to calculate the distance run divided by the running time to get the current pace of the runner. The difference in the two would result in a change of color for the runner could see.

The runner is now able to see whether she / he is in relation with their set goal. Not only can they see it at a glance, but, they are able to know just with their peripheral sight.

PROTOTYPE / TEST

Green- on track for your goal

Red- behind your goal

Blue/green- surpassing your goal

The background color is always luminated when on a run with a goal selected.

The dotted line represents the pace you should be running to reach your set goal.

The white line (squiggle) with the circle at the end represents your running rate in the moment.

Here, the runner is on track, as the white dot is on the dotted line. Therefore, the screen is lit with a green color.

Here, the runner is falling behind their set pace goal, so the screen interacts with the runner by providing a red feedback. This notifies the runner that they need to go faster in order to reach their goal.

This screen communicates with the runner that they are well on track, to meet/ beat the goal that the runner has set by using a green / turquoise gradient.

Along the design process I added features for the runner based on assumptions such as -

• The user might want to stop running but doesn’t want that to affect the running data being recorded.
• The user might need to end their run early.
• The user might want to see where they are on a map.

Navigation and a full view of the product.

Conclusion

I hope that you can see by viewing this case study how much I thoroughly love human centered design and have a passion for visual and interface design. This project was really fun to come up with ways in how a product can interact / communicate with a user to provide feedback and give the user that delight from a product helping them reach their personal goals. It was also great practice challenging myself with such limited real estate on an interface and really applying a solid visual hierarchy.

If I were to change anything I would do more research by sending surveys and interviewing runners. I would also like to host user testing with the product.

Please feel free to comment or message with any feedback / critiques… or if you want to develop this app with me! ;)