Table of Contents

1. Introduction

1.1 Issues & Solution ...........................................................................................................2

1.2 Design .........................................................................................................................10

1.3 Legal, Social, Ethical Issues ........................................................................................12

2. Theories
2.1 Design Principles .........................................................................................................13
2.2 Color, Font, Graphic Design Elements, Layout ..........................................................19
3. Analysis
3.1 Target Users ................................................................................................................24
3.2 Use Case ......................................................................................................................25
4. Implementation for one Page
4.1 Different layout design ................................................................................................26
5. Selection of the prototype
5.1 Evaluation ....................................................................................................................30
6. Implementation for other pages ..........................................................................................34
7. Evaluation for selected prototype
7.1 Explain Usefulness.......................................................................................................39
8. Conclusion ..........................................................................................................................40
1. Introduction

1.1 Issues and Solution

Unresponsive design issues

Screenshot- Laptop

When the website is viewed

on laptop and minimized to
a shorter size. It does not
have responsive design
because it does not shrink to
the particular size of the
browser.
Screenshot- Phone

Website have a responsive design when

the user view it on a phone.

Solution: The app need to have a responsive design. Responsive design is made by using
programming language such as HTML and CSS so that website is compatible with all devices.
The website should also follow users’ behaviors.
Font issue
Screenshot-Laptop

Font is bright red

color. The
background is
dark color, which
makes the user
difficult to read.

Screenshot-Phone

When the website is viewed on the

phone, text are black and background
is white. This makes it simple for the
users.

Solution: Use black color for text. Even though other dark colors for text are available, black is
the simplest color for clear and good user interface.
Long homepage
Screenshot- Laptop

It have a long homepage, and user

have to scroll a long way to the
bottom. Thus, the website is not
user-friendly.
Screenshot-Phone

Website has a long homepage. User have

to scroll a long way so it is boring and
irritating. The user will not want to view
this website again.

Solution: Unnecessary desktop elements should not be displayed on the phone screen. When
viewing with laptop, contents must be moved to different page. If user want to know more about
small detail on the homepage, they can find a menu bar.
Color Issue
Screenshot- Laptop

Multi-color makes the

website messy. Bright
colors are used, so the
website have a bad
interface design.

Screenshot-Phone

When viewed on phone, the

background is white. Text is simple
black. Therefore, it is a good user
interface design. There is no color
issue.

Solution: The website should use simple color instead of colorful background. Rainbow colors
and light colors should be prevented.
Bad Navigation
Screenshot-Laptop

When a user hover over

More tab, many list fall
out. When user try to
scroll down, the list hide
back. The font size is also
small so people with bad
eyesight have trouble
reading.
Screenshot-Phone

There is no ‘More’ tab when

the website is viewed on the
phone.

Solution: In the app, not many list will be added to ‘More’ tab. Information will be divided and
input in different tabs.

(Mark, n.d.)
1.2 Design
Responsive design issues
Image quality

Images can become blur.

App developers have to
think about this to prevent
low quality images.

(Grace, 2013)

Picture size shrinks

Picture size will shrink with

the height of the page.
When height gets narrower,
picture size also get
smaller.

(Milberg, 2016)
Adaptive design issues
Software developers have to draw many prototypes for every devices. Therefore,
company have to pay a lot to software developers. Next, developing the app is complex. It took
long time to develop the app. It is also difficult to negotiate with developers because they do not
want to put a lot of efforts making the app.

The size do not fit for every devices. User interface design do not show well on
different devices because different layout of adaptive design is not good.

(SOEGAARD, 2018)

Advantages of responsive and adaptive design

Responsive design is user-friendly and cheap. Adaptive design is compatible on many
devices. It does not need a lot of time for coding like responsive design. Testing is also easier.
However, when comparing the responsive and adaptive design, responsive design is better,
because adaptive design do not respond to different devices. It just calculate the screen size and
give appropriate layout. Thus, after comparing, the activity monitoring system is decided to have
responsive design.

