Trans Care BC
Equitable access and inclusive experiences
TransCareBC.ca is a supportive and affirming space which authentically represents the Two-Spirit, transgender and non-binary (TTNB) community. This website aims to bridge gaps in representation, provide relevant resources, and ensure that the user experience fosters dignity, respect, and empowerment for all users.
Role: Creative Director, UI, UX (Neurodivergence consultant), Frontend dev support, Illustration
Timeline: August 2022 – Present
Deliverables:
Website – Figma prototype, PHP, CSS,
Design – Brand Guideline, Design System and Design Templates
Challenge
Trans Care BC needed a complete design overhaul to more accurately represent the Two-Spirit, transgender and non-binary community as well as a more accessible and user-centred website to serve their community, families, and care providers across British Columbia. The former site was dense, difficult to navigate, and its visual display was misaligned with its purpose; TTNB users did not recognize the site as being for them.
Approach
Through extensive user research and visual testing, I listened and uncovered needs and pain points for our audiences. Design decisions were guided by real needs and desires rather than assumptions, ensuring a meaningful experience tailored to the TTNB communities and healthcare providers in this field.
We met WCAG 2.0AA compliance and more; providing clear guidelines and a Design System to support Trans Care BC in maintaining this compliance in future.
Solutions
Self-representation
All artwork on the site was thoughtfully commissioned from TTNB artists and allies, empowering them to express themselves in ways that feel authentic and personally meaningful. To ensure visual cohesion across the platform, our Design System offers clear art direction that supports a consistent brand identity while celebrating the unique voices and styles of multiple contributors.
Indigenous collaboration
To honor and reflect Indigenous voices, we commissioned Chase Gray, a queer artist from xʷməθkʷəy̓əm and Tsimshian of Musqueam, to create the artwork featured in the footer across all pages and throughout our learning materials. Their work brings cultural richness, authenticity, and a meaningful visual presence that grounds the site in respectful collaboration and representation.
Community Voices artwork
Through “Community Voices”—highlighted artwork and quotes at the bottom of many pages—individuals share their gender-affirming experiences and challenges in their own words, ensuring their stories and perspectives remain at the heart of the platform.
Special considerations
We developed systems and implemented design choices to ensure tailored support and accessibility for neurodivergent users, who are more prevalent within the TTNB community, Our goal with this website was to create a space that was natively comfortable for our neurodivergent site visitors. This approach ensured that accessibility was not just a technical requirement but a fundamental design principle.
Providing context
Interactive tools were developed to help neurodivergent users seamlessly transition between broad overviews and detailed content, addressing challenges in connecting detailed information to greater context. Interactive visual aids, such at the Hormone Effects Tools, provide visual timelines, insights into permanence/non-permanence, and representations of physical changes—all within a single tool that allows users to engage at their own pace.
Neurodivergent friendly display
To support visually sensitive viewers, the site was designed to be readable without requiring adjustments to colour or saturation. While an optional dark mode is available, it isn’t necessary—the carefully curated narrow, calm, and muted colour palette ensures a comfortable viewing experience and reduced visual strain.
Supporting linear understanding
Access to health care and gender-affirming services is linear in nature. This can result in additional challenges for those who struggle to follow a sequential series of steps. Flexible navigation in sections, such as each surgery section, allow the user to progress through pages of information in the same linear progression as they will experience in accessing care.