top of page

Liv Fit- Fitness App

app.png

App Description

Liv Fit is a comprehensive health and fitness app. Lose weight, improve your overall health and strength with daily tips and programs. Personalize your exercises and challenge your friends and build your own fitness community. Set your goals and track your progress with auto-generated statistic reports.. As you reach your goals and targets you will be awarded badges and titles that you can share on your social media. Get access to a large database of health information tailored to your body and interest.

Features

●  Live updates and health tips

●  Daily meal recipes

●  Exercise plans focused on the needs of the users

●  Connecting with other users and creating a community

●  Create custom challenges and challenge other users

●  Keep track of your progression

●  Get comprehensive breakdown of food

UX Research Methods

Online Research

I researched online to establish the current condition of obesity. Obesity is global and extends through all ages. People are realizing that other sickness and health issues are directly related to their eating lifestyle habits. On a positive note obesity is preventable with a change in diet and exercise.

User Interviews

I conducted interviews of people ranging from a wide age group. The purpose of the questions were to learn from the users directly the main points about healthy living. I was able to understand what motivates and inspires them to change their lifestyle. More importantly I was able to understand reasons the challenges they face while choosing a healthy lifestyle.

User Personas

The summary of my interviews and research suggested that there were users with diverse needs and challenges. The answers I received from my users helped me manifest a persona who had problems and issues from a wide range of users. I designed this persona to be the average user with common and critical problems.
Focusing on this persona I am able to keep her needs and problems in the center which greatly helped me produce innovative and effective solutions.

interviews.png
personas.png

User Journey Maps

I scripted a journey map of the user to understand the flow of how the user would discover and incorporate the app in their routine and what their experience might be during each phase.

JM.png

Problem Statement

“How to assist people of all ages stay fit by improving their eating and exercise habits, and keeping their motivation high?”

Conceptualization of Liv Fit

bs.png

Brainstorming

The problem statement shed light on areas that need solutions. Keeping Jennifer in the center I came up with solutions ranging from healthy recipes to quick and effective exercises. One major problem I wanted to tackle was to help users feel motivated to continue. I decided to create an app that would help users like Jennifer feel weight loss is a community activity and add bit of competitiveness.

User Work Flow

Until this point I only had a vague idea on how the app would look, building a user work flow gave me a good perspective of what pages I would need to build and what tasks a user would do in the app.


A user work flow gives me direction on how to also help the users navigate around the app.

US flow.png
Screen Shot 2020-05-25 at 20.54.46.png

Sketches

Drawing rough sketches is the first step of how I visualize the app. This additional step safes me the trouble to think about spacing, color, font, etc. I can solely focus on the layout of the UI. I can change mistakes easily and re-do screens without spending too much time and resources.

Wire-Frames

Creating wireframes is building the visual skeleton of the app. I can arrange the elements and the basic layout of each screen. I can focus on the functionality of the app rather than the elements such as buttons, icons, pictures and content. I can also do the first test run of the screens using this as a low fidelity prototype.

Wireframes.png

UI Visual Research Methods

Inspiration Board

Before I decide on a theme and the visuals I like to put together an inspiration board. An inspiration board updates me on existing apps and other related visuals. I can also evaluate other apps and see what works and what doesn’t to adapt or drop solutions.

Theme and Color

I decided to proceed with a “natural” or “forest“ yet modern theme to symbolize health, growth and a feeling of returning to organic eating. I picked hues of green and gray to create my palette.

Typography

I chose the Modern Sans font for this project because it was clear but at the same time trendy. This font is not too formal and gives the app a more friendly appeal.

INSB.png
Color Pal.png
Screen Shot 2020-05-25 at 21.08.36.png

Logo and Icons

I sketched out different versions of icons and the logo and picked the icon based on clarity, simplicity and relatablity. The icons were designed in color tones to avoid a color clash in the screen at the same time, the user can easily view them because they stand out in a bold colored background. I chose the logo to have be a sphere with a mozaic look with the color palette I picked before. This is a mix of the nature and the modern theme.

logos.png

UI Visual Research Methods

Ui screen.png

Prototyping

Image 1610.png

Prototypes are a great way to develop a cheap and fast versions of the real app. Creating prototyping links gives me a working model of the app. I build dynamic prototypes which trigger an event with an action. I also add animations to the prototypes to improve the customer experience and overall appeal.

I use the least amount of time on the prototyping as these are not the final screens and using too much of time might make me overly attached to it which will hinder my judgement during the testing phase, Low fidelity prototypes can be made with paper or sketches, but I prefer going as close as possible to the real app in the given time limit to get accurate results when I carry this over to the testing phase.

Group 1598.png
Group 1607.png

Testing

Group.png

I conducted tests with users and asked them to talk out loud as they navigate and use the app. I prefer to video record the session to refer while modifying the app. I outlined 2 major modifications that were needed; one being the navigation between different pages of the same tab, In the current UI the users had to return to the landing page of each category even if they wanted to go one back one page. I instaled a back button on the top bar of the app. The second one is a easier and quicker way to enter items in the diary; I solved this by adding a ‘ +’ tab in the lower bar.

Future Developments & Final Thoughts

Future Developments

Liv Fit has great potential to grow and increase it’s features. After I received feedback from the test users I have outlined possible future developments
● Include a weekly meal plan
● Increase workout plans
● Connect users with professional health care practitioners
● Add an automatic shopping basket for the week’s meal prep

Final Thoughts

Obesity is a world wide medical condition that can be prevented and cured by improving eating and exercising habits. I hope to help people who feel demotivated or confused about their health condition. The purpose of Liv fit wil people achieve their health goal amongst their busy schedule and substitutes as a health assistant to users.
Liv fIt motivates users by building a support community where users can work to change together by chalenging each other and earning badges and status. Liv fit is just my mock project however if given the opportunity I would love to develop it to a real working app.

bottom of page