Redesigning the digital accessibility training framework and the landing page within their confluence to boost accessibility awareness.
Type
Capstone project
Tools
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><g d="M 0 6.854 C 0 3.069 3.069 0 6.854 0 L 23.141 0 C 26.926 0 29.995 3.069 29.995 6.854 L 29.995 23.141 C 29.995 26.926 26.926 29.995 23.141 29.995 L 6.854 29.995 C 3.069 29.995 0 26.926 0 23.141 Z M 7.972 22.019 C 7.972 20.077 9.546 18.503 11.487 18.503 L 15.002 18.503 L 15.002 22.019 C 15.002 23.96 13.428 25.534 11.487 25.534 C 9.546 25.534 7.972 23.96 7.972 22.019 Z M 14.979 4.448 L 14.979 11.478 L 18.494 11.478 C 20.435 11.478 22.009 9.904 22.009 7.963 C 22.009 6.021 20.435 4.448 18.494 4.448 Z M 18.494 18.527 C 20.435 18.527 22.009 16.953 22.009 15.012 C 22.009 13.07 20.435 11.497 18.494 11.497 C 16.553 11.497 14.979 13.07 14.979 15.012 C 14.979 16.953 16.553 18.527 18.494 18.527 Z M 7.972 7.963 C 7.972 9.904 9.546 11.478 11.487 11.478 L 15.002 11.478 L 15.002 4.448 L 11.487 4.448 C 9.546 4.448 7.972 6.021 7.972 7.963 Z M 7.972 15.011 C 7.972 16.953 9.546 18.526 11.487 18.526 L 15.002 18.526 L 15.002 11.497 L 11.487 11.497 C 9.546 11.497 7.972 13.07 7.972 15.011 Z" fill="transparent" height="29.995132867132952px" id="w9BTIwivH" width="29.995132867132952px"><path d="M 0 6.854 C 0 3.069 3.069 0 6.854 0 L 23.141 0 C 26.926 0 29.995 3.069 29.995 6.854 L 29.995 23.141 C 29.995 26.926 26.926 29.995 23.141 29.995 L 6.854 29.995 C 3.069 29.995 0 26.926 0 23.141 Z" fill="rgb(0, 0, 0)" height="29.995132867132952px" id="Pt1MrmRxm" width="29.995132867132952px"/><path d="M 0 3.515 C 0 1.574 1.574 0 3.515 0 L 7.03 0 L 7.03 3.515 C 7.03 5.456 5.456 7.03 3.515 7.03 C 1.574 7.03 0 5.456 0 3.515 Z" fill="rgb(36, 203, 113)" height="7.030153846154008px" id="UsTjEgRiz" transform="translate(7.972 18.503)" width="7.02998601398599px"/><path d="M 0 0 L 0 7.03 L 3.515 7.03 C 5.456 7.03 7.03 5.456 7.03 3.515 C 7.03 1.574 5.456 0 3.515 0 Z" fill="rgb(255, 114, 55)" height="7.029986013986218px" id="BjLNftDFH" transform="translate(14.979 4.448)" width="7.03015384615378px"/><path d="M 3.515 7.03 C 5.456 7.03 7.03 5.456 7.03 3.515 C 7.03 1.574 5.456 0 3.515 0 C 1.574 0 0 1.574 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 Z" fill="rgb(0, 182, 255)" height="7.03015384615378px" id="tSGDRBMxX" transform="translate(14.979 11.497)" width="7.030069930069885px"/><path d="M 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 L 7.03 7.03 L 7.03 0 L 3.515 0 C 1.574 0 0 1.574 0 3.515 Z" fill="rgb(255, 55, 55)" height="7.030153846154008px" id="CogGJnjiB" transform="translate(7.972 4.448)" width="7.02998601398599px"/><path d="M 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 L 7.03 7.03 L 7.03 0 L 3.515 0 C 1.574 0 0 1.574 0 3.515 Z" fill="rgb(135, 79, 255)" height="7.02998601398599px" id="z1wnQ20Xg" transform="translate(7.972 11.497)" width="7.02998601398599px"/></g></svg>)
Figma
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><g d="M 0 7.5 C 0 3.362 3.36 0 7.5 0 L 22.5 0 C 26.64 0 30 3.36 30 7.5 L 30 22.5 C 30 26.64 26.64 30 22.5 30 L 7.5 30 C 3.36 30 0 26.64 0 22.5 Z M 19.95 5.734 L 17.228 5.734 L 19.498 9.722 L 14.506 5.734 L 11.785 5.734 L 14.281 10.604 L 9.063 5.734 L 6.342 5.734 L 9.063 11.938 L 6.342 24.344 L 9.063 24.344 L 14.281 11.054 L 11.785 24.344 L 14.506 24.344 L 19.498 10.165 L 17.228 24.344 L 19.95 24.344 L 24.941 8.839 L 19.95 5.741 L 19.95 5.734 Z" fill="transparent" height="30px" id="TTJ7WaH19" width="30px"><path d="M 0 7.5 C 0 3.362 3.36 0 7.5 0 L 22.5 0 C 26.64 0 30 3.36 30 7.5 L 30 22.5 C 30 26.64 26.64 30 22.5 30 L 7.5 30 C 3.36 30 0 26.64 0 22.5 Z" fill="rgb(255, 221, 51)" height="30px" id="Cy5qD0trk" width="30px"/><path d="M 13.608 0 L 10.886 0 L 13.156 3.987 L 8.165 0 L 5.443 0 L 7.939 4.87 L 2.722 0 L 0 0 L 2.722 6.204 L 0 18.61 L 2.722 18.61 L 7.939 5.32 L 5.443 18.61 L 8.165 18.61 L 13.156 4.431 L 10.886 18.61 L 13.608 18.61 L 18.599 3.105 L 13.608 0.006 L 13.608 0 Z" fill="rgb(28, 28, 30)" height="18.6097215189875px" id="wTatIhCxG" transform="translate(6.342 5.734)" width="18.599468354430428px"/></g></svg>)
Miro
At a Glance
We engaged with the Xero accessibility team to redesign their digital accessibility training framework and accessibility landing page.
My Role
Primary & secondary research and analysis
Concept ideation & development
Lead interviews & usability testing
Project management
The Challenge
To increase digital accessibility awareness and skills amongst Xero's (Xero staff)
Goals they wanted to achieve:
Increase motivation from teams to partake in the digital accessibility training programme
Increase attendance in the training programme
Increase engagement during facilitated sessions
Increase learning retention
Framework: This framework allows the accessibility team to track progress of employees within the accessibility learning journey.
Learning Journey: To increase engagement and motivation, we created a fun visual learning journey to help the team understand the different aspects of the journey.
Empathy Workshop: To increase attendance and motivation to training programmes, we designed a simple kick-starter workshop to help employees empathise with accessibility users. This workshop is asynchronous, so that it's easier to slot into each persons own schedule.
Landing Page: To increase learning retention, we re-designed the accessibility landing page inside their internal confluence to act as a handy guide to go back and revise what they have learned.
Advocate Roadmap: To increase motivation, we gamified the road to becoming an accessibility advocate and reward those who accomplish different achievements.
Research Process
Primary Research
Stakeholder interview
Interview with the Accessibility Team at Xero. We wanted to get a clear understanding of the brief and create a reverse brief to ensure we are on the same page for goals, timeline and potential outcomes
Fable survey analysis
Xero provided us with the survey data that was collected by Fable after the completion of each training module. This data gave us insights about their thoughts and perspectives on the current training content and digital accessibility.
Fable interview
Interview with Felipe Soares - Senior Enterprise Customer Success Manager at Fable. We wanted to know some success stories with how they approach training with different companies and what models they use.
Xero team (Xeros) interview
We aimed to conduct interviews with five Xeros to gain a deeper understanding of their perception of the accessibility training and how they were applying the skills they acquired several months after completing the training.
Secondary Research
What we researched:
Proactive & reactive learning approaches
Best practices in teaching accessibility
Accessibility case studies
Adult learning
Why we researched it:
To provide opportunities for designers & developers to observe people with disabilities using assistive technology while interacting with Xero products
Make standards clear and accessible to set a benchmark for excellence
Incorporate real world problems and scenarios into training sessions
Ensure accessibility considerations are embedded into each project from inception to completion
Considerations
From our findings & insights, we developed considerations to keep in mind when designing the accessibility learning framework.
Motivation
Collaboration
Practical application
Personalised training
Creating safe spaces
Asynchronous learning
Accessibility advocates
Design principles
We also developed some design principles to guide our decision making throughout the project.
Accessibility
Adaptability & inclusion
Practical
Supportive
Empowerment
Job stories
We created job stories to facilitate conversation around who we are designing for.
We opted for job stories over personas as we did not want to assume or stereotype the users especially around the conversation of accessibility. This helps us focus on the task itself rather than the background of who is using it.
Motivation
When I'm encouraged to make time for additional training programs,
I want to understand the importance and relevance to my work so I can feel motivated to attend and prioritise my time accordingly.
Support
When I'm interacting with assistive technology users, I want to feel confident asking questions and comfortable making mistakes so I can learn about accessibility from the user and implement assistive tools effectively.
Training Sessions
When I'm unable to meet in person for a workshop, I want to participate in activities remotely or in my own time so I can keep up to date with the learning material and still gain benefits from the group interaction aspect of the training.
Training Material
When I'm learning about accessibility, I want to understand how it applies to my current work and our product, so I can easily bridge the gap between theory and practice when the training program finishes.
Training Material
When I'm doing the accessibility training program, I want to have learning material that is new and relevant to me so I can efficiently learn about accessibility without taking up valuable time repeating what I already know.
Collaboration
When I'm learning about accessibility, I want to understand how different roles implement accessibility so I can have constructive discussions about how we can work together to create an accessible product.
Usability testing
We made a low fidelity version of the landing page to do usability tests for 6 Xero team members.
Some tasks include:
Navigate to dashboard
Navigate to champions program section
Review onboarding process for champions program
Navigate to resource page
Add a resource to your own resource library
Lo-fi landing page
Key Insights
Motivation for accessibility
Participants are motivated to engage with accessibility initiatives when they perceive relevance to their work and have personally encountered direct experience with accessibility challenges.
Factors like shorter time commitments and ease of completion play a key role in sustaining their interest. As a result, making the content relevant, hands-on, and easy to navigate will greatly increase their motivation to participate.
Training and resources
Participants see training and resources as the primary avenues for acquiring knowledge and skills in accessibility. However, they desire training to offer more than just "a one-stop shop for accessibility" and prefer resources to incorporate additional hands-on examples for reference.
The Outcomes
Xero Digital Accessibility Journey Framework
We designed this framework to be used by the accessibility team to be used as a guide for how a Xero team member can go from becoming aware to becoming an advocate.
The tools, events and workshop are categorised into stages to give clarity to the team.
The framework starts with awareness which we identified to be an important first step and runs through the training stage, implementation and advocacy.
This framework will be a work in progress as they use it.
User Journey Map Visual
The user journey map for accessibility learning at Xero.
This will be used for their accessibility learning page to help the team visualise different aspects of digital accessibility at Xero.
To motivate Xero's we want to:
Show a personalised user journey map
Show the different stages of learning
Track user progress
Gamification through rewards and completion badges
Our initial goal was to gamify the journey by visually showing their progress.
Constraint:
When we discussed the feasibility with the accessibility team, personalisation was found to be difficult to make within their learning hub platform.
Adaptation:
Due to this constraint, we had to adapt the visual to steer away from personalised journeys into a broader visual that represents the full journey.
Our current visual is showing that learning is dynamic, constant and that there is no “one straight path”.
Empathy Workshop
This empathy workshop is designed to kickstart accessibility awareness within Xero.
Our research suggested a powerful way to encourage people to get motivated to learn about accessibility is to create an environment where they feel safe and supported on their learning journey.
We designed an asynchronous empathy workshop on Miro.
1.
To kick off the workshop we got participants to watch a video of an assistive tech user signing up to Xero.
2.
Participants were invited to share stories of experiences they have had with people who use assistive tech.
3.
Empathy task to sign into Xero and create an invoice using only keyboard navigation.
We tested this workshop on 6 Xero team members and gained some insights.
Insight 1
Personal stories reflect a comfortable and open environment
Many participants shared personal or family experiences with disability and assistive technology, suggesting they felt comfortable enough to be open with their colleagues. This points to the importance of creating environments where people feel safe to share personal perspectives.
Insight 2.
Preferences for workshop support and interaction
Most participants found the asynchronous format effective, but some expressed a preference for live discussions or follow-up support. This indicates a need for flexibility in how workshops are delivered and supported, to cater to different learning and communication preferences.
Advocate Roadmap
The main objective is to create the culture of accessibility ownership within the teams and making sure they are following the accessibility standards.
This helps visualise the different stages to becoming an advocate.
Gamified badges for different levels.
As Xero had previously outsourced Fable, which had their own champion programme, we wanted to create a clear distinction between the two programmes. We decided to rebrand the Accessibility Champion to be Digital Accessibility Advocates to prevent confusion between the two.
There are two levels with different tasks.
Once you complete a level, you get a physical badge (and digital one on the "ideal" version of the landing hub prototype).
Xero Digital Accessibility Journey Framework
To consider the constraints of the current website platform, we prototyped three versions with different functionalities
Practical prototype
Current system only supports static pages
Can be integrated into Xero system immediately
Improved static layout and accessibility resources
Intermediate prototype
This version is an in-between of the practical and ideal.
Serves as a "work in progress" model
Incorporates bento layout for landing page
Supports more customisation and visual elements
Ideal prototype
The version has a personalised homepage tailored towards each person
Our concept is to create a one-stop-shop for accessibility resources
Provide a safe space for learning, collaboration and community discussions
Key Learnings
Digital Accessibility
Through this experience, I gained a deeper understanding of digital accessibility and the range of assistive technologies that are used. I learned about the challenges companies face in creating a culture that prioritises accessibility and why it’s so important to overcome these barriers. Designing with accessibility in mind not only supports users with disabilities but also improves the overall usability and reach of a product. Often, accessible design uncovers new use cases and leads to better experiences for all users, making the product more inclusive and effective.
Working within a real-world project
Another key learning was adapting to real-world constraints and timelines. In previous university projects, we often worked with hypothetical challenges, which allowed us to design “ideal” solutions without limitations. However, this project required us to adjust our expectations and tailor our design to fit Xero’s existing platform. We had to prioritise delivering a minimal viable product that was both practical and achievable within the timeframe.