Duration: March 2024 – Present
Role: Founder & Principal Product Designer
Team: Collaborated with front-end developers, accessibility testers, and UX researchers
Objective: To design and prototype an AI-powered web accessibility platform that enables developers and designers to build, validate, and share WCAG-compliant code components through an intuitive dashboard interface.

The Challenge

Despite growing awareness of accessibility standards, many developers and designers still find it difficult to implement WCAG 2.2 guidelines correctly. Tools often feel fragmented — audits separate from build environments, and education isolated from hands-on practice.
The challenge was to create an experience that:

• Integrates accessibility guidance directly into the design-and-build process.
• Provides immediate feedback through real-user and automated testing.
• Offers a visual, code-connected interface accessible to both designers and developers.

Research & Insights

User Research:

• Conducted interviews and surveys with freelance designers, front-end developers, and accessibility advocates.
• Analyzed Reddit UX threads and accessibility community discussions to identify pain points in existing workflows.

Key Insights:

• Users want “learn-by-doing” accessibility – guidance while they build, not after.
• Real-user testing is valued over automated audits alone.
• Live previews and editable code snippets significantly reduce cognitive load for non-technical users.

Design Process

Information Architecture:

• Structured the dashboard into three core workflows – Build, Validate, and Share.
• Defined clear navigation between code generation, accessibility validation, and preview modes.

Wireframing & Prototyping:

• Created low-fidelity wireframes in Figma to map dashboard layouts and user flows.
• Built high-fidelity prototypes demonstrating live code previews and validation prompts.
• Introduced a contextual sidebar for instant WCAG references and AI-driven suggestions.

Visual Design:

