Fitness Tracking Mobile Application

A fitness application that helps users keep track of their exercise processes

Mobile UI Design and implementation


Overview

In this project, I designed and implemented a fitness mobile application - Fitology. This project aims to practice the iterative design process - from paper prototype to hi-fi static prototype and finally interactive hi-fi prototype implementation. I utilized Figma for design and React Native for implementation.


Image


01

Define


User Profiles

People who work out regularly and who utilize the mobile application for tracking exercise records.


Role

UI designer and developer


Goal

  • Design and develop a fitness application that provides a platform for uses to document the exercise process, make workout and eating plans.
  • Enable users to create short-term and long-term fitness plans and allow them to compare plans in different chronicle order.
  • Create a community where users can search for a variety of exercise activities and recommended fitness plans.


    • 02

    Paper Prototyping

    I designed paper prototypes of multiple capabilities within the app. These prototypes display a set of static screens including "Main View," "Meal View," "Exercise View," "Food View," "Plan View," and "Goal View." I also sought to simulate interactive scenarios using different paper components.

    Image

    Image


    03

    Visual Static Design

    I designed high-fidelity visual designs of my screens for each capability. I employed the visual and layout design principles such as grid organization, type and imagery integration, visual hierarchy in the prototypes.

    Design Plans and Choices

    Font: Roboto

    Color:



    Hi-fi Static Prototypes

    I utilized Figma to design the hi-fi prototypes.

    Image Image


    04

    Interaction Design



    Image


    05

    Implementation

    I developed the app using React Native. The app was connected with the school cs department database and I utilized RESTful API to enable the data flow. The app allows users to sign up and create an account and they can add and delete an exercise activity of their choice. In each exercise view, they are able to input calorie and time duration goals. The goals will show up on the main page based on the date. The application uses Stack Navigator for navigation purposes. It also provides functions for users to exit whenever they want to.

    Request to view project on github


    06

    Accessibility Implementation

    This application also supports the screen reader assistive technology features. It provides hints and labels for each component so users with visual disability can enable VoiceOver feature on the iPhone and then utilize this app without difficulties.

    View the below videos for more information