Myfitnesspal Android App UI User Testing & Prototyping

Myfitnesspal is the world’s most popular health & fitness app.

The aspirations for this project started out based on solving the problem of a lack of net carb counter for users following a ketogenic diet. However, due to time constraints, proper recruitment for user testing was not possible.

My approach then was to discovery current usability issues through user testing on the android app and design to solve 1 to 3 key findings from the user testing.

Usability Testing

UI Design

Rapid Prototyping

Usability Testing Round 1

 

Myfitnesspal is first and foremost a calorie tracker. Therefore, my scope of the testing was to plan task around the user flow of tracking a meal.

I set up my test plan in a Google docs and took notes during the test in a spreadsheet.

After analysing the notes from the usability test, there were three key findings:

The user was simply trying to search for the English muffin they had for breakfast.

It was not clear to the user that they only searching through recent history even though “recent” is bold and underlined with in the user interface.

The user did not inherently know they needed to press the search key to search the entire food database.

In addition, the “Search all foods for ‘English’” went unnoticed by the user.

Interaction

 

The user then added food they had ordered from Starbucks but was confused why they couldn’t change the serving size to reflect that they had only eaten half of what they order.

They gave a long pause before attempting to interact with the “Number of Servings” or “Serving Size.”

It actually doesn’t matter where the user interacts with those options because the app will generate the same pop up screen to edit the serving size; however, the option to even edit was not clear to the user.

Information Architecture 

 

The user then wanted to view their complete daily nutrition for the day. They wanted to know how many grams of protein they had in particular.

The user expected that completing “Complete Diary” would achieve their goal; however, “Nutrition” would actually taken the user to where they wanted to go.

As much fun as it would be to completely redesign the UI of this app, it wasn’t going to best solution to the usability problems I discovered during testing. From a business perspective, it would be expensive to do that. From a user perspective, a redesign of a very well known app could cause more usability issues than solutions. And also being mindful of time, I wanted to solve these problems by making twinks to the current UI that would help guide the user during their task flow. A low cost, rapid, user centered solution.

My solution to the search was to underline the search bar to indicate to the user that they are indeed searching the entire food database and not just recent foods.

This solution makes the assumption that developers would be able to implement an auto search feature.

Interaction

 

That same underline approach was used again to help the user know that they can in fact change the serving size of what they have eaten. 

Information Architecture 

 

I wanted to test if giving the user multiple ways to get to their nutritional information would be in fact help them to their goal.

Therefore, after the user chooses “Complete Diary,” the user would receive the same result but now with a button to see “Nutrition.”

Rapid Prototyping

 

I used Photoshop to quickly implement the UI changes I was proposing. Invision proved to be a great tool to import my screenshots to make a rapid prototype to test my solutions.

A key feature I wanted to mimick was the autosearch.

View a recording of the prototype here! 

Usability Testing Round 2

 

To test if my solutions actually solved the problems the user from the first round of testing had, I used the same set of task. However, I gave them a specific item to enter due to limitations/smoke and mirrors of the prototype.

During the first task, all the users were successful in their task of adding in bacon and adjusting serving size. It was even noted that one user was delighted to see that bacon automatically searched.

During the second task, users were either frustrated they could not get to the information they wanted or found it in other ways outside of my proposed solution.

Overall, my UI changes to the search bar paired with the mimic of an autosearch appeared to be successful. In addition, all users now knew that they could in fact change servings size. However, I would now reevaluate my solution to finding daily nutritional information.