01. SUMMARY
The Challenge
Kaiser lacked a feature on its authenticated experience that enabled members to select Kaiser Permanente facilities for user tasks requiring geolocation services, exposing the organization to potential legal liability and a subpar user experience.
The Solution
Create a scalable geolocation component for other product groups within the organization to increase online bookings and ensure Kaiser meets legal compliance.
The Results
• The Geolocation function has been implemented into the KP Design System with a
• Feature achieved a WCAG 2.0 AA rating, and was rolled out across various project groups. Some features required for WCAG 2.o AAA compliance were deemed to be out of scope for MVP.
02. PROJECT DETAILS
Company
Kaiser Permanente is an integrated managed care consortium headquartered in Oakland, California. It has a total of 12.6 million members and provides care through seven major regions in the United States and consists of three entities: the Kaiser Foundation Health Plan, Kaiser Foundation Hospitals, and Permanente Medical Groups.
My Role
Senior Designer
Key Deliverables
Wireframes
Prototypes
Design Documentation
Alpha Release
Timeline
4 Months
Project Overview
03.DISCOVERY
Understand the Ask
• Ensure the feature meets WCAG (Web Content Accessibility Guidelines) requirements of at least AA compliance.
• Create geolocation solution for Southern California region appointment booking and for the inclusion of fully accessible components and patterns to be integrated into the Kaiser Permanente Design System.
04. DEFINE
Current State Understanding
Appointment booking is a multi step flow comprising a five steps process: reason for visit, appointment type, location, date & time, and confirmation.
If the member wanted to see a location in relation to their physical proximity, they had to click a link to open "Find Doctors and Locations" in a new tab.
Geolocation features were being integrated into other product silos within the site, including Pharmacy Locator. However, none of these features were fully WCAG compliant, and the integration was being done in a fragmented and uncoordinated manner.
05. DESIGN
Iteration
The Pharmacy Locator Design System feature was used as a foundational starting point for the new geolocation designs, with necessary modifications to meet business requirements and ensure consistency with KP design system standards.
Accessibility
1. Key accessibility improvements included:
Screen Reader Compatibility: Providing descriptive text for map elements with alt tag descriptions.
2. Focus Indicators: Clear visual focus indicators help users understand which element is currently selected. Ex. A user clicks on a map pin for more information, which activates a pop-up modal. The modal appears centered above the map pin. The modal displays location information corresponding to the list search item. The modal can be dismissed by clicking the close button (X) or clicking another pin. Clicking on a radio button in the list search results also dismisses the pop-up. When a user tabs through to a modal, the title is highlighted with a 1 px stroke in KP Highlight Blue around it to denote that it's an active selection.
3.) ARIA (Accessible Rich Internet Applications) : Use of ARIA attributes to enhance the accessibility of interactive map components.
4.) Keyboard Navigation: Users can navigate the feature using keyboard shortcuts
Arrow Keys: Pan the map
.+/-: Zoom in and out.
Tab: Navigate through interactive elements.
Shift + Tab: Navigate backward through elements.
Enter: Select a focused element.
Esc: Close an open menuKeyboard
5.) Visual Design: The interface was designed with high contrast options and text scaling for users with visual impairments. Testing color schemes to ensure map components are distinguishable by people with various types of color blindness.
6.) Touch Targets: Incorporating large touch targets into map components that prioritize ease of use, accuracy, and user comfort are vital for accessibility.
Ex. Users can select a location by clicking a radio button or by clicking anywhere within the hit area (highlighted below).
06. DELIVERY
Mobile
Members can now easily choose a KP facility location while booking their medical appointment. I was able to take advantage of recent design changes in the KP UI.to upgrade the look and feel.
For mobile, I handed off ADA compliant specs for iOS, mobile web and Android.
Desktop
Handed off ADA compliant specific for desktop.
What I Learned
Design Constraints: Adhering to WCAG AA, guidelines required limitations to existing design choices with interaction patterns. There was a need to find a balance between aesthetic preferences and accessibility needs.
Complexity of Requirements: WCAG AA has many specific and nuanced requirements covering a wide area, such as color contrast, keyboard navigation, screen reader compatibility, and more. Implementing all the guidelines required a strong understanding of both the technical and functional aspects of the UI.
Successful disability inclusion is a long and ardous process that begins with challenging perceptions and stereotypes. Empathy is key on understand how people view and treat their disability.