Ontario Teachers’ Pension Plan is one of the world’s largest institutional investors with $221.2 billion in net assets. OTPP is a pension plan that provides lifetime pensions to teachers across Ontario.
I worked in the Member Experience & Innovation department to improve the pension plan’s teacher/pensioner service experience. My primary role was as a UX designer on the Ed agile development team. Ed is an enterprise software used by many different departments daily to manage the pension data for 331,000 retired and working teachers. Halfway through my internship, I was the lead UX designer for Ed. I was tasked with developing new features, creating interactive prototypes, writing design specifications, and planning usability studies.
In this case study, I led the research, planning, and development of a new feature to improve accessibility on Ed.
May 4, 2020 – September 3, 2021
16 Month UX Design Internship
7 min read
OTPP: Ontario Teachers’ Pension Plan
Ed: OTPP’s enterprise software (Enterprise Desktop)
CRM: Customer relations management software
How I improved accessibility on Ed, an enterprise web app used to manage the pension data for 331,000 retired and working teachers.
I collaborated closely with Philip Hoyt (Senior UX Designer), Abhirami Sunil (UX Design Intern), Juli Waddell (My Manager), Tomoyuki Katayama (Technical Team Lead), Steve Smith (Product Manager), the developer team, and the testing team all steps of the way to get my project from proposal to release.
Background
OTPP recently had an entire redesign and re-engineering of Ed from a legacy computer-based app to a web-based app. Most Ed users are in their 20s to 40s, some in their 50s, spending most of their time working with the text-heavy interface every day.
For our initial research, we gathered user opinions for the new design by conducting surveys, interviews, and a desirability test. We found the new design had many opportunities for improvement in accessibility and visual design.
User Problems
Users reported the white background being harsh on their eyes after a day’s work.
Multiple users said the text was too small and relied on unstable third-party solutions.
Call centre specialists found it hard to distinguish elements on the screen while on the phone.
The Business Opportunity
Allow our internal tools to be AODA compliant (The Accessibility for Ontarians with Disabilities Act)
“Ed is functional, but not user-friendly”
– User from Quality Assurance.
How might we:
Make Ed
- Accessible for all ages
- Improve the visual design
- Increase user satisfaction
“Improved visual design can improve user satisfaction and enhance the perceived quality & usability of the software.”
– aesthetic-usability effect Nielsen Norman
Measuring Success
To determine the impact of our project for the business, we worked with product managers to determine quantifiable metrics that we could track. One key metric is the number of processes that Ed users can complete. Processes can be anything from uploading a teacher’s marriage certificate onto their file to calculating how a teacher’s maternity leave could affect their pension. We hypothesize that an improved viewing experience could result in less time needed away from the screen, therefore, increasing the number of processes each user is able to complete.
Metrics
- An increase in the number of processes completed by users.
- Zero accessibility issues detected by WAVES accessibility chrome extension
- Users no longer rely on third-party browser solutions.
- Increased desirability scores and positive user testimonies.
- Increased QSI (quality service index)
Exploration
We explored multiple avenues of improvement, for instance, having more detailed loading indicators, text labels on icons, dark modes, and even a complete redesign on the UI. We decided to implement those that would have an immediate impact on our three goals:
(1) accessibility (2) visual design (3) user satisfaction.
We needed to consider the feasibility of these improvements and how work could be accomplished with minimal developer assistance as most of the developers were occupied with developing new features.
1. How might we make Ed accessible for all age groups?
By using best practices obtained from our secondary research, listening to user feedback, and considering AODA guidelines we decided these improvements would have the greatest impact on accessibility while being easiest to implement with minimal developer help.
Increase font sizes.
Increase colour contrast to comply with WCAG AA standards.
Make Ed responsive to multiple desktop screen sizes and workflows.
Logical tab orders and focus indicators for keyboard reliant users.
2. How might we improve Ed’s visual design?
After conducting a visual design audit, we determined a list of improvements that would give us quick wins. Before applying these changes, I made a mockup to demonstrate the improvements to get buy-in from my team.
- Improve text hierarchies.
- Increase padding and margins to improve element distinguishability.
- Utilize consistent padding and margin values.
- Dim white background to a light grey.
- Replace pure white #FFF and pure black #000 colours with rich-black and off-white colours.
- Design a more evident tab-selected indicator.
How might we increase user satisfaction?
Improving the visual design was one way to increase user satisfaction. We wanted to explore further possibilities such as allowing users to customize their interface.
One idea was to allow users to select different themes for the interface. For example, a dark mode theme, a theme with a larger font, or simply allowing users to change the background colour. We pitched this idea to our user focus group and received positive feedback and excitement. However, after consulting the technical lead, due to technical constraints and complexity, we decided to go with a simpler solution.
The simpler idea: Users could only toggle between two modes.
- Default theme
- Accessibility theme
The accessibility theme would include all the accessibility improvements made above while giving users the option for customization. This approach allowed us to test the new theme before pushing any permanent accessibility changes. If users prefer to keep their interface the same, they could stay on the default theme. Other users who find enjoyment in the accessibility theme can toggle it on. Furthermore, this compromise prepares us to implement new themes quickly in the future to improve user satisfaction.
Design and Implementation
After the approval for the accessibility theme from the Ed product manager and tech team lead, I created the epic to begin the agile development.
Roadmap
For the accessibility theme epic
- Update all Ed apps to the latest style-guide.
- Fix visual inconsistencies and bugs on the current UI.
- Make all Ed Apps responsive.
- Make style-guide and Ed app styles dynamic.
- Create wireframes and mockups of the accessibility theme.
- Code accessibility theme proof of concept on one app.
- Code accessibility theme on all apps
- A developer helps create the theme switcher button
- Feature release
Before we could implement the feature, the Ed style codebase needed to be refactored. I took on the bulk of the code refactoring work, fixed visual inconsistencies of the UI, and made Ed responsive with guidance from the senior UX designers. It was an exciting time as I got to work with lots of CSS & HTML. I also created the wireframes for the accessibility theme and was the one to implement it on Ed. The final few tickets were handed to a developer to create the accessibility theme button.
Results
Side Effects
- Refactored Ed style-guide SASS to be dynamic and consistent across all apps, allowing for better readability & management and allowing Ed to easily incorporate future themes.
- Refactored Ed Apps to be responsive on multiple screen sizes
- Fixed visual bugs and inconsistences on the default Ed UI
Key Impacts
*The accessibility theme was ready to be deployed the week before my internship ended. Therefore, I was unable to monitor the long-term impact of the feature.
- Ed is now AODA compliant
- Metrics to be determined
This was only one out of many projects that I took part in. Let’s have a chat if you want to hear about my other experiences and work duties at OTPP!