(Berry, 2017)

Design for Disability

For blind people, voice assistant will be available so that they can hear voice and
understand the app. Text are changed to speech by screen reader and the pitch can be changed.
Since the user cannot see the buttons available on the app, they must ask the features they want
by speaking. The app will have to provide voice recording so that it can direct user to the feature.
For people with poor eyesight, the contents of the app can be zoom in and out. Additionally, deaf
users cannot hear the notification alarm of the app. Therefore, when notification pop up, flash
light will appear so that user can know quickly. Subtitles will be available if there are videos of
workout.

(Desta, 2014)
1.3 Legal, social, and ethical issues
Legal

The company can get legal issues when the design of the app gets wrong. Some users rely
on the information provided on the app. When the medical information gets wrong, trouble can
happen.

Social
Healthcare providers use the app and give it to the patients so that they can monitor their
health. This is a good way of instructing the patients but this can also cause social issue. When
the patient (user) start to rely on the app, they believe they do not need help from health care
providers. Thus, when app have error, the user do not visit the healthcare provider and continue
using it. Thus, there is less contact between patient and healthcare provider when it is necessary.

Ethical
Admin have access to every users’ personal information when the user register to use the
app. Thus, if admin does not understand the Data Protection Act, trouble can occur. When the
admin use the user’s information for wrong purpose, company can also be affected by the app.
The company will get a bad reputation for having an employee with no knowledge. Users will
stop using the app because they’re worried about their privacy. Thus, the app can affect the
business completely. Therefore, in order to prevent it, only necessary information will be
collected during the register.

Additionally, the software developers mustn’t create same design with one of the apps.
They shouldn’t copy codes from other groups when creating the app. They should follow rules
and guidelines. Furthermore, users’ information should be kept privately without any harm.
2. Theories
2.1 Design Principles
-W3C Guidelines
Don’t rely on color alone.

Color blind people

cannot see the boxes
with color. Therefore,
the app must not
completely rely on
colors. It must also be
efficient for disabled
users.
(Babich, 2016)

- Norman Design Principles

Feedback

The website gives the user

feedback after signing up.
The user will have to login
to email to confirm the
signup.

(McNeil, 2014)
- Nielsen Design Principle
Visiblity of system status

Users should be able to

know what is happening
with the app. They should
be given feedback with
this way.
Match between system and the real world

The app will use

words that the
target users can
understand.

Help and Documentation

Users are provided help by

documentation. This makes it
easier for users to know when
they have problems or don’t know
how to use the app.

(Duggirala, 2016)
Principle: Android guidelines
Accessibility for fat fingers

Apps need to be finger friendly

because people have different finger
thickness. So, buttons need to be big
enough so that users can touch
easily for good user interface.

Contrast color
Colors of icons should be clearly visible
and different from the background.
Icons should be dark color over light
background. Otherwise, it makes it
difficult for reader to use the system.

(Team, 2017) (Guidelines, n.d.) (growrevenue, 2018)

Immediate results

The app should have a fast performance so that users become satisfied using it. Users do
not like having to wait. They won’t like it if the app is heavy and slow.
Principle: IOS guidelines
Aesthtic Integrity

Request button should allow

the user to request for a car.
The app’s appearance should
allow the function.

(Hsiung, 2016)

Direct Manipulation

User’s action must affect the

screen’s function. When the user
press the button, the action applied
must be shown on the screen.
User Control

Users can control what’s

happening in the app.
The messages appear so
that users can decide
what to do at the app’s
actions.

Consistency

The app will use same

operation as other apps.
Almost all apps have menu
available on the left side.

(Developer, n.d.)
2.2 Color, Font, Graphic Design Elements, Layout
Color Theory
To describe colors, first of all, there are three types of color wheels: primary color,
secondary color and tertiary color. In fact, the primary colors come from red, yellow, and blue
(RYB). These colors become primary colors because other colors can be formed by mixing them.
Secondary colors are made when mixing the primary colors. Tertiary colors are formed by
mixing primary and secondary colors. Furthermore, all of these colors are divided into two
groups in general: warm and cool colors.

