JSS MAHAVIDYAPEETHA

JSS SCIENCE AND TECHNOLOGY UNIVERSITY

(Formerly Sri Jayachamarajendra College of Engineering)
JSS TECHNICAL INSTITUTIONS CAMPUS
MYSURU - 570 006

Subject: Mobile Computing (EC832)

Event – 4
Implementation Report for Long Term Event – 2
“FITNESS APP”

Course outcome covered in this event:

CO5: Design real time embedded systems using the concepts of RTOS, simulate using
modern software tools through group projects and give effective oral presentation with
documentation.
Submitted by

Sl. USN NAME

No.
1. 01JST16EC032 DEVENDRA GIRI GOSWAMI
2. 01JST16EC084 SHUBHOM V T
3. 01JST16EC097 SUMUKH S
4. 01JST16EC039 PREETHAM KACHI
5. 01JST16EC107 V.PRATHIK

to
PUNEETH K M
Assistant Professor
Department of Electronics & Communication
JSS Science and Technology University
Mysuru

DEPARTMENT OF ELECTRONICS AND COMMUNICATION

JSS SCIENCE AND TECHNOLOGY UNIVERSITY
JSS TECHNICAL INSTITUTIONS CAMPUS
MYSORE-570006
TABLE OF CONTENTS
SL. NO. TOPIC PAGE NUMBER
1 Introduction 2
2 Background 2
3 Application overview and interface design 4
4 Application Implementation 16

5 Heuristic evaluation and user testing 23

6 Conclusion 34

1
1. INTRODUCTION
Since the emergence and popularization of smartphones, many mobile applications that
track and record data about their users have been created. Mobile has become an
important tool, it is no longer limited as a communication service only, but exceeds its
position to provide modern techniques and many services. Mobile technologies are
increasingly growing among years; there have been several new researches and
developments in this space. It has been reported by statista.com that more than 46 million
people in the world use health and fitness applications in 2014. [1] .The classic example
of this is the pedometer which utilizes the mobile device’s built-in accelerometer to track
the number of steps the user takes each day. Applications in this category, that track and
record health or activity data about their users, are typically called Wellness or Fitness
Apps. These Wellness and Fitness Apps are designed to assist the user in pursuing a
healthy lifestyle by encouraging them to perform positive activities, and improve lifestyle
choices. Factors that are typically targeted by such applications include exercise, sleep,
and diet. Understanding the nature of this relationship is crucial when designing a
Wellness App. Applications like ours have the potential to motivate its users into
maintaining a cycle of positive lifestyle decisions and/or breaking a cycle of negative
lifestyle decisions. Diet, exercise and sleep can influence several physiological pathways
associated with depression and a bidirectional relationship likely exists between
depression and these lifestyle factors, thereby creating a potentially increasing cycle of
influence.

2. BACKGROUND
2.1. Issues in application development

Flutter is a new open-source UI software development kit that is still under progress. At
the current stage flutter has around 7000+ issues in github. This makes it a fairly unstable
platform and hence development of an app using this kit is challenging. This platform is
supported by google and is believed to have a greater development in future.

Flutter also doesn't have a huge community support that the other cross app development
platforms like React Native by Facebook PhoneGap from Adobe, Xamarin from
Microsoft have. This platform is being heavily advertised and seen a good adoption rate
from 2017. Thus the platform is not mature.

2
Using flutter forced us to learn new programming language know has dart. The only
positive half was that dart is comparatively easy to learn. Modern framework tries to
separate logic and UI as much as possible but, in Flutter, user interface and logic is
intermixed. We can overcome this using smart coding and using high level module to
separate user interface and logic. Thus we had to implement these in order to complete
our app.Flutter is also subjected to slow performance .It has very limited libraries when
compared to there competitors.

JSON parsing in flutter is tough to implement and hence consumed most of the time, We
had to use dart:convert library in order to implement JSON.

2.2. Application development software features

