What I learned about user-centered interaction design: the tale of Healthy Food Finder
I’m just about to complete the Coursera — UCSD specialization in Interaction Design. The last part of this journey has been a Capstone project, in which I got to tie together everything I’ve learned so far in designing a mobile app. The Capstone project follows an agile approach of 1-week iterations, each with a deliverable, and user feedback throughout to keep iterating on the design and improving it. Throughout this journey, I learned the importance of observing users. They often surprised me. I made both small and large changes along the way as a result of these observations.
We had a lot of leeway in our project chose, and I decided to work on an app to help people change to eat more healthy.
Getting started: Needfinding
The first step was to observe people (potential users of the app) and determine the needs. I combined observation with interview questions. I determined that people did want to eat more healthy — it surprised me that in my question about what people would change about their lunch or lunch process, everyone said they wanted to eat more healthy. In my observations, I noticed that people were missing out on healthy food options in front of them.
As a result of needfinding, I confirmed that an app to help people change so that they eat more healthy would be in demand. From my observations, I determined my POV — one that I would not have imagined without these observations. My POV for the app design is that healthy food options are all around people — they just need help to find these options.
Paper prototypes to get quick initial feedback
Before investing time designing the app, I needed to figure out which approach would work better. I had two different ideas — one was for an app to help people who are hungry to find healthy food options around them (Healthy Food Finder). The other idea was to help people earlier on, when they are doing grocery shopping (Healthy Food Shopper). I put together a paper prototype for each idea and got feedback.
I’d like to say that the paper prototype was quick, but because the interface was so easy for me to create, I actually fleshed out all my screens in one design and only took shortcuts in the second. For future iterations, I learned that I don’t really need to create every screen to get the feedback that I need. I demo’ed both paper prototypes to people in my target audience and also to a colleague in my class. I got feedback on all the issues with the paper prototypes and made a decision on which approach to take.
What surprised me most with the paper prototypes was that people were confused by the labels in Healthy Food Finder. Before my next iteration, I needed new label names. From observation, I also found out that people wanted to compare items. Comparing items wasn’t part of my original design, but became an important feature. It seemed like there were exciting possibilities with Healthy Food Finder.
First electronic prototype and user observation
I used InVision for my electronic prototype and various tools to put together the images for my screens. I’m not a graphic designer and don’t feel particularly skilled, so I was happy to leverage ready-made UI elements in one of the tools. We were starting with wireframing, with the idea of getting out quick electronic designs and not invest much time at this stage. At the end of the class, I realized that this approach is not great for this Capstone project. We didn’t have an entire iteration (or more) to creating the pixel-perfect final prototype, and my few initial screens eventually got copied and tweaked to many of the final set of 24 screens. In the long run, it would have been better to create those initial screen closer to my final vision from the start.
After I created my electronic prototype, I observed two users complete two tasks in the prototype. I even improved my design between users. My first user was clear on my new labels (an improvement from the paper prototype), but he wanted to see pictures of the food items. I was surprised that he didn’t use the “compare” button feature. I took pictures of a few food items. In my redesign, I changed a few elements to have room for the picture. The food details became full screen, and I changed from a “close” icon at the top, to a “back” button on the bottom, near the “compare” button.
My second user was about to use the “back” button when he noticed the “compare” button next to it. Every user from this user on would use the “compare” button. This feature was a hit.
A/B testing online
Based on observations from testing both users, I made a few changes to the prototype. But I wanted to find out how important were the pictures of food items. I had placed these pictures on the food detail screen.
But would it be better to put the pictures right on the home screen? This meant a big change where pictures and more information was displayed right on the home screen. I did A/B testing by having some users test the A design (improvements to the previous user test, but with the same navigation from the last test) and other users test the B design (same as A, except with the new navigation). This time, users who I didn’t know tested my design! I used usertesting.com to get strangers to test my design and give me feedback. Because I wanted to see whether people would use the compare button or use other navigation elements to compare food items, I completed more screens on my interactive prototype and figured out a way for people to be able to compare any two of the three fruit items.
It was really cool to have one of the people testing my A design be enthusiastic about my app. With my changes, both users easily completed the task and gave suggestions for further improvements. I was surprised how poorly the B design fared. One user was confused by the design and didn’t even find one of the fruit items. The other user could use the design, but asked for the simple list that is actually part of the A design.
I was surprised to see that from the Compare screen, everyone was returning to the home screen, instead of going back and doing a second comparison. They were tapping the back button a couple of times to return.
Current prototype
I made design improvements to make the UI more attractive and modern. I made a few tweaks to the navigation, and I removed the “photo search” feature that most people ignored (and that confused some users).
You can check out a brief video demo for Healthy Food Finder here: https://youtu.be/ZqlDRtaNqDg
And you can try the prototype for yourself here: https://invis.io/B8CBDDARS#/240682968_Eat-In
It took 10 weeks to go from initial idea to this version of the prototype. My initial idea of helping people change so that they eat healthy was vague and would have been very different without all my user observations. I ran this last version of my prototype through usertesting.com — the user was successful, and her feedback was all suggestions for additional features to enhance the product.
