User experience, style guide, and accessibility compliant design system development for CalPERS Member Self Service.
Providing mobile access to members’ self-services for the largest pension fund in the nation.
CalPERS manages the largest public pension fund in the United States. Their members span a diverse range of abilities, making this project laser-focused on providing streamlined access to information and digital services. CalPERS selected SymSoft Solutions to collaborate with their in-house team of user experience and accessibility experts and optimize critical experiences such as at-a-glance status information (reusable info panels), plan comparison (complex data tables), account setup and beneficiary management (multipage forms), and calculators (specialized tools).
What We Did
- User Experience Strategy
- Responsive Design System
- Style Guide Development
- Mobile-friendly WCAG 2.1 AA Accessibility Compliant Interface
Challenge
CalPERS’ active members and retirees increasingly access their self-service portal using mobile phones, tablets, and assistive technologies. Besides, product management introduced several convenient tools and options for self-service management that required unified user experience. The previous design system lacked the flexibility to support high standards of customer experience. With many new initiatives from the organization, the time was right to align myCalPERS with the industry’s best practices.
Results
The flexible, responsive design solution provides CalPERS’s user experience team virtually infinite ways to compose layouts for self-service management and introduce new tools to the members. Through improved usability, accessibility, and delightful interactions, members can access benefits information, update options, download statements, find a doctor, plan retirement, sign up for courses, and receive expert support. Significant improvements include a streamlined login process, centralized location for user profile and messages, more straightforward navigation, and ease of reading.
Project Highlights
User Experience Strategy
Collaborating with CalPERS’ in-house experts, SymSoft identified critical elements of user experience and designed the design system architecture to support a long-term solution for building and expanding member-facing websites and self-service applications. We collaborated with brand management, enterprise services, and product development to create a future-proof design solution with the final output being a flexible system of interface components.
Responsive Design System
As a part of the joint multi-functional project team, SymSoft designed components, interactions, and page layouts for mobile, tablet, and desktop screens. Design solutions account for varying features and options for a wide variety of member personas, from active members to retirees.
Style Guide Development
Once the design was implemented, the SymSoft team developed a style guide and a pattern library in Adobe XD for future reference and utilization by CalPERS’ project teams.
Mobile-friendly WCAG 2.1 AA Accessibility Compliant Interface
SymSoft developed a mobile-friendly interface pattern library using best-practice HTML, CSS, and JavaScript coding patterns while meeting the highest standards of accessibility compliance. The pattern library has been continuously tested by the CalPERS’ team of accessibility specialists on the majority of modern mobile and desktop browsers and assistive technologies.