Background Information

Prior website hosted at:

http://mdr2.heinz.cmu.edu/MDRProject/Questionnaire.jsp?SurveyID=124322&SurveyType=C
- A unique ID is passed to prevent a user from accessing multiple times
- A SurveyType (A, B or C) is passed to direct the user to a specific version (as explained
below)

Why Flash?
After interviewing users, the previous site seemed to lack credibility and genuine interest from the users
hurting my ability to study these sites. I would like a more professional looking and easy-to-use web
application to reduce this problem. This is where I require a flash programmer/designer’s skill. I have
already determined that I want the site drastically simplified (e.g. less text overall, less content per page,
more obvious instructions). As far as the specific content elements, I would have fairly strict control,
however more generally, I am looking for an experienced designer with an interest in helping me improve
thinks like layout, color, professionalism, attractiveness and ease of use so that these are not obstacles
reducing the effectiveness of my research experimental design.

Website Versions
In order to run experiments with this website, I will require 3 versions of the site. Different versions would
be composed of a different subset of the 6 features listed above and also some differences in wording on the
introductory pages. In the previous site, I directed users to the different versions through the “SurveyType”
url variable that is embedded in a link they click.

Version C: Personalized/Interactive
Version B: Personalized
Version A: Non-Personalized

The features of the primary website (Version C) are as follows:

1. An introduction to the website, it’s purpose and functionality (e.g. teach about diabetes risk)

2. A brief introduction to the importance of the health topic, pre-diabetes/diabetes

3. A web form that collects personal health information from the user (e.g. weight, height, etc.)

4. A page that contains a graph and basic statistics regarding the user’s predicted diabetes risk.

5. A page that allows the user to change his health info (e.g. lower weight using a slider) and see an
updated risk graph and statistics about his predicted risk.

6. A page that contains links allowing the user to explore more about diabetes risk factors.

*Version B will be the same as C except it will omit feature 5

*Version A will omit the features in pages 4,5. The text of the other pages will be generic, not personal.
Page 6 will be generic not tailored to the user’s data.

**In the existing JSP site, the content for the different versions is generated dynamically
based on the version type URL variable that is passed. Is this approach feasible in the
flash site, or would there need to be three standalone applications/urls?
I Provide
• All of the text of the instructions, health information content, error messages, etc.

• Ranges against which the values entered in the web form would need to be validated, else error.

• A basic mathematical equation that could be used to dynamically calculate the user’s risk value

• The existing database structure (if it is useful) The prior application was done with JSP and an
Access DB.

Other features
1. Time stamps in the DB that track how much time the user spent on each page

2. Logs of click activity in the DB that identify which links were clicked and when

