Coursera Interaction Design specialization — Capstone project summary

Last December I thought, why not take a short course on UX and interaction design, since as a professional software developer I would definitely benefit from it. Well, it wasn’t exactly a *short* course, and it also wasn’t just *a* course — it was Coursera Specialization Program on Interaction Design, with seven courses plus a ten-week Capstone project, led by Scott Klemmer from University of California, San Diego.

This project took me a lot longer time than I initially expected, but I’d say it was clearly worth the effort. I could have taken only a few courses here and there, and I could definitely have done with a lot less effort, but I wanted to put effort into this, to actually get the most out of the program. Long story short, I took courses on my own schedule and overall the process took a long time. I could have done it faster, but at home we also have two young sons to play with.

Anyway, the Capstone project final submission requirement is to publish the work done, as a video and as a blog post. So here goes.

NaggingApp

Capstone project mission:

Design an interface that facilitates personal or social behavior change.

Change is hard. Sometimes we lack information. Other times, our routines and habits are really persistent, even if we wish they weren’t. Can technology help people and communities change their behavior to meet their goals? Electronic devices (computers, phones, tablets…) can help by providing information. By reminding us. And by connecting us with others. Change might mean exercising more, eating healthier, helping make a more sustainable planet, or participating in local government. Or it might be becoming a better chess player, carving out time to read, or remembering to see the world from a new perspective. How can we recognize when change needs to occur and determine appropriate goals? What methods can be effective in triggering and maintaining change?

I decided to focus on “change”. The other two alternative design briefs were about “time” and “glance”. The goal was to design a mobile app interactive prototype. In following, I shortly describe the overall design process.

Needfinding and brainstorming

Everything starts with clearly identifying a need. There is generally no use for apps that are done purely for the sake of just doing them, without a proper user need. Games and other entertainment is of course an exception to this rule.

I started by thinking about the problem-space a bit at first by myself, then interviewing people around me. Collaboratively we came up with many needs and ideas, all of which were not compatible with each other. After a few days of letting it boil sub-conciously, I started to enforce convergence of those ideas, into the design of a single, well thought-out mobile app .

By the way, I really like the Double Diamond model of the design process from British Design Council, as it very clearly makes a distinction between these two phases of the project. First you sohuld gather insight and be open (i.e. diverge), and only after that you should start to converge towards possible solutions.

Storyboarding and early prototyping

I came up with and idea of an app, that would “nag” me every now and then, if I don’t keep up with my exercise plan. However, right from the start the scope of the app was not only physical exercise, but any kind of activity one would like to do, but cannot find time or motivation to do it. This can be jogging, rock climbing, reading, drawing, learning new languages... anything.

Of course, for an app being able to nag the user, it should know about the user’s plan and goals. Thus, it had to include a planning section. It should also know what the user does, therefore it needs to contain the functionality for logging activities.

Here’s a short storyboard I came up with:

A paper prototype laid out on a large canvas was the next natural step on the process. I found paper prototyping really valuable part of the design process. What I learned of myself though, is that I just need to draw it quickly. At first I kind of spent time planning how to draw and what, but in the end the important part is to just have a large amount of papers somehow linked to each other, and with a clearly defined transition flow between them.

The story begins with the app showing a notification on the home screen, about undone activities. Then the user may open the app, check the status, and maybe log an activity.

However, this app is not designed to detect users cheating themselves. So you can, but of course you should not, log a visit to gym straight from the sofa.

The first computer-drawn rough prototype of the main screen was also drawn pretty soon, shown below. The idea is to simply show the progress on a weekly basis, with checkmarks showing the number of done activities, and empty boxes showing the count of still to-be-done activities, per activity type. There’s also a motivational quote always shown on the main page.

Interactive prototypes and testing

All interactive prototyping was done with InVision, as gently suggested by the Coursera course material. It proved to be fairly nice application for this kind of work. Graphical representation was done with just basic drawing tools, and is not of the highest possible standards.

Coursera kindly had also partnered with the company UserTesting.com, through which the last step of A/B testing was performed. This proved to be very valuable. All testers were very appropriate, they spoke aloud clearly what they think of the app and their thinking process, which greatly helped on iterating the design and I got a clear understanding of the differences between my A and B versions, and the users’ preferences about them. I will definitely use the service again.

Design rationale and final prototype

The underlying need for the app is (simply put):

Users need a simple way to monitor their activities and get a gentle push to keep up with the plan.

The key here is the word “simple”. In the first step of the project I went through available solutions to the problem and what I found as a very common denominator between most of them, was that they were very complex. I don’t want too fancy graphs of my heartrates in different sections of my last week walking trip — I just want to show how many times I got up from the sofa.

So, keeping simplicity as the guiding principle I tried to remove all complex features from the design. In line with this principle, I also wanted to keep the overall UI layout as stripped-down as possible. No need to say I consider myself to be a minimalist.

Here’s some screenshots of the final prototype, shown in InVision prototyping tool:

Also, take a look a short video demonstrating the prototype: https://youtu.be/oEohUG1pSJI.

That’s about it. Thanks for reading this far.