UX/Interaction Designer
Balance cover.jpg

Balance

Exercise and nutrition app for mobile devices.

Mobile App Design  |  Sketch, Illustrator  |  Role: UI Designer  |  2016

 

Better Together

One of the projects in the Centre for Digital Media challenged us to design a healthy lifestyle application. I worked as a UI designer in a team of six, consisting of one project manager, two UX designers, two UI designers, and one developer. 

 

The Challenge

In ten weeks, we had to build a proof of concept of an application that would help a company's employees (with an average age of 50) to lead a healthier lifestyle. The project required that the app combined both nutrition and exercise, and left the platform to our decision.

 

User Survey & Competitor Research

There are a myriad of health apps available in the market. To stand out, our app needed a differentiator. We conducted research on existing health apps and tried them out for ourselves, taking note of their strengths and weaknesses.

We also needed to decide on a platform for the application. To do this, we sent out a survey to people within the target age group to determine their technology usage levels. We found out that all of them either used a smartphone or a tablet, thus we decided to build a mobile app. Wearable exercise bands were also one of our initial considerations, but less than half of those surveyed used a wearable device. As our goal was to reach as many employees as possible, we decided that we would not integrate a wearable into the app.

 

User Interviews

Screen Shot 2017-05-06 at 12.15.08 AM.png

We wanted to understand people's motivations to keep healthy, in order to build an app that would help them in achieving that objective. We conducted interviews with five people of different genders. Three of them were in their 50s, and two in their 30s. We asked them to describe their daily routine in terms of exercise and nutrition, and what their difficulties were in trying to keep healthy. Additionally, we asked them to share their experiences with health apps, and what they found good and bad about them.

Their responses were mapped out to help us analyze the similarities between the interviewees. We concluded that motivations for good health were similar regardless of whether the interviewees were in their 30s or 50s. Thus, the app could be aimed for a much wider audience.

Family and friends was the most common reason for keeping healthy, and a very common problem about food tracking apps was the tedium of entering data three times a day. Three of our interviewees found automatic step counters in their phones or wearable devices to be useful, as it added value to something they were already doing anyway (walking), without any extra effort.

 

First Iteration

For the nutrition portion in the first iteration of the app, we introduced voice input for meals as an optional alternative to typing, as it would reduce the tedium of data entry. Additionally, we brought value to the data entered by suggesting a list of recommended foods based on previously input data. 

We found that the voice input was not popular as it was still too much work for the users to break down their meals by ingredients and amounts.

For the exercise portion, we had the idea of donating steps to charity. If users achieve more than a set number of steps in a day, an organization would sponsor money to a charity of the user's choice. This feature was well-received by the users.

 

Second Iteration

Screen Shot 2017-05-06 at 1.05.07 AM.png

In the second iteration, we introduced social features to the app, following our interview result that friends and family was a source of motivation. Users could issue steps and/or nutrition challenges to their friends. We also designed a newsfeed for users to keep up with their friends' achievements. Users in our tests liked the idea of challenging friends, and thought that it would be effective in encouraging them to stay healthy.

Another change was that instead of inputting meals by voice, we allowed users to take a photo of their meal and specify the percentages of food groups through sliders. This would take away the need to input meals ingredient by ingredient. Furthermore, photo-taking of food was something that most people were already used to doing, so it was an extension of many people's habits.

To test if the idea actually worked, our team took to Facebook to post photos of each of our meals, specifying the food group breakdowns for each meal.

It was actually fun to comment on each other's meals, and it provided a chance to ask friends for recipes of food that looked both yummy and healthy.

However, we ran into an issue for specifying food groups - it was an inadequate representation of food. For example, french fries would be recorded as 100% vegetables, which is not as healthy as it sounds. There were also no food groups for items such as coffee. 

 

Third Iteration

It was during this iteration that we made the bold decision to track nutrition by photos alone. From the Facebook test, we found out that our eyes could instinctively tell how healthy a meal was, even without inputting ingredients or food groups. Meal tracking by photos alone was enough to raise users' awareness of what they had been eating in the previous days, thus allowing them to make better decisions on their next meals. Users could add optional tags to the meals if they desired, in order to log more information for their own reference.

We decided to make social functions the main feature of the app, as it proved to be the most useful in motivating users. We drew the app's information architecture, designating the newsfeed as the homepage, and making sure that the challenge functions were easily accessible.

 

Production

With our concept confirmed, we moved into the production stage. As we had many mockup screens to create, we needed a style guide so that multiple team members could work at the same time to create the screens, while maintaining consistency across the whole app. We decided to use iOS as the platform for the proof of concept. I was tasked with creating the style guide, and I referred to the iOS design principles for design elements. Elements like font, colour, spacing, button formatting etc were specified in our style guide.

Using the guide, all the screens of the app were created. The final step was to input the specifications for each screen into the code that our developer had written. With my background in programming and my role in making the style guide, it was easy to communicate between us what was necessary to ensure that the coded app looked exactly like the mockup screens.

 

Results

The app was very well-received during its beta test. Users commented that it was beautiful and easy to use. The social features interested them enough that they would come back to the app again and again. In conclusion, the project was a success.

 

What I have learnt

Looking at how our final solution differed hugely from existing apps, I have learnt not to let existing solutions tie me down and distract me from better alternatives. I have also learnt not to be too sentimental about my original ideas, so that it does not hinder my ability to come up with new and improved ideas.

User testing was a huge factor for our success; developing the app to suit users' preferences and lifestyles was a key reason why it was well-liked. No matter how good the analytics of an app may be, if its users refuse to input their data, the app would be useless for them.