Key: P-Primary, S-Secondary, T-Tertiary

(w3schools, n.d.)
Example of website which have color theory

Orange is bright color. It is a secondary
color mixed by blending red and yellow.
Buttons are orange
Background color color so that users
can look at the button easily. Bright
color attract user’s attention easily.
Dark blue is cool color. This calms
the user who are viewing the website.
The text can be easy to read. If font is
white and background is bright color,
user will not be able to read.

The app is a personal health monitoring system. Therefore, the color have to be think
carefully so that the app is suitable for the users. Since the app is about health, white color can be
used because it is clear for eyes. It gives cool feeling and purity. On top of the white website,
green photos, buttons, and fonts can be added so that user feel the nature while viewing the
website.

(MOTOCMS, no date)
Font terminology
Font is also critical when making the app. Target users include elder people since the
target user can be of all ages. Some older people have poor eyesight so the font size must be big.
The best font type can be sans-serif. It is written at the Medium website that the sans-serif font is
the best for medical app. Many users like the font sans serif because it is simple and readable.
Moreover, sans-serif displays well on many devices. Example of sans-serif are Arial, and Times
New Roman. Font color is also important because bright colors cannot be read by both poor
eyesight users and color blind users. For the headings, and sub-headings, green colors can be
used so that white and green are the only colors used on the website.

(Chebanova, n.d.)

Graphic Design Elements

The icons need to be familiar with the user for good interface design. The icons should
clearly represent the function so that users can know what to do.

These icons allows the users to share to social network.

(Ming, 2014)
The back and forth arrow will be used in the app so that users can view the pictures.

This type of sharing buttons is big so the users who The sharing buttons are round and
have poor eyesight can find the buttons easily. small. Therefore, it is difficult to
find the buttons on the website.

Button color
In addition, it is stated in onextrapixel website that many designers figured out that
users click the buttons more when the buttons are green color. Thus, in order to make more users
use the app, buttons can also be green color. It is also stated in Medium website that an adult’s
average fingertip width is 10 mm. Moreover, medical app is likely to be used by elder people so
the buttons have to be big so that the app is good to use. To be precise, for Android, elements
must be 7mm. For Apple, buttons need to be more than 11 mm.
Example of health-related website

Button is also green color to adapt

the website design. If the button
color is replaced with bright color,
website will look bad.
3. Analysis
3.1 Target Users
Both genders can use the app since it is an app for monitoring health. Disabled users should
also be able to use the app. Features are included in the app so that disabled users can also use
them. It is stated in Hindawi website that people in the range of 60 years and above have
cardiovascular diseases. Thus, the app’s target will be for older people. Furthermore, it is stated
in mhealth-quality article that target users can also be health professionals. The professionals can
use the app to instruct the patients.

Global/Local
Personal activity monitoring app can be used globally. Since its objective is to monitor
user’s health, everyone can use it effectively. English is a universal language. Therefore, in order
to allow everyone to use the app, English language will be input.

The app have many good features. For example, allowing the user to do physical
exercises is a good feature. Duration of days that a user need to exercise in a week and the sports
that a user could do are also displayed. Calories that can be burned by doing a certain activity
will also be shown so that user can know the calories burned. Weight can also be measured to
measure progress. Heartbeat rate after exercise is also displayed. In addition, notification feature
is also included in the app. This feature can remind user to do workouts if they forget. Moreover,
users can create their own personal goals so that they can exercise with a workout plan.

However, in order to use the app, the users need to log in with email address. Otherwise,
they won’t be able to use the app on different devices. As stated in STONE TEMPLE website,
percentage of people who are using mobile is greater than percentage of people who are using
desktop these days. Websites that are viewed from mobile has their percentage increase from
57% to 63%. Therefore, the app will be created based on mobile platform, but it will have a
responsive design. Precisely, the app’s design will be based on Android. Even though iOS
phones are available, features of the app will be most compatible with Android. As stated in
AndroidPub website, the market is fill with 87% Android and 12% iOS. Therefore, Android is
the most used phone type in the market. Therefore, app will work well on Android platform.
3.2 Use Case

