◇ Case study
Standardized design language for consistency and accessibility
As a user, when accessing the secure portal, I want to see consistency across modules when it comes to style, patterns, and functionality.
Design System
UI
A11y
Responsive Web
Fondue Design System
Overview
Objectives
- Consistent styling: uniform across the entire application
- Cross-browser compatibility: functionality is implemented and displayed consistently
- Responsive design: ensure all front-end components are displayed appropriately based on device type and breakpoints
- Accessibility: ensure all components have passed 508 compliance standards
Consumers
Internal stakeholders:
- Designers
- Analytics partner
- Developers
Products
- Oklahoma Medicaid
- Next Gen Foster Care
- Legacy Portals through Interceptor
Problem Statements
The modernized foster care portal was built over several years by different teams and utilizing different versions of the Fondue component library. Since the One Portal Initiative is being built initially for Oklahoma, Centene seeks to ensure that all pages within the application are behaving consistently for functionality and placement.
Design Language
The team and I set forth a set of principles that acted as a living document accessible to all designers, developers, and product managers. It was divided into easy-to-navigate sections that provided detailed structure of commonly used components, along with best practices for implementation
Atomic Components
Interactions
Layout
Implementations
- A11y: all assets were approved by Accessibility team
- Aesthetic and Minimalist Design: employ clean and uncluttered design aesthetic, using white space effectively to focus attention and reduce cognitive load
- Adoption and Governance: a governance process was established to ensure strict adherence. Weekly design audit were conducted to identify deviations
- Improvement: guideline was treated as a living document, regularly updated and refined based on feature needs
- Research: worked with research partners to validate new design patterns
Timeline
01
Audit
- Identify areas of inconsistencies or sub-par aesthetic
02
Design Principles
- Established a set of foundational princiles
- Accessibility, consistency, compatibility, and responsive
03
Standardize Components and Styles
- Developed the design language guideline
04
Implementations
- The guideline was made available as living document
05
Cross-team Collaboration
- Design support
- Workshops and training sessions
06
Maintenance
- Set up governance team for continuous updates and expansion
Outcomes
The design language guideline proved to be a valuable asset for all Single-Page-Application features, enabling the ability to create a more user-friendly, visually appealing, and maintainable digital portal. We successfully aligned all teams around a single, cohesive vision for design.
Thanks to the standardized design language, the One Portal Initiative will continue to scale while maintaining consistency, accessibility, and reduced maintenance cost.
