top of page
XELSOURCE
PATIENT PORTAL
An overview of the user interface / user experience tasks and deliverables for the XELSOURCE Patient Portal I worked on at
Thomas J. Paul, Inc.
Click the Desktop Computer
to view the prototype
Client: Cardinal Health
Project Type: UI / UX Design
Roles: User Research,
UI / UX Design, Interaction Design,
Wireframing / Prototyping, Data Visualization,
Dashboard Design, SAS Pharmaceutical Patient Portal
SCOPE
Cardinal Health, Inc. is an American multinational health care services company, and the 14th highest revenue generating company in the United States. Its headquarters are based in Dublin, Ohio and Dublin, Ireland. XELSOURCE is the information center for XELJANZ XR. XELJANZ/XELJANZ XR is a prescription medicine called a Janus kinase (JAK) inhibitor.
XELJANZ/XELJANZ XR is used to treat adults with moderately to severely active rheumatoid arthritis
in which methotrexate did not work well.
PROBLEM
Cardinal Health isn't sure about what Physician's needs are for a XELJANZ XR Patient Portal. Cardinal Health needs an updated HCP to make Physicians lives easier so they can spend more time with patients. They are also unsure of what kind of data visualization that Physicians will require and the user flow for patient information to be filled out by the Physician.
SOLUTION
Follow the Lean UX Agile Methodology. Starting off by gathering qualitative and quantitative research, as well as doing competitive analysis. This process will include sitting with primary care physicians and asking them questions such as what their wants, needs, goals, pain points, and motivations are, then creating user personas from the information. These Personas will influence user flows / product flow, human empathy mapping, wireframes, and prototypes. I will also be sitting with a Pfizer representative to understand what their budget and time constraints are like for this project. I need to match the clients MVP goals, with the physicians goals.
RESEARCH
RESEARCH PLAN
THE WHAT: These are some of the questions that needed to be figured out.
-
What are Primary Care Physician's goals, needs, wants, and motivations for this application?
-
What are my clients goals, needs, wants, and motivations for this application?
-
What kinds of User Interfaces and User Experiences are Primary Care Physicians used to?
-
What are the technical skill levels of Primary Care Physicians?
-
How are Primary Care Physicians currently going about handling patient prescription information as well as information filing?
-
What do Primary Care Physicians currently like, and dislike, about the current process of handling patient prescription information?
-
How can I find patterns between what the Client wants, and what the Physician's want?
-
What kind of look and feel do I need to go for when creating this Health Care Portal to satisfy my client and Primary Care Physicians?
-
What do other HCP's look like in the competitive landscape?
-
How can I tell the story of this portal to create the perfect user journey?
THE WHO: To find these answers, I talked to an account coordinator for Cardinal Health at Thomas J. Paul, Inc. so that I can understand the clients requirements and expectations that Cardinal Health has for the XELJANZ XR Portal. I also requested a sit down interview with Primary Care Physicians who would be the usability subjects of the platform.
KEY FINDINGS
RESEARCH CONDUCTED: User Surveys for User Personas
AGE RANGE: 37 - 45
-
Both Physicians seem to hate switching between platforms to view patients data and need
an easy to use HCP that can be accessed at anytime, from anywhere. -
Both Physicians seem to lack a platform where it is easy to add other Physicians to a platform
so that there is easy communication between Physicians about patient information. -
Both Physicians seem to lack real time data and an ability to efficiently view patient data.
-
Both Physicians find that filling out paperwork is an antiquated tactic and need to
have digital records. -
Both Physicians want have the ability to see if patients are eligible for a copay program
as well as electronically sign their prescriptions before sending them off to a pharmacy. -
Both Physicians seems to have a hard time running a benefits investigation on their patients.
-
Both Physicians seem to like websites and applications that are simple to use, with a lot of clean white space for easy navigation.
Now that I have uncovered the pain points, needs, goals, and motivations of my users that match
the pain points, needs, goals, and motivations of my client, its time to start creating journey maps, ux strategy blueprints, user flows, sketches, wireframes, and eventually creating a working prototype that will
be ready for development handoff.
UX STRATEGY BLUEPRINT
Design + Interaction
USER JOURNEY
This is the user journey that I have mapped out for the Physician usability subjects,
John and Mary, before I started sketching, wireframing, and prototyping.
SKETCHING + WIREFRAMES
After understanding the user journey that my persona arch types need to go
through in the XELSOURCE Health Care Portal, it is time to start sketching and wireframing.
In this first sketch, I tried to incorporate all of the text that the copywriters provided to explain the benefits and policies of the portal and understand where I was trying to place the elements.
I learned that this portal is going to be very copy heavy, so I'm going to have to define a clear information hierarchy and put emphasis on the most important type that needs to stand out most to the Physician.
What I learned
Sketching
In this wireframe, the copywrite text became more legible. I created an information hierarchy that is easier to understand for the user compared to the sketch that I had drawn previously. This helps me understand elements on the page.
I learned that with the branding styleguide and visual elements that Xelsource uses, that I can create very interesting containers and styles to house the copy and logo placement.
What I learned
Wireframe
1st round branding implementation
In this round of branding implementation, I tried experimenting with iconography, and visual elements that XELSOURCE uses, and adding a little bit of background photography to the portal to give it depth.
What I learned
I learned that Pharmaceutical Health Care Portal design is much more simple than this, I needed more white space, less red, and needed to tweak how the containers are housing important information
2nd round branding implementation
In this round of branding implementation, I tried experimenting with a new container shape and more muted colors. I tried to frame what is most important within the container to have the users eye move from left to right .
What I learned
I learned that this shape isn't very ideal since the shape is not symmetrical and evenly balanced. This shape would make housing information consistently difficult and awkward.
VISUAL DESIGN ELEMENTS
COLOR PALETTE
TYPOGRAPHY
Klavika Basic Bold
ABCDEFGHIJKLMNOPQRSTUVWXYX
abcduefhijklmnopqrstuvwxyz
(for buttons & subtitles)
Klavika Basic Medium
ABCDEFGHIJKLMNOPQRSTUVWXYX
abcduefhijklmnopqrstuvwxyz
(for titles, subtitles, & body copy)
Klavika Basic Regular
ABCDEFGHIJKLMNOPQRSTUVWXYX
abcduefhijklmnopqrstuvwxyz
(for body copy)
FS Albert Regular
ABCDEFGHIJKLMNOPQRSTUVWXYX
abcduefhijklmnopqrstuvwxyz
(for body copy)
UI ELEMENTS & ICONOGRAPHY
FINAL DESIGNS
Final Portal Design
This is the last and final design of the portal. This portal design has a nice symmetrical container that separates the header, signup information, and footer into three easily digestible sections. The design also puts emphasis on the information hierarchy through size, color, contrast, modular containment, and proximity.
What I learned
In the time I spent on this project, I learned a lot about the wants, needs, goals, pain points, and motivations of physicians. I learned what it was like to work in an MVP environment. I learned about the meticulousness of pharmaceutical copywrite with iteration after iteration. I also learned that most pharmaceutical company applications have a very simple, easy to navigate, clean modern feel, No bells and whistles are needed. Overall, I enjoyed working on this application very much and I learned a lot in the creation process.
View the entire XELSOURCE Health Care Prototype,or visit the website
where the portal is hosted.
bottom of page