UI/UX Case Study for designing my first mobile app Food Diary named Healthy Body

Anna Rozum
Jan 29, 2019 · 9 min read

Introduction

This is the story about my first steps in the design industry. I know a little bit about every design field because I learned it at the University. I started by finding out which specialization interests me the most. I like thinking through the concept of how the product works with the users, make the interface convenient, analyze, test and I like working on the visual part of design too. So, I came to conclusion that I wanted to be UX/UI designer.

Therefore, I found IT school and began to study there. Earlier I read many books about UX/UI design but I had no specific practice and hadn`t enough knowledge about tools that could help me to achieve my goals. I was digging into the new profession at home, watching YouTube videos, reading books and articles.

Why this project?

In the beginning of my study, our teacher told me to take some interesting theme for the project which I should create using UX/UI design tools. I took popular theme related to healthy life. It was Nutrition Diary! I called it Healthy Body. Going through all the study topics, gradually I created my own application. Let`s proceed to my story below.

First, I studied main things about User Experience design, major design approaches and methodologies. For creating my training project, I chose the approach that is called Design Thinking. It means I need to solve the end-user`s problems with qualitative research in the first phase of the process. My goal was to create the app which could solve and-users problems. During the designing, I used many tools such as product canvas, personas, scenarios and other.

Business Research

For well-made UX design, I should have done business research that contains product canvas and interview.

Product canvas is a tool that helped me to get a BIG PICTURE of the project idea. You can see it below. It contains information about end-users, their problems, main competitive advantages and product competitors. Since I was creating an application for food diary, I researched that my end-users have huge problems with planning their nutrition and usually forget important things. Therefore, my Healthy Body app would help people not to forget to buy products or to perform some activities from their schedule with reminders! Moreover, this app will have other useful features.

Product Canvas for my Food Diary

User Research

For the next phase of my designing, I should have find out who is going to use my app. Therefore, I created a fictional character, which represent a specific user group that might use a product in a similar way. You can see this description below. It is called Proto Persona.

Proto Persona

Interview

To elicit the information for qualitative research I had to prepare an interview with end-users and conduct it. The questions are asked to elicit the information about user’s needs, goals, pain points and behavior.

Later I prepared 15 questions to my friends and conducted the interview with those of them who can be potential users of my app. I had Critical Questions like this avoiding compliments and information about my project idea:

- Do the issues with health exist? Are they related with your nutrition?

- Do you care about fixing this issue and why?

- How do you try to fix your issues now?

- Or maybe, how did you try to fix the issues earlier?

- Do you have any tools to help you provide healthy life?

- How much did it cost?

After conducting my interview with friends, I recorded audios by my mobile. I analyzed them and then refined my persona template based on the interview insights.

Building user scenario

Final stage for user research was building user scenario. It is a tool that presents a set of actions taken by an end-user in order when using a product to achieve a goal. For easy storage gathered information I chose tool called RealTime Board. It helped me to see all my work done and create the scenario for my project using its elements.

I created two types of scenario: As-Is and To-Be.

Part of the As-Is scenario

It is only a part of scenario that describes current User Experience based on the interviews. It shows us how users solve their problems by ordered actions.

Another type of the interview called To-Be describes how can users achieve their goals using my app features.

To-Be scenario

I understood it would be more convenient and would take less time to achieve user’s goals.

Informational Architecture — from Scenario to Sketches

Next, my stage was creating Low and High Fidelity Wireframes. First, I used only pieces of paper to understand what main elements should be on the app`s screen. And then, I created simple sketches by graphic tools like photoshop and paint.

My scetches

Before creating low-fidelity wireframes I should have built a sitemap and create Tree Test via optimalworkshop.com that helps me to understand if my app navigation is good planned or it should be correct.

First, sitemap helps visually denote how different pages and content relate to one another. I decided what content and functionality of my app should contain. My created sitemap has matrix structure.

How can I understand if the navigation of sitemap is well made for users. And then I thought I could conduct tree test with my end-users. For this, I built sitemap on optimalworkshop.com and users found the locations in the tree where specific tasks could be completed. For example, some of questions were like this:

