Meals app — social photo food diary
Meet the Meals app — social photo food diary, that can make dieting fun and inspiring!
I designed this app during the Capstone project of the 8-course Interaction Design Specialization by University of California, San Diego on Coursera. The whole specialization took me one year, and Capstone was the final and most fascinating part. Here are my impressions and insights I’ve got doing the Capstone project.
Capstone project main focus is to design a prototype of an app addressing some of user needs within one of three briefs provided by Capstone creators. During my Capstone session that was Time, Change and Glance.
Needfinding
I chose the topic of weight loss under the brief Change and started to interview people. I wanted to know how people who want to lose weight do control their nutrition routine? During needfinding process I came with a bunch of user needs.
I focused on two main user needs connected to weight loss:
- Keeping a food diary.
- Getting support moving towards a goal.
I aimed to design an app that uses technology to make this experience better.
Core concept
The core concept was to create a photo food diary app and make it social.
Keeping a photo food diary can be tremendously helpful to lose weight. According to a massive study by Dr. Jack Hollis and his colleagues even simple written food diary can double weight loss, and a research by Dr. Lydia Zepeda and David Deal shows that keeping a photo diary instead of written one can further increase this progress. It happens because taking photo prior to consuming food forces people to reconsider their choices right before food intake.
In addition, the ability to share diaries with others can help people to get support from the community and to grow the motivation to move on toward their goals.
Paper prototyping
Before proceeding to design using digital tools, I started with paper prototypes.
Paper prototyping became to me one of the pillars of design process. I did know about this technique before, but I’ve used it quite rarely. During this project I did paper prototyping all the time. The more I did, the more I liked it. I went for volume: I put on paper every single idea that comes to me. Many of them were rejected, but many were reused in the final prototype.
Paper prototyping is extremely useful technique especially when the space of possible solutions is wide. It helps quickly explore possible outcomes.
Evaluation of prototype
On the next step my brand new prototype went to three stages of evaluation:
- Heuristic evaluation using Jacob Nielsen’s Ten Usability Heuristics, made with kind help of my peers.
- In-person usability testing.
- Remote unmoderated usability testing.
In two latter studies I did use amazing services, which impressed me much.
In-person usability testing with Lookback
I used Lookback.io to record participant’s phone screen and their faces. I used it for three test sessions I conducted. Use of this tool wasn’t mandatory, but I wanted to try it. Lookback has seamless integration with InVision, where I created my prototypes, so this try cost me zero effort while yielding solid benefits. After test sessions I got all the records of my participants interacting with my app and analyzed them thoroughly. It was really amazing to have a whole usability lab right in my pocket!
During in-person usability testing I used RITE methodology, which I use for years on my projects. This is an agile approach that provides problem fixing as soon as possible (ideally — after each test session). With this approach the larger amount of problems can be found with less participants. According to this approach, I fixed two major problems immediately after first testing session. As a result I found more problems by letting participants do not stuck with solved ones. I suggest to use RITE all the time.
Remote unmoderated usability testing with UserTesting
For remote usability testing four free test sessions at UserTesting.com were kindly provided for Capstone students. I did split these sessions in 2 groups, each with 2 participants, to be able to conduct an A/B test. First group was exposed to my initial design, and the second group was exposed to the alternative design, which I created after in-person usability testing. With A/B test I wanted to check that the alternative design performs better than initial one — and it did.
The most fascinating impression while using UserTesting.com was to me the speed of finding participants. My tasks were taken within minutes after I placed the order. This was really impressive. This is a massive possibility to test hypotheses quickly and move on fast.
Feed redesign
The main subject of redesign after a usability testing was a feed, where users can see meals of their friends. This is the same feed like in all modern social networks. But it has specific implementation in my initial prototype: to browse next meal, users have not to swipe up like in common social networks, but swipe right — to get new element. That was horizontal scrolling instead of vertical. When I came to this idea, I found it super-cool. I was excited about new way of browsing feed.
Unfortunately, during the test sessions I was completely disappointed. No one of participants did understand how this type of feed works. No one! Participants were expecting traditional vertical scrolling in every single test I did. Finally I surrendered and redesigned the feed to be vertical, like in common apps.
A/B testing with Google Analytics
I did with Google Analytics the same A/B test of two designs of a feed I did with UserTesting, and got the surprising results. From 21 participants exposed to initial design, 9 suddenly could figure out how to browse a feed — swiping left and right.
This experiment surprisingly showed no detectable difference between two types of feed. That means that initial design could perform good enough, so I intend to study this topic further.
Making Google Analytics work with InVision prototype
One of the problems I faced, was the lack of seamless integration of InVision with Google Analytics. It took some effort to make them work together.
First, to be able to collect data with GA, I had to download a prototype from InVision and to publish it on any web hosting (I did use pages.github.com).
Second, I had to deal with the main problem: InVision prototype comes as a single-page application (SPA), which means that GA can’t collect its data right out the box. According to GA docs, it’s up to SPA developer to choose the right moment when to push something into GA. To solve this problem I created a code snippet, which simply monitors the page address and notifies GA when it changes. By including this snippet together with GA code into downloaded InVision prototype I could get GA to work fine.
Icon labeling
I was familiar with concept that icons without labelling should’t be used except only few of them that are familiar to majority of users. During usability testing I got the opportunity to check this concept. Few of my icons really confused some of participants:
In the same time some icons worked well without labels:
Navigation simplification
After scrolling issue with feed was fixed, I got the ability to observe more problems related with feed.
During the “B” portion of tests I observed that the initial information design of the feed wasn’t clear. One of the users was confused with feed contents, where her meals photos were mixed with ones of other people.
“Why the other people are on the home page? I would only see my meals. Not everyone else’s. If I want to, I will tap on “Friends” or something like that.” — participant said.
Despite the fact that this opinion was expressed by only one participant, it confirmed the doubts I had before. This lead me to rethink information design and navigation of the app. As a result, I placed on the home page all important for the current user information: calories counter and all photos of his meals. This page took the name My meals. The feed with meals of friends and search were placed to another page named Explore. Finally the navigation of the app became much clear, and still revealing the main focus of the app: food diary with community support.
Proof of concept
During the tests I asked all participants the same question: What do you like the most in the app? Most of them answered: pictures. For me that was a proof of the concept that with pictures keeping food diary isn’t boring anymore.
Final prototype
This is embedded version of Meals app final prototype. If it doesn’t work, please use this link: http://bit.ly/meals-prototype.
I would like to thank prof. Scott Klemmer, prof. Elizabeth Gerber, prof. Jacob O. Wobbrock and all my peer students for this amazing experience. It was my pleasure to study with you and to learn from you.
I also would like to thank Ekaterina Ivanova for all love, help and support she gives to me all the time.