The most important advantage of flutter is that it is a cross platform which means it can
run on most or all systems with little or no modification. This puts on a major advantage
as the language used ‘dart’, stays common and the logic remains the same whether it is
IOS or android. So any changes implemented in future will automatically update the app
in all other platforms.

The Dart syntax is easy to understand for JavaScript or Java developers as it supports
most of the object-oriented concepts. It’s easy to get started with Dart as there is great and
easy-to-follow documentation available on their official Dart site.

Flutter uses the most commonly used tool likes android studio and visual studio code for
editing and implementing dart.
Flutter support for more Firebase APIs. It also supports for inline video, ads, and charts;
and also has many bug fixes done. Flutter is free and open source hence involves many
developers in its domain. Flutters architecture is based on reactive programming, i.e. a
development model structured around asynchronous data streams.

Currently, use cases of the toolkit are few, but they’re rather impressive. Google itself has
used Flutter to create the AdWords app, which assists advertisers and keeps track of ad
buys. The Alibaba app is also built with the toolkit. Alibaba is China’s biggest e-
commerce company and resembles Amazon.

3
There are also some other apps built with Flutter that aren’t as popular as AdWords and
Alibaba. For instance, the official app for Hamilton, the Broadway musical. The Hamilton
app features daily lotteries, exclusive news and videos, a trivia game, a merchandise store,
and more. Coach Yourself (a meditation app for the German market) and Abbey Roads
Studios’ Topline app (a recording service which captures song ideas) are also built with
Flutter.

Some other important software features that are worth highlighting is

Hot reload: Developers can see all the changes they’ve made to the code right away in the
app.
Perfect for an MVP: If you want to show your product to investors as soon as possible,
you can build a Flutter mobile application that looks native on both Android and iOS.
Thus, your investors will have a clear idea of what your MVP looks like. Developing two
separate apps would take much more time and money.

3. APPLICATION OVERVIEW AND INTERFACE

DESIGN

3.1. System Architecture

3.1.1 Operating Environment

A. The application is designed to work on all devices that are running iOS version 8 or
later and Android API level 17(Jelly Bean) and above.Currently this includes the iPhone
family, models 5 through 7, and the iPad, generations 2 though 4 and 99.2% of the
Android Family.

B. The application will store all data in a shared database like Sqlite. The application will
require an online connection atleast one time a day to upload the stats.

C. Development of the software will be based on Flutter platform using Dart.

The software will run natively on Android devices capable of running Android version
4.1 or later.

4
3.1.2 General Constraints

A. The software requires an Android device running Android version 4.1 or later with a
touch screen and simulated keyboard.

B. The ability of the software to interface with an online database must be implemented

3.1.3 Assumptions & Dependencies

A. If no exercise routines are created by users, there will be no routines listed in the
application for users.

B. If no internet connection is available, users will be unable to log in or access any

functionality of the software.

C. Unregistered users will have no access to the software.

D. Users will only be permitted to register and gain access to the software once they agree
to the terms of service agreement.

Fig 3.1. System Architecture

5
3.2. Interface design inspiration

As soon as we got the idea of building a fitness tracker application, we started searching
the web for all the references that we can gather to give the best from our side. One of the
main goals was the ease of use and clean user interface.

We were heavily inspired by the look of Calorie Counter - MyFitnessPal app and Google
Fit: Health and Activity Tracking app.

Fig 3.1. and Fig 3.2. Calorie Counter of MyFtiness App

The simple,clean appearance of the app was inspired from the MyFitnessPal app and the
approach to display the statistical data was taken from the Google Fit app.

6
 Fig 3.3. and 3.4. User Interface of Google Fit App

We chose Flutter which is an open-source UI software development kit created by Google

because the same code that we write can be used to create an app which can be published
both on Google Playstore and Apple App Store.

UI design in Flutter involves using composition to assemble / create "Widgets" from other
WidgetsComplex widgets can be created by combining many simpler ones, and an app is
actually just the largest Widget of them all (often called "MyApp").