3. Security preventing multiple use (probably by checking an ID that is passed on entering site

Modifiability
Since this is a research project that will inevitably be updated, I would like to maximize my ability to
modify basic features, specifically content wording. This would include things like updating the text of
instructions, the prediction equation, the validation values, etc.
 Website Mock-Up Content

In terms of layout and design, use my material below only as a rough guide. Your
additional comments or suggestions in terms of design are encouraged. For example,
you might have suggestions about radio button vs. drop down for a given question, etc.
Usability is a major priority.

For similar sites, guidance and inspiration in your design, refer to:

1. Blood pressure calculator:

http://www.americanheart.org/presenter.jhtml?identifier=3027275

2. My Health Advisor (diabetes calculator)

a. see attached application zip file: Start page is - \_start.html.
b. This is a prototype app being developed by American Diabetes
Association
Page 1 – Introduction to the site

Objectives:
• Interest the user, establish credibility (am thinking a logo of some sort, but not
sure how to do it. Any ideas?)
• Explain (succinctly) the site’s purpose

Version C basic mock-up:

Page 2 – Background on pre-diabetes and diabetes

Objectives:
• Maintain interest, try to indicate that this may be a health topic the user doesn’t
know about
• Generally educate about pre-diabetes and how it relates to diabetes (which is more
well known)

Version C basic mock-up:

Pages 3-6:

Web Form Collection of Personal Health Information

Below are the questions to be asked of the users. I’ve included comments on validation
rules and design suggestions for each in the right column of the pages. I’ve also grouped
the questions by page in this document so you know which questions should be grouped
together on the same page in the actual web application. I have not put a lot of time into
and don’t have any design expertise.

For now, all fields will be required. However, in some cases, as shown below, users may
have an explicit option of “I don’t know” or “I prefer not to answer” and default values
will be filled in those cases.

See following pages for content …

 Basic Information
What is your sex? Male
Female
Required field

What year were you born?

Which category best describes your Required field (1908 – 1988 are options)
race?
White Hispanic Black
Required field
Other

Do you currently smoke cigarettes?

Required field
Yes No

Family History of Diabetes

Have any of these family members

Required field
(mother, father, brother, or sister) had
type 1 or type 2 diabetes during their
life? Yes No

Height and Weight

Required field (4-7 ft and 0-12 inches
How tall are you? allowed)
Feet
Inches
Required field (validate b/w 90 and 400,
else error and can’t continue)
How much do you weigh?
Error msg:
Pounds
Please check the weight that you
entered. For this calculator to work
properly, your weight should be between
80 and 400 pounds. If your weight is not
in this range, this calculator is not for
you.
 Yes No I'm not sure
Blood Pressure
As best as you can remember, what is
your blood pressure?

Systolic blood pressure is the first or top

number of your blood pressure. Diastolic
blood pressure is the second or bottom
number of your blood pressure.
Required fields
Systolic (top) Diastolic (bottom)

/ Validate systolic b/w 90 and 180

*If you are unsure, choose from the
answers below.
I don’t know my exact blood pressure
numbers but:
Validate systolic b/w 60 and 120
Comment: rather than text boxes for
entry, it would be great to have colored
sliders like you see at:
http://www.americanheart.org/presenter.
jhtml?identifier=3027275#

I know my blood pressure is normal If don’t fill exact numbers then:

I know my blood pressure is a little If choose normal then fill in

above normal systolic/diastolic = 120/80*
I know my blood pressure is high
If choose a little above normal then fill
I am completely unsure about my in systolic/diastolic = 130/85*
blood pressure numbers.
If choose high then fill in
systolic/diastolic = 150/95*
*Most doctors consider blood pressures
above 180 diastolic or 120 systolic to be If choose I don’t know, pull average
dangerously high. If either of your blood value from the database based on age
pressure numbers is above those, this range.
tool is not for you and you should
consider talking to a physician instead. *Would be nice if all of these values can
be pulled from a database table for easy
Blood pressure medication: Has a modification on my end as needed.
doctor or other health professional ever
told you to take medication for high
blood pressure or hypertension (Please
answer "yes" if this has ever happened,
even if you do not currently take the
medication.)
 Cholesterol
As best as you can remember, what are
your cholesterol levels? If you don’t
know your exact numbers, you can
What is your total cholesterol?
mg/dL
What is your LDL (bad cholesterol)?
mg/dL
What is your HDL (good cholesterol)?
mg/dL
*If you are unsure, choose from the
answers below.
I don’t know my exact cholesterol
numbers, but:
I know my cholesterol is normal
I know my cholesterol levels could
be a little better
I know my cholesterol levels need
significant improvement
I am completely unsure about my
cholesterol levels.
Required fields
validate total b/w 65 and 350
Validate LDL b/w 50 and 220
validate HDL b/w 20 and 90
Again, rather than text boxes for entry, it
would be great to have colored sliders
like you see at as suggested for blood
pressure. This would eliminate the need
for validation of text box values.
If don’t fill exact numbers then:
If choose normal then fill*
Total cholesterol: 200
LDL: 100
HDL: 60
If choose … little better then fill*
Total cholesterol: 220
LDL: 145
HDL: 50
If choose … significant improvement
then fill*
Total cholesterol: 250
LDL: 175
HDL: 40
If choose I don’t know, pull average
value from the database based on age
range.
*Would be nice if all of these values can
be pulled from a database table for easy
modification on my end as needed.
Exercise
Please think back over the last 30 days Required field
and enter the number of that times have
you done vigorous physical activity for Validate greater than 0
10 minutes or longer?
Maybe a drop down box would be easier
Some examples are running, lap than a text box?
swimming, aerobics classes, fast
bicycling and can also include vigorous
walking or yard work that caused heavy
breathing.

(number of times vigorous activity

in last 30 days)