Health Monitoring System

Measure hearbeat

Measure blood
pressure

Do Workout

Choose food

Admin
User

Take medicines

Update sensor

Maintain users'
account and security
4. Implementation for one page
4.1 Different layout design
1st set
2nd set
5. Selection of the prototype
5.1 Evaluation
Criteria 1st set (Grade) 2nd set (Grade) Reason
Visibility of system ABC ABC Users will get notification
alerts so they will be
status
informed.
Match between ABC ABC The functions in the sets can
be linked with real world.
system and the real
world
Help and ABC ABC Help icon is provided in the
first set.
Documentation
Summarize A B

The sets are compared and the better layout design is selected based on Nielsen’s Usability
Heuristic. After comparing, 1st set is chosen because it have better grade than 2nd set.
Homepage
Desktop
Android
iOS
6. Implementation for other pages
Measure Weight
Measure Heart Beat
Blood Pressure
Blood Pressure Report
Heart Beat Report
7. Evaluation for selected prototype
7.1 Explain Usefulness
There are several evaluation techniques for prototype. For example, there are Heuristic,
Cognitive Walkthrough, and GOMS techniques. Heuristic evaluation is a guideline for user
interface. It is managed by HCI experts and is used for quick feedback. It is fast, cheap and
useful for finding usability problems in the user interface. It also provides feedback to developers
about compatible interface for user needs. One of the advantage of using Heuristic evaluation is
because only one expert is required. Thus, the company can reduce time spending on evaluation
so it becomes less complex.

Cognitive Walkthrough is a testing to find the usability of prototype. It needs

several evaluators to look at the prototype and stages of development. Therefore, it is useful for
searching interface problems at early stage. Then, they’ll think of the key questions and ask
themselves about the new users’ experiences during the task. Cognitive Walkthrough tries to
figure out whether these new users can finish tasks easily.

GOMS (Goals, Operators, Methods, and Selection) is used to check the human
interactions’ efficiency. It checks by finding unnecessary functions on the prototype and deleting
them. It is useful because an observer can quickly calculate the human interaction.

Among them, Cognitive Walkthrough will be used to evaluate the prototype because it is
fast and cheap. One of the advantage of using is that before design phase, evaluators can change
the development. In this way, the evaluator can prevent money wasted from developing a wrong
system.

Explain step by step process

Login
1. Open browser.
2. Search website by typing URL.
3. When website appears, click Login button.
4. Enter Username, and Password.
5. Click Login button.
Questions and answers (at least 3 users: appendix)
Criteria Yes No
Will the customer realistically 
try to do the actions?
Is the control for the action 
visible?
Is feedback appropriate? 

(Wikipedia, 2018) (Association, 2012) (wikipedia, 2017) (Foundation, 2017)

8. Conclusion

Interface design of personal monitoring system has used design principles and is suitable
for all ages. When questions are asked to users about the system’s usefulness, positive answers
are given. Guidelines are considered in the design, and functions for disability are provided in
the setting. Responsive design is also input in the interface. Help button is also available in both
website and phone. However, it took time to draw prototypes, therefore there wasn’t enough time
to draw many prototypes. In future, more prototypes such as workout page, and medication page
can be developed.
References
Association, U. E. P., 2012. GOMS. [Online]
Available at: https://www.usabilitybok.org/goms

Babich, N., 2016. Accessible Interface Design. [Online]

Available at: https://uxplanet.org/accessible-interface-design-3c59ee3ec730
[Accessed 1 10 2018].

Berry, 2017. RWD Is Not AWD, What Is the Difference Between Responsive and Adaptive
Design?. [Online]
Available at: https://www.mockplus.com/blog/post/difference-between-responsive-and-adaptive
[Accessed 5 11 2018].

Chebanova, A., n.d. “How to Design a Great Medical App”. [Online]

Available at: https://steelkiwi.com/blog/how-to-design-medical-websites-and-apps/
[Accessed 31 9 2018].

Desta, Y., 2014. 9 Simple Tips for Making Your Website Disability-Friendly. [Online]
Available at: https://mashable.com/2014/04/22/website-disability-friendly/#9zZ1bQvL6Pqy
[Accessed 27 9 2018].

Developer, n.d. iOS Design Themes. [Online]

Available at: https://developer.apple.com/design/human-interface-
guidelines/ios/overview/themes/
[Accessed 29 9 2018].

Duggirala, S., 2016. 10 Usability Heuristics with Examples. [Online]

Available at: https://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c
[Accessed 1 10 2018].

Duggirala, S., 2016. 10 Usability Heuristics with Examples. [Online]

Available at: https://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c
[Accessed 1 10 2018].
Duggirala, S., 2016. 10 Usability Heuristics with Examples. [Online]
Available at: https://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c
[Accessed 28 9 2018].

Foundation, I. D., 2017. How to Conduct a Cognitive Walkthrough. [Online]

Available at: https://www.interaction-design.org/literature/article/how-to-conduct-a-cognitive-
walkthrough

Grace, J., 2013. How to Fix Blurry Images and Icons on Responsive WordPress Websites.
[Online]
Available at: https://managewp.com/blog/responsive-images
[Accessed 26 9 2018].

growrevenue, 2018. 7 Basic Rules for Button Design. [Online]

Available at: https://growrevenue.io/2018/button-design-rules/
[Accessed 28 9 2018].

Guidelines, D., n.d. Color Contrast. [Online]

Available at: https://designguidelines.withgoogle.com/android-auto/guidelines/color-
contrast.html
[Accessed 28 9 2018].

Hsiung, F., 2016. iOS Human Interface Guidelines — a bible of designing friendly iOS apps.
[Online]
Available at: https://medium.com/@imbearfly/ios-human-interface-guidelines-a-bible-of-
designing-friendly-ios-apps-71ec7d903876
[Accessed 29 9 2018].

Mark, G. B. y., n.d. Waking People up With TRUTH. [Online]

Available at: https://nwokillers.weebly.com/
[Accessed 24 9 2018].

McNeil, P., 2014. Taking Donald Norman’s Design Principles to Web Design. [Online]
Available at: http://www.howdesign.com/web-design-resources-technology/donald-normans-
design-principles-modern-web-design/
[Accessed 28 9 2018].

Milberg, A., 2016. Common Responsive Design Layout Issues (and how to avoid them). [Online]
Available at: https://www.thirdandgrove.com/common-responsive-design-layout-issues-and-
how-avoid-them/
[Accessed 26 9 2018].

Ming, L. M., 2014. Why Isn’t There A Standard Share Icon?. [Online]
Available at: https://www.fastcompany.com/3031872/why-isnt-there-a-standard-share-button
[Accessed 31 9 2018].

MOTOCMS, no date. Designing Medical Websites: Colors that Work, Green as a

Complementary Shade. [Online]
Available at: https://www.motocms.com/blog/en/medical-websites-colors/
[Accessed 31 9 2018].

SOEGAARD, M., 2018. Adaptive vs. Responsive Design. [Online]

Available at: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design
[Accessed 27 9 2018].

Team, i., 2017. Guidelines for Android application design. [Online]

Available at: http://www.ifourtechnolab.com/blog/guidelines-for-android-application-design
[Accessed 28 9 2018].

w3schools, n.d. What is Color Theory?. [Online]

Available at: https://www.w3schools.com/colors/colors_theory.asp
[Accessed 31 9 2018].

wikipedia, 2017. GOMS. [Online]

Available at: https://en.wikipedia.org/wiki/GOMS#cite_note-comparison-2

Wikipedia, 2018. Heuristic evaluation. [Online]

Available at: https://en.wikipedia.org/wiki/Heuristic_evaluation