The Flutter framework contains two sets of widgets which conform to specific design
languages. Material Design widgets implement Google's design language of the same
name, and Cupertino widgets implement Apple's iOS Human interface guidelines.

Flutter widgets are built using a modern framework that takes inspiration from React. The
central idea is that you build your UI out of widgets. Widgets describe what their view
should look like given their current configuration and state. When a widget’s state
changes, the widget rebuilds its description, which the framework differs against the
previous description in order to determine the minimal changes needed in the underlying
render tree to transition from one state to the next.A widget is either stateful or stateless.
If a widget can change—when a user interacts with it, for example—it’s stateful.

7
A stateless widget never changes. Icon, IconButton, and Text are examples of stateless
widgets. Stateless widgets subclass StatelessWidget.

A stateful widget is dynamic: for example, it can change its appearance in response to
events triggered by user interactions or when it receives data. Checkbox, Radio, Slider,
InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass
StatefulWidget.

So, once all the references and ideas were taken and congregated, we started building our
app close to the two reference apps that we considered.

3.3 Paper prototype

Paper prototypes, in their most simple form, are drawings of the user interfaces (or
screens) that is planned to have in app. They are proven to be effective because a design
expert isn’t required to make this prototype. The developer can create it quite easily.
Figures 3.1 through 3.4 represent the paper prototype of our project. They depict the
home scree, app drawer, parameters view and “improve health” button window
respectively.

Figure 3.5 – Home page

8
 Figure 3.6 – App drawer

Figure 3.7 – Parameters view

9
 Figure 3.8 : Button window

3.4. Icon Design

As far as the Icon design goes, we stuck to the native icon design of the Flutter IDE that
we used to create the app. It was easier for us, as it did not involve any new designing
part but majorly the reason behind sticking to the same logo is that it also resembles
various yoga and exercise positions if we look at it from different angles. It is a clean and
appealing icon which pleases the eye and encourages a person to go ahead with the app
and try it out.

Fig 3.9. Flutter Icon

10
Flutter apps can include both code and assets (sometimes called resources). An asset is a
file that is bundled and deployed with the app, and is accessible at runtime. Common
types of assets include static data (for example, JSON files), configuration files, icons,
and images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP).

Flutter uses the pubspec.yaml file, located at the root of a project, to identify assets
required by an app.

Here is an example:
flutter:
assets:
- assets/my_icon.png
- assets/background.png

To include all assets under a directory, specify the directory name with the /
character at the end:
flutter:
assets:
- directory/
- directory/subdirectory/

The assets subsection of the flutter section specifies files that should be included with
the app. Each asset is identified by an explicit path (relative to the pubspec.yaml file)
where the asset file is located. The order in which the assets are declared does not
matter. The actual directory name used (assets in first example or others directory) does
not matter.
During a build, Flutter places assets into a special archive called the asset bundle, which
apps can read from at runtime.
Flutter uses asset variants when choosing resolution-appropriate images. In the future,
this mechanism might be extended to include variants for different locales or regions,
reading directions, and so on.

11
3.5. Resulting Design:

3.5.1 App Icon

An application icon was created for the Fitness App and is shown below. The app icon
allows the user to launch the application from their devices home screen.

Fig.3.10. App Icon

3.5.2 App Launch Screen

An app launch screen was created for the Fitness application and is shown below. The
launch screen is displayed to the user while the application loads in the background.

12
 Fig 3.11. Main Page 1

This is the home page where the user is greeted and also has access daily tip and
knowledge about personal care.
As we slide further down we can see the customizable options of “brushing”, “running”,
“pushups”, “skippings”.

Fig 3.12. Main Page 2

13
3.5.3 App Drawer

An In the app home page we have a button on top left corner which gives us access to
basic and relevant information to the user about “settings”, “My Products”, “My profile” ,
“About”.