How can you change your goal for weight?

Where can you find a recipe for your breakfast?

The result of conducting the tree testing you can see below.

Result of my tree tasting

Using the tool called Balsamiq gradually I created Low Fidelity Wireframes and edited them in Photoshop. It was my foundation for creating a beautiful usable interface for Healthy Body app.

UI part of the designing

For creating a colorful design for my app, I should have the inspiration in current sphere. Therefore, I created the Mood Board that helped me to understand what colors and pictures I would use in the app interface.

Mood Board for Food Diary

I decided to use many colorful bright pictures on the dark background. Because when I using such a method all our attention would focus on the light colored text and the pictures. For Android platform I chose the font family Roboto because it`s native.

I thought a lot about a splash screen that is usually appears while a game or program is launching. It is a graphical control element consisting of a window containing an image, a logo and a slogan. Using a dark gradient I focus users on the logo. Here it is:

Splash screen

For home screen, which people usually see after the downloading application, I used clickable cards and a navigation bar with five icons. Following modern design trends, I didn`t use a burger menu because all my app features can solve users tasks without it. For easy viewing the information, I designed a breakdown of what users have eaten on a caloric and macronutrient based level and how many water they should drink for the end of the day. This table with all dates is always over all.

Also, I would like to add, that my app was designed for the platform Android xxhdpi.

Therefore, while creating visual part of the interface, I used official guideline for android from Material Design. It was easy to follow that information because there were the measurements of all Android components.

Here it tooks a lot of space, if I share all my screens pictures. Therefore, I am going to show you only some of them but I have recorded the video about prototyped screens Healthy Body app. For prototyping my product I used InvisionApp.

Promo Web Site

To help promote Healthu Body app I designed promo web site. It has information about main apps futures. It has four sections.

Usability testing

Heaving the clickable prototype of my app, I should do user research wich focuses on understanding user behaviors, needs and motivations throught observations techniques, task analysis and other feedback methodologies. User research includes qualitative research and quantitave. Qualitative research methods answer questions what problems users face using the a solution, why this problems occur or how to fix them. For my project I chose method usability testing to see how easy to use my app with real users. I prepared a list of tasks for them to see where they encounter problems and
experience confusion. Next, I conducted moderate in-person testing with my friend. For example, some of questions:

  • How could you check the drinked glass of water in this app? What changes can you see after that?
  • In what way should you add the new recipe to app base?
  • How could you send to someone your list of product using viber?

After that, I figured out some issues and some points where design changes were necessary. There were:

  • Some icons were not understandable for users
  • Some buttons were placed incorrectly
  • The color of Navigation icons reflected the user’s location incorrectly
  • The icon “Back” shouldn`t be placed on the second step screen after switching from navigation bar according the requirements of Material Design
  • Information about users goal was shown twice in two different screens

Next, I fixed all the issues following the test results and recorded the video with changed screens. And I am going to show you it.

Another type of user research is quantitative research method that answers questions about how many and how much types of problems users face. I didn`t conduct it because I haven`t the ability to gathered many and-users. But, thinking about how to define success hypothetically I would highlight the following metrics such as happiness, adoption, retention and engagement. I belive I`ll still have a possibility to conduct A/B Testing and do App Analytics.

Final Thoughts

With today`s modern and hectic lifestyle, health and fitness often take a backseat to the rigors of everyday life. The main peoples problem being that most of them just don`t know how and where to start or forget about their planned schedules.

In our day-to-day lives we all use a multitude of products for a variety of reasons, be it work, entertainment, social or dating. Looking at things critically, thinking of ways how I could improve an experience for masses I designed Healthy Body app, which could be a tool to allow users to make their lives healthier quickly and easily.

However, this project was a trainee one and the first step in my designer experience, I hope It will be liked by everyone.

Special thanks to Julia Fok, Julia Sariyeva and everyone who supported me and helped while I working on this project.

Anna Rozum

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade