Becky Wright
Health
Portal
Messaging
System
Health Portal Messaging System (A Speculative Redesign)
After witnessing my dad's frustration with his health portal messaging system and my own personal frustrations, I knew the user experience didn't have to be that redundant and overly complicated. I decided to take a closer look at my own health portal to devlope a speculative redesign. Here is my process:
Step One: User Flow
The first step in my process was to create a user flow so I could understand the messaging system and how a user would move through the site.
I began by creating a rough sketch on paper. Doing so gave me a very general idea of what the user flow looked like and it enabled me to discover where some of the key issues were.
Click Image to View
To help create a more detailed picture of the user flow, I expanded on that sketch by creating a board in Miro. I began to see the complexities of the system in more detail and was able to break things down even further by differentiating between actions and objects. I discovered some pretty major breakdowns in the user flow, most notably being a loop that the user could get stuck in with no easy way back to the message center and/or homepage.
Click Image to View on Miro
Step Two: Heuristics Analysis
Now that I had a sense of what the big picture looked like, I was ready to break it down even further by focusing on each individual page using usability heuristics to identify specific trouble areas. I wanted to create a summary to highlight and prioritize key problem areas and ultimately this was done in three phases:
Click Image to View
For the first phase, I created screen shots of each page in the messaging system. I then evaluated each page looking to see if it checked off each heuristic's check box. I noted if it did so positively and if it did not, then I noted what the issue was and why it wasn't meeting that heuristic.
Click Image to View
Click Image to View
In the second phase, I gathered all of my findings and grouped them into two categories (positives and negatives). I then went through the negative findings and prioritized them by color coding them (Major, Important, Minor) relatively speaking. Doing so helped me to discover that some of the problems were thematic throughout the site and some were specific to individual pages/actions. This phase helped me to group key issues into heuristics categories and then site specific issues.
Click Image to View
My goal in the third phase was to create an easy to read and concise heuristics analysis that I could put in hands of stakeholders. I wanted it to be easy to read and brief as possible while still shedding light on key problem areas.
Click Image to View
Step Three: Developing Hypotheses & Test Questions
Next it was time to create my hypotheses keeping the heuristics analysis overview in mind and from those hypotheses develop the questions for user testing.
There were so many potential hypotheses I could develop for user testing, but I wanted to keep the test to roughly 15 minutes. So I developed 6 hypotheses focusing on the first three pages of the messaging system flow. From that I derived 19 questions for my user testing sessions. I tried to avoid leading and biased based questions so the questions wouldn't be skewed one way or the other. I used screenshots for testing and where necessary I doctored the pages for anonymity and privacy reasons.
Click Image to View
Click Image to View
Step Four: Usability Testing
I chose 5 participants varying from ages 17 to 79. Participants were both males and females and all were Caucasian. Three sessions were conducted in person on a laptop, 2 were done at a dining room table and one was done in a home office. Both of these environments were similar to where users might be accessing their patient portals at home. I recorded the sessions so I didn't have to worry about taking notes and therefore, could more easily engage with testers.
Since I think virtual meetings in the work place are here to stay, Two of the tests were conducted remotely via zoom because I think working virtually is here to stay. I emailed the screenshots ahead of time and once we were connected via zoom I had the participant share the screen with me. I told them I was going to record the sessions and told them to move the mouse when applicable so I could see their thought process on where they might click in certain situations. Both participants connected and viewed the screenshots on a MacBook Pro.
Step Five: Findings Summarization
Once I completed all of the testing, I sat down and watched all of the recordings taking detailed notes from each session.
I assigned a color code to each user so as I compiled information it was easy to differentiate between users and their individual findings in case there was any relevance. I then began to look for patterns and similarities in responses to see where key concerns might be and to see what might be working well. To the right is just a small sample to show an example of what this looked like.
Click Image to View
Click Image to View
I then summarized the results of each question. This drew a big picture for me and I was able to see where stumbling blocks and frustrations lied within the user experience and what worked well. I then wrote a summary report that could be shared with key stakeholders. In my summarization I also included direct quotes from users because quite often qualitative data is just as important as quantitative. I also included the screen shots used during testing.
Click Images to View
Step Six: Wireframes
With all of the data collected and summarized, it was time to build wireframes. I wanted to create two versions. One version being fixes on a low budget and the second being a complete redesign.
Low Budget Fixes High Fidelity Wireframes
Since the first version wasn't starting from scratch, I didn't need to re-invent the wheel for wireframes. I started with some simple sketches on paper and quickly went to Figma and made changes to my existing designs.
​
On the homepage, some of the solutions were as simple as removing excess (distracting and unnecessary design that cluttered the space, separating content and labeling it clearly, and adding tool tips on mouse over.
Click Image to View
On the message center page, simply changing the mailbox terminology clarified what the mailboxes were and adding darker shading emphasized which mailbox you were currently in.
Click Image to View
On the new message question slide up, simply changing the icon to a more familiar icon help to clarify that you can minimize the window. Adding a tool tip on mouse over also helps to be clear what the icon does.
Click Image to View
Complete Redesign Low Fidelity Wireframes
Click Image to View
The homepage being a focal point for notifications, I needed to create a design that was prepared to handle an empty state should a user log in and there are no notifications waiting for them.
When creating the low fidelity wireframes for a complete redesign, my goal for the homepage was to simplify and take away the competing menus. I wanted simple tabs across the top so users could easily understand where they are in the site, where to find what they are looking for, and how to get back to the homepage. My intent was to clearly present the important information that needed the user's attention and to clearly categorize the information that was being presented.
Click Image to View
When it came to the message center it was important that it was clear to users that this space was similar to an email inbox and not a chat session so users would understand that they may not receive an immediate response. Additionally, I wanted the mailboxes to accurately reflect their use.
Click Image to View
One potential issue I wanted to address was a warning message to call your provider's office for urgent needs and 911 for emergencies. In the original design it was addressed only with a simple line of text above the box where you create your message. Here, it is addressed before they can even begin the wizard flow to create a new message and they have to consciously select whether or not to continue.
Click Image to View
In the original design, sending a message felt like a chat window which could set up the expectation for a quick response. I changed the wizard design to resemble that of an email interface with a pop-up window rather than a slide up from the bottom window. There was also a lot of confusion around the minimize icon during testing. I changed the icon to a more familiar minimize icon.
Click an Image to View
Complete Redesign High Fidelity Wireframes
My goal with the homepage was to simplify the layout so it's less confusing and make sure important notifications are easily noticed and that information is easily accessible. I wanted patients to have the comfort of seeing their providers faces as soon as they logged in.
Click Image to View
As I already mentioned, I wanted to prepare a design for an empty state. Each empty state notification is interchangeable with their active notification counterpart.
Click Image to View
Most of the changes to the message center were focused on labeling the mailboxes to better describe what their purposes are. For example, changing "conversations" to "inbox" because straight forward language is clearer than trying to be clever with terminology and changing "trash" to "archived messages" because message are never permanently deleted, but rather archived if you need to refer back to them.
Click Image to View
As addressed above in the low fidelity wireframes, this alert message is just to clarify that the user's question doesn't require an immediate response and/or isn't an emergency.
Click Image to View
I wanted to keep the wizard for sending a message because it worked really well in the original design. Again because it can take up to 48 hours to receive a response, my intent here was to make it have the look and feel of sending an email and not a pop up chat message.
Click an Image to View
In Summary
In the end, I purposely chose to go with a very simplistic design without a lot of bells a whistles. My findings supported a simpler and straight forward design. And additionally, many users are older and more technologically challenged. Many patients that come into their health portals under an undue amount of stress and they benefit from an easy to navigate and straight forward site. Everything I designed was to reduce stress and chaos and to leave the user with a much smoother and less frustrating user experience.