Fig 3.13. App Drawer Interface

3.5.4 Physical Fitness Information

The user presses the button called “improve physical fitness “ where the user will get
information on how to improve the physical fitness.It also provides links to useful articles
an videos.

14
 Fig 3.14. Physical Fitness Content

3.5.5 Mental Fitness Information

The user presses the button called “improve mental fitness “ where the user will get
information on how to improve the mental fitness. It also provides links to useful articles
and videos.

15
 Fig 3.15. Mental Fitness Content

4. APPLICATION IMPLEMENTATION

The application was built using flutter. Flutter is Google’s UI toolkit for building
beautiful, natively compiled applications for mobile, web, and desktop from a single
codebase. The language used here is dart. Dart is a client-optimized programming
language for apps on multiple platforms. With these tools the application was
developed.The design aesthetics were intended to be clean and simple.

First comes the app drawer that consists of various important pages that are essential for
the overall functioning of app.

16
 Fig 4.1. App Drawer Interface

As noted there are various category like

My products - this is a section were in the in app purchases could be implemented and the
thing that are brought could be displayed here.

My profile - this would be consisting of personal information of the users like name,
membership duration, age, weight, height

Settings - this would consist of all the application settings like renewal of the account, any
app customization etc.

Support - this would have a scope wherein live chat, or contact details could be shared.

About - this section would be the place where we could shed some light on the app
usability and functionality for the sake of of users better understand-ability. It could also
show the application version details so that the user could be up-to-date with the updates.

Below is the code snippet that is required to implement this.

17
 Fig 4.2. Code Snippet of App Drawer

By adding a onLongPress: () command the above mentioned function could be called out
and implemented accordingly.

Next comes the animation involved in application . There is very interesting animation
involved. When the user scrolls down the page. The users would notice that the above
widgets would decrease in size and an extra section containing the current date would
appear. The below images would make it more clearer.

18
 Fig 4.3 and 4.4 Animation in Home Page Part-1 and Part-2

The application has a unique way of featuring the data. The first comes the + and --
widget . The idea is simple. As soon as you are done with your daily course the user
updates it and the JSON data is served accordingly to the app. So the categories like
brushing, push ups, skipping etc have these signs on them to communicate the data to the
user.

19
 Fig 4.5 and 4.6 Code Snippets of animations in home page

To represent the amount running done on that day, we chose to represent this data in
graph rather than just number. This would help the user to evaluate and grasp the
improvement done quickly.

Fig 4.7. Graph Interface

The code snippet to achieve this is mentioned below

20
 Fig 4.8 Code Snippet of graphs

Lastly we also added separate page for suggesting the user solution to improve there
health mentally and physically. By pressing the icon of “improve mental fitness” and
“improve physical fitness” we can navigate to the respective sections.

Fig 4.9 and Fig 4.10 Buttons

21
 Fig 4.11 and Fig 4.12 Content in Mental and Physical Page

In order to execute this we had to implement the following code mentioned below.

22
 Fig 4.13, 4.14, 4.15, 4.16 are the code Snippets for buttons and Content

5. HEURISTIC EVALUATION AND USER TESTING

5.1. Heuristic evaluation

Heuristic Evaluation (Nielsen & Molich method) was performed as part of the suite of
testing carried out on the Fitness Application. The purpose of this test is to identify
potential usability violations early and carry out any required redesigns and
improvements as early as possible.

23
5.1.1VISIBILITY OF SYSTEM STATUS

Users should always be informed of system operations with easy to understand and
highly visible status displayed on the screen within a reasonable amount of time.

Fig 5.1 Login Page

Using this log in option the user can enter the app by uniquely identifying themselves.

5.1.2MATCH BETWEEN SYSTEM AND THE REAL WORLD

We endeavored to mirror the language and concepts users would find in the real world
based on who their target users are. Presenting information in logical order and
piggybacking on user’s expectations derived from their real-world experiences will
reduce cognitive strain and make systems easier to use.

24
 Fig 5.2 Graph Interface

These Graphs motivates the user and also gives a bird-eye view about their activities, thus
giving good user experience.

5.1.3. USER CONTROL AND FREEDOM

We offer the user a digital space where backward steps are possible, including undoing
and redoing previous actions.

Fig 5.3 Customizing Buttons

We provide button to add and remove the quantity of each activities thus providing the
user with option of redoing and undoing undesirable changes.

25
5.1.4. CONSISTENCY AND STANDARDS

We have ensured that both the graphic elements and terminology are maintained across
similar platforms.

Our application has a constant user interface design thus giving a seamless and uniform
experience to the user.

5.1.5. ERROR PREVENTION

Whenever possible, design systems so that potential errors are kept to a minimum. Users
do not like being called upon to detect and remedy problems, which may on occasion be
beyond their level of expertise. Eliminating or flagging actions that may result in errors
are two possible means of achieving error prevention

Fig 5.4 Error Message On Flutter

5.1.6. RECOGNITION RATHER THAN RECALL

Minimize cognitive load by maintaining task-relevant information within the display

while users explore the interface. Human attention is limited and we are only capable of
maintaining around five items in our short-term memory at one time. Due to the
limitations of short-term memory, designers should ensure users can simply employ
recognition instead of recalling information across parts of the dialogue.

Bar graphs tracks the users activity rather than he/she remembering it, thus we remove the
responsibility of storing daily data from the user.

26
5.1.7. FLEXIBILITY AND EASE OF USE

With increased use comes the demand for less interactions that allow faster navigation.
This can be achieved by using abbreviations, function keys, hidden commands and macro
facilities. Users should be able to customize or tailor the interface to suit their needs so
that frequent actions can be achieved through more convenient means.

We provide easy to use slide page thus user can access all the important data in one page
and have user intuitive buttons .

Fig 5.5 and Fig 5.6 Buttons

5.1.8. AESTHETIC AND MINIMALIST DESIGN

We kept clutter to a minimum. All unnecessary information competes for the user's
limited attentional resources, which could inhibit user’s memory retrieval of relevant
information. Therefore, the display was reduced to only the necessary components for the
current tasks, whilst providing clearly visible and unambiguous means of navigating to
other content.

We provide standard and simple user interface design, while providing good spacing
between widgets in the screen thus optimizing the usage of screen.

27
5.1.9. HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM
ERRORS

Sometimes errors are unavoidable. In those situations, we have designed the system so
that users can easily see what has happened, and find a solution.

Fig 5.7 Login Error

5.1.10. HELP AND DOCUMENTATION

Ideally, we want users to navigate the system without having to resort to documentation.
However, depending on the type of solution, documentation may be necessary. When
users require help, ensure it is easily located, specific to the task at hand and worded in a
way that will guide them through the necessary steps towards a solution to the issue they
are facing.

We currently don’t have a documentation / FAQ page in our app.

28
5.2. Usability Tests:
These tests were given to test subject which were members of our team.

Use Case ID Use Case Name Primary Actor Scope Complexity Priority
1 Login Unregistered In Medium Medium
2 View Program Registered User In High High
Accesing App
3 Drawer (Un)Registered In Low Medium
Getting Physical
4 Fitness Tips Registered User In Low High
Getting Mental
5 Fitness Tips Registered User In Low High

Use case 1 -
Use Case Element Description
Use Case Number 1
Application Fitness App
Use Case Name Login
A registered user starts the application and is prompted to
Use Case Description login using their personal details.
Primary Actor Registered User
Precondition The application is started by a registered user.
Trigger A registered user starts the application
1. This use case starts when a registered user runs the
application and is presented with a login GUI page.
2. The user enters their username and password and is granted
Basic Flow access to the system.
Alternate Flows The user inputs an incorrect username or password and is
notified by the system.
The flow is terminated when the user is validated by the system
Termination and logged in to the application.
Post Condition The user is brought to the application Home page and the
system enters a wait state.

