INTERFACE DESIGN PRINCIPLE
OVERALL STATEMENT
The Cancer Patient Information Application focuses primarily on serving the post-treatment,
non-institutionalized Stoma Cancer patients, with a secondary focus on attending to the
information needs of the patients’ caregivers and family members. Our users fall within a broad
range of demographics – difference age, digital literacy, physical abilities, etc. Yet considering
that the majority of stoma patients are around 50s1, as well as having low level of literacy2 and
digital literacy, a universally accessible, user-centered information portal design shall be built as
a standalone website designed based on the following principles:
KISS DESIGN PRINCIPLE
KISS is an acronym for "Keep it simple, stupid" as a design principle noted by the U.S. Navy in
1960. It states that most systems work best if they are kept simple rather than made
complicated; therefore, simplicity should be a key goal in design and unnecessary complexity
should be avoided.
In our design, the KISS principle would be practiced by several ways:
▪ Big font size
▪ Wide layout
▪ Few choices
▪ Short-scroll page
USE HUMAN FACES TO INCREASE USER ENGAGEMENT
“When we see a face, we are automatically triggered to feel something or to empathize with
that person. If we recognize content on a website — such as a problem, dilemma, habit or
whatever else — we feel connected and understood. ”—Sabina Idler3
1
Simon, C., Everitt, H., Van Dorp, F., & Burke, M. (2014). Oxford handbook of general practice. Oxford University
Press.
2
Cardenas, C., Schleimer, L. E., Olsen, M., Manzo, V., Guay, R., Kim, T., ... & Bhatt, A. S. (2016). Global Design
Strategy for Cancer Patient Education Materials: Haiti Pilot Case Study. Design Management Journal, 11(1), 15-31.
3
Idler, S. (2012, April 12). Not Just Pretty: Building Emotion Into Your Websites. Retrieved April 08, 2018, from
[Link]
Human Faces are powerful tools to increase the users’ engagement, in this case, we believe
that putting professionals’ photograph and interacting with users by a conversation mode to
“talk” with them can create trust, as well as authority, and help users to relate to our design.
DESIGN CHOICES
REGISTER PAGE
Considering the low digital literacy of majority of users, we separate the information needed in
the register page and group them into 4 parts. In this way, users would fill in their information
step by step followed by the instruction we provided through description, icons and the flow.
Some of the problems are expressed from the first-person perspective to help people
memorize and relate.
[1] Use the Conversation mode to give the target user a brief introduction about WHAT kind of
information we ask for and WHY we need them.
[2] Use mark icon to give the user instant feedback of the correctness of the information they
typed in, which can avoid them from repeated submitting because of errors.
[3] In the bottom of the page, the flow sequence can help the users to know which step they
are in and how far they will step into, which can avoid users from losing patience during the
registration process.
[4] [5] Considering that the built-in features like calendar, location and search bar may be
unfamiliar for our target users, we provide instructions to help them understand how they can
fill in their information with the help of those tools and release they typing workload.
[6] When users fill up their caregiver information, we provide a shortcut to let them invite their
caregiver into our system. Ideally, it will send a link through the email/phone number to the
caregiver and, under the admission, the caregiver can directly build up the connection with the
patient instead of registering for the system.
PATIENT PORTAL
Follow the KISS principles, our design for the Patient Portal differentiates itself from those
offered by traditional hospitals, which offer an enormous list of functionalities—most of which
of too technical, irrelevant, or simply confusing to a regular patient with moderate level of
information need and quite limited attention span.
[1] Instead of showing every function facilitated by the website, we decided to reduce the
amount of information in the Menu bar. To be more specific, we chose not to list those
functions that are already on the Patient Portal such as Self-Assessment and Information Look-
up. What is more, de chose to free the webpage from being too crowded, adopting a wide
layout without introducing side-menu.
[2] In deciding what key features to be placed on the patient portal, which is the first page the
patient will see when he or she logged in. We examined the users’ expected behaviors and
came down to a few evaluating criteria:
1. Given that the users will typically spend a limited amount of time on the website, we
speculate that the Patient Portal is likely to be the only page a regular patient will visit
on a regular basis. Thus, the functions should represent the core functions of the
website in an uncomplicated way.
2. The function should serve the users on a regular or daily basis. Thus, features a
patient uses less frequently, such as browsing medical-related articles, may not appear
in the portal page but instead find a place in a separate page.
We came to three main functions:
1. Daily Self-Assessment Tool
2. Instant Communication Tool
3. Quick Information Look-up
[3] The Information Look-up Section is designed based on the principle of Affordance—to
follow what users were conditioned to think about and to perform a certain task. In this case,
we borrowed the simple and elegant one-search-bar-for-all design adopted by Google and
other popular search engines, based on the assumption that even the less-competent users of
technology had grown accustomed to the simple search functions in past occasions.
[4] The Self-Assessment Function adopts a design that is unconventional in medical-related
applications: using conversational interface to guide the users through the daily health
condition assessment and to auto-generate customized report based on the patient’s feedback
and suggest possible help. The design will be illustrated more in later section.
SELF ASSESSMENT TOOL
Ideally, a patient will take a brief self-assessment quiz on a daily basis-- to keep an account of
his or her health conditions for future use of the health specialists and to identify anomalies in
the pattern and offer suggestions and help. The design of such function is critical: an
uncomplicated, easy-to-follow, intuitive interaction design will help the users remain on rack,
and vice versa. Thus, instead of asking the users to a long list of survey questions, we
introduce a conversational interface.
[1] The conversational style resembles what nurse practitioners and doctors do at every
occasion of meeting a patient: a series of question-asking and documenting—a process which
the patients are accustomed to. This, again, reinforces the idea of Affordance in designing an
interaction.
[2] The navigation in the dialog is quite simple: there are buttons for navigating back and forth;
doing so offers the patients place for occasional slips, such as an accidental missed question. In
implementation, the patient input will be auto-saved, meaning that navigating between
questions won’t interrupt the users’ flow of experience.
[3] Another goal of the design is to save the patients’ time. Of course, these functions demand
effort, therefore we intend to make it seem as easy and fun as possible. Organizing questions
into conversation will make the task appears less formidable since the users are exposed to one
question at a time rather than seeing them all at once.
[4] The assessment tool is integrated into the Patient Portal, the users’ first stop at the website.
This way, it also serves as a reminder. An alternative is to place it on a separate page that can
be accessed in the menu. However, this may cause the users to forget about it completely, thus
breaking the habit of tracking. Our design takes the concept of Proximity into consideration,
making the most important feature the most accessible to the user’s reach.
The 3 states of auto-generated report:
[5] At the end of the survey, the user will see a short report based on his or her inputs. We put
together three cases:
This auto-generated report makes reasonable suggestions to the users; what is more, it
provides direct link to guide users to the specific resources which may help them. In
implementation, the function will be actualized using built-in data analytics or machine learning
algorithms.
[6] On the other hand, we believe that providing feedback is essential to an effective design;
the users will know how they are doing: both as a patient (if he or she is under normal
condition) and as a system user (if he or she is effectively using the system).
COMMUNICATION PORTAL
[1] The navigation bar with highlighted tab helps the user keep track of where they are, and
easily locate other pages.
[2] The main content of the page is the individual patient's care team contacts. This way they
can easily, email or call the people they need to get in touch with. There is also a link next to
both sections which allows the patient to edit their care team, adding or subtracting members
as necessary for more easily facilitated direct communication.
[3] The peer forum is clearly labeled, but delegated to an additional page as not to crowd the
portal. Notice, each group is identified with a recognizable icon. This connects back to the
patient portal page which helps connect the icon with the group. The icons help patients more
easily find what they are looking for. Pictures and icons tend to be more engaging and
recognizable than simple text.
[4] This bubble gives a basic outline of the function of the page, as well as an important
reminder to call 911 in case of an emergency rather than using the communication portal. This
is still in the format of a conversational interaction. It makes it easy for patients to understand
what the page is used for.
[1] The navigation bar is again highlighted under the communication portal page. This is
because the forum is still part of the communication portal. Keeping the pages under the basic
navigation sections helps keep things simple.
[2] The main content of the page is the posts written and commented on by other patients. This
is a means of support for users going through similar experiences. The posts are kept
chronologically to make it easy for users to find posts. It is also clear how to enter comments
and participate in the forum.
[3] There is also a clear button marked with icons and text to get back to the main
communication portal page.