Savvas
This case study covers the WCAG-compliant update of the "Savvas Realize" web app for improved online learning accessibility.
This case study covers the WCAG-compliant update of the "Savvas Realize" web app for improved online learning accessibility.
CLIENT
Savvas
PROJECT DURATION
09/21 - 12/21
Overview
The Savvas project aimed to develop an accessible design system that aligned with WCAG standards, supported both desktop and mobile platforms, and empowered the design team through advocacy and collaboration. This initiative responded to the growing need for inclusive, mobile-friendly educational tools and strengthened the team's role in delivering consistent, user-centric solutions.
The Savvas project aimed to develop an accessible design system that aligned with WCAG standards, supported both desktop and mobile platforms, and empowered the design team through advocacy and collaboration. This initiative responded to the growing need for inclusive, mobile-friendly educational tools and strengthened the team's role in delivering consistent, user-centric solutions.
Project Goals
Enhance Mobile Compatibility: Provide seamless functionality across desktop and mobile platforms to meet modern user needs.
Achieve WCAG Compliance: Ensure the design system adheres to accessibility standards, making the platform usable for all learners.
Foster Design Team Advocacy: Equip the design team with tools, training, and a unified approach to champion accessibility and design consistency.
Establish a Scalable Framework: Create a reusable design system to ensure efficiency and consistency across future projects.
Enhance Mobile Compatibility: Provide seamless functionality across desktop and mobile platforms to meet modern user needs.
Achieve WCAG Compliance: Ensure the design system adheres to accessibility standards, making the platform usable for all learners.
Foster Design Team Advocacy: Equip the design team with tools, training, and a unified approach to champion accessibility and design consistency.
Establish a Scalable Framework: Create a reusable design system to ensure efficiency and consistency across future projects.
Challenges
Mobile Compatibility: With increasing reliance on mobile devices for education, the design system needed to ensure seamless functionality across platforms.
Team Alignment: The design team required a unified approach to accessibility and system implementation while gaining stakeholder buy-in for the initiative.
Accessibility Compliance: The existing "Savvas Realize" platform required updates to meet WCAG guidelines and ensure usability for all learners, including those with disabilities.
Mobile Compatibility: With increasing reliance on mobile devices for education, the design system needed to ensure seamless functionality across platforms.
Team Alignment: The design team required a unified approach to accessibility and system implementation while gaining stakeholder buy-in for the initiative.
Accessibility Compliance: The existing "Savvas Realize" platform required updates to meet WCAG guidelines and ensure usability for all learners, including those with disabilities.
Creating the Accessible CEL Design System:
I conducted an audit of the "Savvas Realize" platform to identify accessibility gaps and established a comprehensive component library featuring accessible patterns that adhered to WCAG standards. Additionally, I designed responsive components optimized for seamless usability across both desktop and mobile experiences.
I conducted an audit of the "Savvas Realize" platform to identify accessibility gaps and established a comprehensive component library featuring accessible patterns that adhered to WCAG standards. Additionally, I designed responsive components optimized for seamless usability across both desktop and mobile experiences.
CEL Design System Components
I worked with the accessibility team to ensure each component met WCAG requirements by reviewing designs, addressing accessibility barriers, and incorporating feedback. We tested features for keyboard navigation, screen reader compatibility, and color contrast to create an inclusive and user-friendly experience
CEL Design System Components
I worked with the accessibility team to ensure each component met WCAG requirements by reviewing designs, addressing accessibility barriers, and incorporating feedback. We tested features for keyboard navigation, screen reader compatibility, and color contrast to create an inclusive and user-friendly experience
Responsive
Design
BREAK
Points
I updated software frameworks to support responsive designs by implementing fluid grid systems that dynamically adjust elements to different screen sizes. This included using scalable typography and flexible images to enhance readability and maintain visual consistency. Additionally, I introduced breakpoints tailored to common device dimensions, ensuring a cohesive and user-friendly experience across platforms.
I updated software frameworks to support responsive designs by implementing fluid grid systems that dynamically adjust elements to different screen sizes.
This included using scalable typography and flexible images to enhance readability and maintain visual consistency. Additionally, I introduced breakpoints tailored to common device dimensions, ensuring a cohesive and user-friendly experience across platforms.
CEL Design System Components
CEL Design System Components
enhanced
Engagement
ENHANCED
EnGAGE
MENT
ENHANCED
ENGagement
Drawers optimize space by organizing content and providing access to secondary features without cluttering the main interface. They enhance the product experience by offering contextual navigation, customization options, and maintaining a consistent visual hierarchy across devices. Additionally, drawers contribute to focus management, accessibility, and user engagement, making them essential components for improving usability and overall user satisfaction.
I updated software frameworks to support responsive designs by implementing fluid grid systems that dynamically adjust elements to different screen sizes.
This included using scalable typography and flexible images to enhance readability and maintain visual consistency. Additionally, I introduced breakpoints tailored to common device dimensions, ensuring a cohesive and user-friendly experience across platforms.
Drawers Introduced
Pop-up Menus Introduced
Drawers Introduced
Pop-up Menus Introduced
Mobile
I adapted the web application for mobile environments by prioritizing touch-friendly interactions, simplified navigation, and compact layouts to enhance usability. Mobile workflows were optimized to align with user expectations, including support for portrait orientation and leveraging native device capabilities like gestures.
I adapted the web application for mobile environments by prioritizing touch-friendly interactions, simplified navigation, and compact layouts to enhance usability.
Mobile workflows were optimized to align with user expectations, including support for portrait orientation and leveraging native device capabilities like gestures.
Mobile Experience