29
Use Case 2-
Use Case Element Description
Use Case Number 2
Application Fitness App
Use Case Name View
Use Case Description The user enters data regarding his physical activites
Primary Actor (Un)Registered User
Precondition The application is started by a registered user.
Trigger A registered user starts the application and logs in
The user must go to the respective activities and account
his/her activities by using the plus and minus buttons to
Basic Flow account the repetitions of the activities .
Alternate Flows The user inputs an incorrect data causing mismatch in diagnosis
The flow is terminated based on when on amount of data
Termination needed to be entered by user
The user is brought to the application Home page and the
Post Condition system enters a wait state.

Fig 5.8 Home Page in the emulator

30
Use Case 3-
Use Case Element Description
Use Case Number 3
Application Fitness App
Use Case Name Accessing App Drawer
The user gets to access the dashboard to get basic and relevant
Use Case Description data easily
Primary Actor (Un)Registered User
Precondition The application is started by a user.
A registered user using the application presses on a button
Trigger called at top left corner.
The user must press the button on top left corner then can
Basic Flow access the data like settings, about, view profile
Alternate Flows -None-
Termination The flow is terminated when user comes back to home page
Post Condition The user is brought to the application Home page .

Fig 5.9 App Drawer in the emulator

31
Use Case 4-
Use Case Element Description
Use Case Number 4
Application Fitness App
Use Case Name Getting Physical Fitness Tip
Use Case Description The user gets data on how to maintain his/her physical fitness
Primary Actor (Un)Registered User
Precondition The application is started by a registered user.
A registered user using the application presses on a button
Trigger called improve physical fitness
The user must press the button++ then can access the data
Basic Flow regarding physical fitness
Alternate Flows -None-
Termination The flow is terminated when user comes back to home page
Post Condition The user is brought to the application Home page .

Fig 5.10 Physical Fitness Content Page in emulator

32
Use Case 5-
Use Case Element Description
Use Case Number 5
Application Fitness App
Use Case Name Getting Mental Fitness Tip
Use Case Description The user gets data on how to maintain his/her Mental fitness
Primary Actor (Un)Registered User
Precondition The application is started by a registered user.
A registered user using the application presses on a button
Trigger called improve mental fitness
The user must press the button++ then can access the data
Basic Flow regarding Mental fitness
Alternate Flows -None-
Termination The flow is terminated when user comes back to home page
Post Condition The user is brought to the application Home page .

Fig 5.11 Mental Fitness Content Page in emulator

33
5.3. Tests Result
All test subjects completed their tasks successfully in a short period of time compared to
time allotted. This indicated the application has a high level of effectiveness. Testers
communicated very little effort was involved to complete their objectives which shows
high performance under efficiency. Users offered their opinion about their preferences for
navigation and some small missing features but overall the application performed well
and received mostly positive feedback.

6. Conclusion

6.1. Accomplishments
While it was a challenge to develop, our project team successfully created a
prototype wellness application for the Android platform capable of tracking, recording,
and displaying data relevant to a user’s sleep, activity, and mood habits. While the full
scope of the initial app design was not realized, all of the core data recording and
deducing user friendly plans were successful.

6.2. Future Work

While we feel that we successfully implemented the desired tracking
functionalities, there are still several elements that could be added to improve the
effectiveness of the app. We plan to have to have a better user feedback by using 3-D
personalized characters, such that we can improve user experience and engagement.
Another possible improvement is to include more dynamic tracking
algorithms, which will further reduce our dependency on the user. As this app takes in
data and evaluates in a jSON format which is the preferred format for
majority of IOT projects, so we would also like to link many sensors which can allow us
integrate hardware devices like smart-watches, a biometric
device that could track and record pulse or movement, would contribute tremendously
improve the quality of data while providing friction-less experiences.

34