Creating “Keep Moving!” : My Design Journey

I’m very excited to have finished the “Interaction Design Specialization”. It’s been a great journey, full of learning and growth.

I would like to share with you all the steps I followed as part of the Capstone course (the 8th and last course in the specialization) to come up with the “Keep Moving!” app.

I hope you find this process useful to help guide you in your own design journey.

Human-Centered Design Process — source: designcouncil.org.uk

Design Brief (Week 1)

The first step, before starting the design process, involved choosing a design brief. We were given three different design briefs to choose from: time, change or glance. Each brief had to do with a different concept and each had a different mission.

  • Time - Mission: Redesign the way we experience or interact with time.
  • Change - Mission: Design an interface that facilitates personal or social behavior change.
  • Glance - Mission. Find people and design a personal dashboard tailored to their needs.

I chose brief #2: Change. I decided to design an Android app to help users be more physically active. After choosing the brief and my mission, I embarked on a human-centered design journey.

1. Needfinding (Week 2)

I started by picking an activity I wanted to observe and making an interview and observation plan. The goal was to observe the successes, breakdowns, and latent opportunities that occur when computers are used (or not) and see how technology could be used to support my chosen activity.

I decided to observe how people try to become more physically active in their daily lives. I observed and interviewed three people. Two of the participants wanted to run several times a week and another one wanted to start going to the gym several times per week. I observed one of them at home, another one at the office, and the third one on the street where he usually runs.

I noticed that the three participants used different tools to accomplish their goal to engage in more physical activity. All of them used a combination of both analog and digital tools. It took them several steps to schedule their activity, log it afterwards, track progress and remind themselves to do it. All these steps, and their breakdowns, presented design opportunities.

2. Ideation (Week 3)

This phase consisted of brainstorming different user needs, coming up with a high level strategy of how my app was going to solve a deep user need, and creating an inspiration board.

Point of View (POV). This was my high level strategy. It had to clearly express the problem/opportunity that my app was going to solve. The problem had to be a deep user need (the underlying issue), rather than a surface need (what people say first).

My POV: “Establishing the new habit of being more physically active does not have to be difficult, frustrating, boring, or feel like a chore. Consistently engaging in the activity and making progress can be fun, exciting and joyful. It can be something people look forward to rather than avoid.”

Inspiration Board. I created this board based on inspiration from other sources : existing applications, artifacts, products, services, or anything that was related to my POV. I found five inspirational designs: a car dashboard, a scoreboard at a stadium, an online game platform, the leaderboard of an online language learning app, and an app that lets friends challenge each other.

Some of the images on the inspiration board

3. Prototype (Week 4)

Now it was time to create two storyboards exploring two design ideas from the previous phase. And then create two paper prototypes connected to the storyboards.

Target Users and Design Ideas

  • Storyboard 1 and Prototype 1. How to make tracking your physical activity progress easy and rewarding. The user was Max, a busy young professional with a hectic schedule.
  • Storyboard 2 and Prototype 2: How to increase motivation and accountability. The user was Al, busy professional who is married and has three kids.
Storyboard 1 and 2 showing users using the app in a particular context.

Paper Prototypes. I then made two hand drawn paper prototypes. Each clearly connected to my point of view, but in a different way.

The paper prototypes:

  • concretely showed all the essential elements of the user interface at a sketch level
  • accomplished the design’s major functionality
  • had enough detail that the user could see all of the interactions and understand how they worked, and
  • were complete enough to run a new user through each task.

The prototype tasks were: tracking physical activity in an easy and rewarding way (prototype 1) and finding an “accountability buddy” to run with (prototype 2).

Paper Prototype 1 (partial) — Tracking physical activity in an easy and rewarding way.

4. Heuristic Evaluation and In-Person Usability Testing (Week 5)

First, I made sure I walked through my paper prototypes’ flow to make sure I knew which pieces I would need to swipe when. Then I conducted an in-person usability test and got feedback on the two prototypes.

Finally, I obtained feedback from one of my classmates from this course. He provided feedback during an online session and later wrote a heuristic evaluation of my app. He followed the list of “10 Usability Heuristics” by Jakob Nielsen.

5. Wireframes (Week 6)

After looking at the feedback from the previous step, I created a wireframe. This was the wireframe of the first page that contained substantial content, (not a log in screen).

6. Development Plan (Week 7)

I reviewed the feedback received so far and created a list of concrete changes I wanted to make. I also decided which of the prototypes I would develop into an interactive prototype.

I wrote the tasks I was going to work on and estimated how long it would take me to do each task. I kept updating the plan to reflect what had already been done and how much time tasks actually took.

Having a development plan, and updating it, was very helpful to keep me on track. It helped me learn how much time things actually take to make. And it helped me focus on what could be doable with the time constraints I had.

It was definitely difficult to choose one prototype over the other, because I wanted to incorporate the features from both prototypes into the final app. Having to let go of some features was a valuable lesson. I practiced doing my best with the resources I had and being mindful of upcoming deadlines.