• Developed AccessiBoard’s visual identity using a purple-to-navy gradient (#6E318D → #091A65) to symbolize innovation and trust.
• Applied bold white Arial typography for clarity on dark backgrounds.
• Integrated a modular component layout for dashboard flexibility across viewports.

Development Collaboration:

• Partnered with React and Supabase developers to explore MVP functionality for real-time code generation.
• Implemented Google Tag Manager event tracking for custom GA4 reporting within Looker Studio.
• Prioritized Canadian hosting (for privacy compliance) and future CMS plugin integration (WordPress, Drupal, Ghost).

Outcomes & Impact

• Prototype Reception: Early testers praised the platform’s approachable workflow and visual feedback.
• Investor Interest: AccessiBoard’s differentiators – AI integration, real-user validation, and design-first accessibility – attracted multiple developer and investor inquiries.
• Brand Recognition: Established a cohesive, professional identity consistent across dashboard, marketing, and pitch materials.

Reflections & Learnings

• Challenges: Balancing AI automation with credible human-tested accessibility insights required careful scope planning.
• Successes: The Build-Validate-Share model simplified complex WCAG processes into actionable steps.
• Future Improvements: Expanding to a plugin ecosystem and introducing user accounts for saving projects and shared audits.

Conclusion

AccessiBoard transforms accessibility from an afterthought into an integrated part of the creative process. By uniting design, code, and compliance in one dashboard, it empowers teams to create inclusive digital experiences – efficiently, confidently, and beautifully.

Duration: October 2025 – Present
Role: Lead UX/UI Designer & Digital Strategy
Team: Collaboration with CANARIE Communications, Cybersecurity Programs, and Web Development teams
Objective: To redesign the existing CANARIE website using similar design systems whilst ensuring accessibility for users

The Challenge

CANARIE, Canada’s national research and education network (NREN) organization, needed a website refresh that better reflected its dual mission: connecting Canada’s research institutions to the global network and advancing cybersecurity initiatives nationwide.

The previous site lacked cohesive structure, visual consistency, and accessibility alignment. The goal was to design a WCAG 2.2-compliant, user-centered platform that communicates CANARIE’s complex programs in an approachable way while maintaining credibility and modern appeal.

Key challenges included:

• Fragmented content hierarchy and navigation.
• Limited accessibility in contrast and heading structure.
• Inconsistent brand implementation across sub-pages.
• Need to showcase multiple audiences (researchers, institutions, cybersecurity professionals) without overwhelming users.

Research & Strategy

Stakeholder Interviews: Conducted sessions with internal teams and external NREN partners to understand informational priorities, tone, and use cases.

Content Audit: Mapped existing pages and user flows to identify redundancies and restructure the information architecture around three main pillars: Programs, Membership, and Cybersecurity.

Accessibility Benchmarking: Compared CANARIE’s website with accessible cybersecurity leaders such as Barracuda Networks and Secureworks to inform contrast ratios, keyboard navigation flow, and readability standards .

Strategic Goals:

• Improve accessibility and content discoverability.
• Modernize the brand with a research-driven visual identity.
• Enhance trust and clarity in cybersecurity communications.
• Simplify pathways for researchers and institutions to access programs and funding information.

UI Design & Accessibility

Visual System:
The redesign applied CANARIE’s color palette (teal, navy, and charcoal) with enhanced contrast levels for readability. Typography was modernized with a sans-serif system for consistent line spacing and legibility.

Responsive Design:
Layouts were built to adapt seamlessly from desktop to mobile, ensuring interactive elements meet target size and keyboard focus requirements.

Inclusive Design Features:

• High-contrast toggle and scalable typography.
• Alt text and clear visual hierarchy for screen readers.
• Structured headings (H1–H6) to ensure semantic flow.
• Translations integrated for bilingual content.

Outcome & Impact

• Accessibility: Website rebuilt to align with WCAG 2.2 AA compliance.
• User Experience: Simplified navigation reduced average click depth by 40%.
• Engagement: Newsletter sign-ups increased after introducing an accessible “Subscribe” call-to-action and restructured News section.
• Brand Alignment: Consistent application of CANARIE’s identity across cybersecurity and research content.

Reflection & Learnings

• Collaboration across technical, content, and accessibility teams was critical to balancing aesthetics and compliance.
• Early integration of accessibility testing in wireframes prevented costly design revisions later.
• The use of AI-assisted wireframing (Visily) streamlined ideation and stakeholder review without compromising inclusivity.

Conclusion

The redesigned CANARIE website unites research, cybersecurity, and innovation under a clear, accessible, and modern interface. By integrating human-centered design with accessibility standards, the platform now supports CANARIE’s mission to connect Canada’s research and education communities to the world.

Duration: August – September 2024
Role: Lead Product Designer (UX/UI)
Team: Collaborated with AFN Environment Sector, Impact Assessment Agency of Canada (IAAC), and technical developers
Objective: To design an accessible and informative digital platform for the AFN’s webinar series, facilitating First Nations’ engagement in discussions on federal impact assessment policies

The Challenge

The AFN aimed to host a series of webinars to discuss critical topics like the federal impact assessment “Project List” and Indigenous co-administration of assessments. The challenge was to create a digital experience that:

• Ensured accessibility for First Nations leadership and technicians across diverse regions.
• Provided clear navigation to webinar schedules, materials, and registration links.
• Facilitated feedback collection to inform AFN’s recommendations.

Research & Insights

User Research:

• Conducted interviews with First Nations representatives to understand their needs and technical capabilities.
• Identified barriers such as limited internet connectivity and varying levels of digital literacy.

Key Insights:

• Users required a straightforward, low-bandwidth platform.
• Clear labeling and organization of materials were essential for ease of access.
• Mobile compatibility was crucial due to varying device usage.

Design Process

Information Architecture:

• Structured content into intuitive categories: Webinar Schedule, Background & Objectives, Materials, and IAAC Engagement Materials.

Wireframing & Prototyping:

• Developed low-fidelity wireframes focusing on simplicity and clarity.
• Created interactive prototypes to test navigation flow and content accessibility.

Visual Design:

• Adopted AFN’s branding elements to maintain consistency.
• Ensured high contrast and readable typography for accessibility.

Development Collaboration:

• Worked closely with developers to implement responsive design and optimize load times.

Outcomes & Impact

• User Engagement: Achieved a 40% increase in webinar registrations compared to previous events.
• Accessibility: Received positive feedback on the platform’s ease of use and accessibility.
• Feedback Collection: Streamlined the process for participants to provide input, enhancing the quality of AFN’s recommendations.

Reflections & Learnings

• Challenges: Balancing comprehensive content with simplicity required iterative testing and user feedback.
• Successes: Early user involvement was key to identifying and addressing potential barriers.
• Future Improvements: Implementing multilingual support to cater to diverse linguistic needs.

Conclusion

This project underscored the importance of user-centered design in creating accessible digital platforms. By prioritizing the needs of First Nations communities, the AFN Impact Assessment Webinar Series successfully facilitated meaningful engagement and informed policy recommendations.

• Save the Dates
• Agenda
• Fillable Registration Forms

Duration: June – November 2024

Role: Lead Product Designer (UX/UI)

Team: Collaborated with AFN Environment Sector, Impact Assessment Agency of Canada (IAAC), and technical developers

Objective: Design an accessible and informative digital platform for the AFN’s webinar series, facilitating First Nations’ engagement in discussions on federal impact assessment policies.

Project Overview:
The AFN aimed to host a series of webinars to discuss critical topics such as the federal impact assessment “Project List” and Indigenous co-administration of assessments. The goal was to create a digital experience that ensured accessibility for First Nations leadership and technicians across diverse regions, provided clear navigation to webinar schedules, materials, and registration links, and facilitated feedback collection to inform AFN’s recommendations.

Research & Insights:
User research involved interviews with First Nations representatives to understand their needs and technical capabilities. Key insights included the necessity for a straightforward, low-bandwidth platform, clear labeling and organization of materials for ease of access, and mobile compatibility due to varying device usage.

Design Process:
The information architecture was structured into intuitive categories: Webinar Schedule, Background & Objectives, Materials, and IAAC Engagement Materials. Low-fidelity wireframes focusing on simplicity and clarity were developed, followed by interactive prototypes to test navigation flow and content accessibility. Visual design adopted AFN’s branding elements to maintain consistency, ensuring high contrast and readable typography for accessibility. Collaboration with developers ensured responsive design and optimized load times.

Outcomes & Impact:
The project achieved a 40% increase in webinar registrations compared to previous events. Feedback highlighted the platform’s ease of use and accessibility. The streamlined process for participants to provide input enhanced the quality of AFN’s recommendations.

Reflections & Learnings:
Balancing comprehensive content with simplicity required iterative testing and user feedback. Early user involvement was key to identifying and addressing potential barriers. Future improvements could include implementing multilingual support to cater to diverse linguistic needs.

Conclusion:
This project underscored the importance of user-centered design in creating accessible digital platforms. By prioritizing the needs of First Nations communities, the AFN Impact Assessment Webinar Series successfully facilitated meaningful engagement and informed policy recommendations.

• Save the Dates
• AccessAbility Poster

Project Duration: November 2020 – January 2021

Role: Lead Product Designer (UX/UI)

Team: Working with 20Eight Digital as a freelancer alongside Canadian Health Team

Project Overview

In 2020, amidst the COVID-19 pandemic, the Canadian Health Team launched an e-commerce platform to provide the public with access to certified medical-grade masks. The website aimed to address the urgent need for reliable personal protective equipment (PPE) by offering a user-friendly interface that facilitated easy browsing and purchasing.

Objectives

• Develop a responsive and accessible website to sell Health Canada-approved medical-grade masks.
• Ensure a seamless user experience that instills trust and encourages purchases.
• Provide clear information about mask specifications, certifications, and usage guidelines.
• Optimize the website for high traffic volumes and efficient order processing.

Design and Development Approach

• User-Centric Design: Implemented a clean and intuitive layout with straightforward navigation, ensuring users could easily find and purchase products.
• Visual Hierarchy: Utilized high-quality images and clear typography to highlight essential information and product features.
• Trust Signals: Displayed certifications and compliance information prominently to reassure customers of product authenticity and quality.
• Mobile Optimization: Ensured the website was fully responsive, providing a consistent experience across all devices.
• Scalable Infrastructure: Built the platform to handle increased demand, particularly during peak periods of the pandemic.

Impact

• Successfully met the increased demand for medical-grade masks during the pandemic, providing a reliable source for individuals and organizations.
• Enhanced public trust through transparent information and certified products.
• Contributed to public health efforts by facilitating access to essential PPE.

Conclusion

This project underscored the importance of agility and user-focused design in crisis response scenarios. By prioritizing clarity, trustworthiness, and accessibility, the website effectively served its purpose during a critical time.