UX Design Approach. The following slides show samples of my UX User-Centered Design approach. I led both internal and external teams in the UX design processes for a Web App program called “Prescription for Learning”. My approach included defining user pain points and goals, developing user personas, and having “design studio” ideation sessions. These all supported my development of prototypes and using them in usability testing.
User Site Visits for Observation and User Pain Points and Goals. Site visits included visiting four separate cancer centers around the U.S. On these site visits, I observed and interviewed nurses and patients using an interactive learning program. A user experience map (not shown) was developed to document the user experience. Post-it notes were used to identify and capture Pain Points and Goals. The ideas generated by the “Post-it note process” are valuable for developing personas, storyboards, and ideation steps.
Personas. Personas, shown below, were created using information from the experience map and the Pain Points and Goals shown above. One important realization was gained from this process: resolving the staff Pain Points and helping them accomplish their goals was actually more important than resolving the patient Pain Points. This represented a major shift in the focus of the UX Design.
User Flow Diagram. The “User Flow Diagram” shown below illustrates how one user navigates the Web App based on user testing. If there were multiple ways that users navigated the site, there would be a “User Flow Diagram” for each of these.
User Journey Map. The “User Journey Map” shown below is an excellent way to illustrate how a given persona interacts with a digital product or an organization, such as a cancer center. “User Journey Maps” enable stakeholders, managers, and developers to get a big picture of how a user’s pain points and goals/opportunities intersect with the touchpoints for a given user.
I created this “User Journey Map” to show how healthcare teams, including doctors and nurses, currently try to educate their patients. It has a timeline for an average patient visiting their clinic for either a checkup or a cancer treatment session such as chemotherapy. The ideas in this Map are based on user testing sessions and stakeholder interviews at 4 cancer centers that I have worked closely with. This “User Journey Map” shows that there are great opportunities to improve delivery of patient education if the pain points of healthcare staff are overcome. One key opportunity, that is easier to see with this map, is that both healthcare teams and patients and family members are enthusiastic about having easier patient education provided in the clinical setting.
My UX Design for the tablet-based web app, “Prescription for Learning,” took into account that doctors and nurses are extremely busy and need learning programs to automatically document and track all learning sessions. This documentation is necessary in the medical setting for department managers and doctors and nurses to manage and make improvements in their use of these digital learning programs.
Ideation builds on Pain Points, Goals, and Personas. When doing Ideation, I enjoy sketching ideas that help address each of the user Goals. In the process of doing Ideation, it is also important to “think outside the box” and explore different features and platforms in searching for a design solution. My sketches, as shown below, illustrate both a Smartphone Web App idea and a desktop PC Web browser idea. Though the final design was for tablets, because it was responsive it could also be used with smartphones and desktops/laptops.
Interactive Prototype for Usability Tesing in Wireframe Format. After the Ideation step, I developed wireframe interactive prototypes for usability testing as shown below. The wireframes were done in Balsamiq and were saved in an interactive format for user testing.
Tablet-based Interactive Prototype UX Design for the Web App (for the Microsoft Surface Windows 10 tablet). The screens below were designed for an early tablet iteration of the design for the Web App. This design was used for user testing with both medical staff and cancer patients. There were many aspects of this design that were not effective or efficient for the medical staff. One big problem with this version of the design was having staff go through multiple screens to select the topics for each patient. Testing showed that staff wanted the education content to be pre-selected by type of cancer. This change is shown in the final design screens further below. The interactive prototype was a Windows 10 based Tablet App running on a Microsoft Surface Pro tablet. The tablet was shipped to Florida Hospital Cancer Center and other centers nationwide for user testing by their education director and staff.
Examples of the Web App Final Design including Dashboards of user data. The screens below reflect the lessons that the team and I learned from extensive user testing with doctors, nurses, and cancer patients. For this Web App program, saving time for medical staff was a critical usability feature. This included easy menus, automatic data collection, reports, and dashboards. The Dashboard screens show the many charts, graphs, and tables that each health professional user sees from their individual secure account. Department Managers have these same dashboards showing user data for all doctors and nurses in their department.
The “Prescription for Learning” Web App Screens for staff shown below are from an iPad view. The iPad Tablet is the primary platform I selected for use by doctors and nurses in the clinical setting. The Web App screens shown below, that I designed, illustrate that the UX Design runs using a HIPAA Secure Cloud Database Backend which safeguards patient data. The Cloud Database Backend also allows all Health Professional staff to have individual login accounts. The dashboard views shown below are unique for each health professional user. Department managers have the same dashboard views but the data shown is a roll-up of all patient data for all staff in their departments.
Examples of the Web App Final Design showing the Patient Education screens. The tablet image on the lower left is a tablet view for the learning program patient and family users see in the clinic. The iPhone image on the lower right is a view for patients showing they can access the education when not at the clinic from their smartphone or other mobile or desktop devices.
User Data for Evaluation. The user data shown below comes from website server data and from Google Analytics. For this project and other projects, I designed custom user data collection and analysis programs. Below are examples of slides I created combining data for the top 3 cancer centers for a “nationwide” view. These slides are used in presentations to health professional stakeholders including doctors, nurses, and department directors at each of the cancer centers.
Professional Societies and Associations:
I am a member of UX Design and Interaction Design Professional Associations which connect me to other professionals and keep me up-to-date with best practices and industry trends.