7. Low-Fidelity Prototyping (Week 8)

In this phase I created most of the screens needed to create an interactive low-fidelity prototype that would be ready for usability tests the following week. This stage was focused on getting the skeleton of the app and the flow and interaction right. The prototype had to be ready for users to complete tasks using the app.

8. In-Person Usability Testing (Week 8)

Now that my low-fidelity prototype was ready, I had to create a protocol for in-person usability testing. The protocol included: a script, setup, tasks to be done, informed consent forms and how to debrief participants.

I then conducted in-person usability testing with two participants. I had them do two tasks:

  • Task 1. Pretend you have been looking for an app to help you run more. One of your friends recommended Keep Moving! You are new to this app. You installed it on your phone and now you are ready to use it. Please do the following: register, go for a 0.2 mile run, share your results on Facebook.
  • Task 2. Pretend you have already registered as a user of Keep Moving! Now you are ready to try it and want to go for a walk using Keep Moving! Please do the following: sign in, go for a 10 minute walk, do not share your results on Facebook.

I was very excited to hear the feedback from the users, especially the ideas on how to make the app better and the areas that were not good or needed improvement. I loved noticing how users interacted with the app.

I came up with a list of changes to make based on the feedback and my observations from the usability tests.

Users during usability testing of the app.

9. A/B Test Plan (Week 8)

From the in-person usability testing, I chose one element of the interface that I could redesign to leverage an opportunity with an outcome that users could be binarily classified into (e.g. clicked or didn’t click).

I redesigned the register/welcome page with an added option to register with a Google account (version A) or register with a Facebook account (version B).

My A/B test would test whether users preferred to register with Google or with Facebook rather than registering with their email addresses. My hypothesis was that most of the users would choose to register with a Google Account, since the app I was building was an Android app.

10. Unmoderated Remote Usability Testing (Week 9)

I launched my A/B Test with four users via UserTesting.com. It was great to watch the videos of users interacting with the app and hear their reactions.

The testers were given this introduction to set the mindset: “Pretend you have been looking for an app to help you run more. One of your friends recommended Keep Moving! You are new to this app. You installed it on your phone and now you are ready to use it.”

Then they had the task of registering on the app and do a couple more tasks. The set of instructions were identical for the fours users. The only difference was that two testers were shown version A (registering with Google) and the other two testers were shown version B (registering with Facebook).

The results: none of the four users clicked on either the Facebook or Google options. Instead, all of them clicked on the option to register with email.

I wasn’t sure whether this meant users would have chosen the Google option if they actually had the app installed on an Android phone. I also wondered if they chose to click on the “Register” button just because the task instructions said to “register.”

Next time I would set up the test so that I can select testers with Android phones only. I would also change the wording on the button so it reads “sign up” instead of “register” to see if that makes a difference.

A/B Testing — Users screens (none of them chose the Google or Facebook options)

11. High-Fidelity Prototyping (Week 9)

After reviewing the results from the A/B test and the feedback gathered from the unmoderated remote usability testing, I made changes to the app.

I also created a high-fidelity prototype. You can see the final results here:

https://projects.invisionapp.com/share/HQCL2FSDG#/screens

High-Fidelity Prototype — Some of the screens

12. Presenting “Keep Moving!” to the World (Week 10)

For the last week, we had to write an article about our design process and create a video to share our app design with the world. You are reading the article. And here is the video:

Watch “Keep Moving!” in Action

Keep Moving! Demo

Introducing Keep Moving!

Keep Moving! is an app that can help you engage in more physical activity (running and walking) in a fun and rewarding way. Being more physically active no longer has to be difficult, frustrating, boring or feel like a chore. Consistently engaging in the activity and making progress can be fun, exciting and joyful. It can be something to look forward to rather than avoid.

Keep Moving! Main Features

  • Track your activity easily — Keep Moving! automatically records your distance, speed and time.
  • Choose your goal type — You can either choose to run/walk by distance or time. And if you are unsure, you can just choose the stopwatch option.
  • Challenge yourself — Since it records your stats, you can always look at how you did the previous time and choose to challenge yourself with a bigger goal next time.
  • Moving becomes rewarding — You can earn badges, and earn points, the more you move. Let’s see how fast you can earn points.
  • Makes moving social and fun — You can share the results of your run/walk with friends, or everyone, on social media (Facebook, Instagram, Twitter, G+).

Final Thoughts

I’m very grateful to Professor Scott Klemmer, his team, UC San Diego and Coursera for offering this specialization. I feel I’m a better designer after taking the eight courses and working through all the projects.

This is the end of a journey, but it’s just the beginning of a new one. I plan to continue practicing what I’ve learned. And I’ll be busy learning all the things I now know I don’t know (yet) :)

I would love to read your comments.

If you enjoyed this article, make sure to share it :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.