Government Website Revamp for Accessibility and Usability
Government Website Revamp for Accessibility and Usability
Government Website Revamp for Accessibility and Usability
OVERVIEW
In early 2024, the Hong Kong government launched a competitive public tender to revitalize The Hong Kong Council for Testing and Certification (HKCTC) brand through a complete website overhaul. The goal was to better align their digital presence with innovation, trust, and a forward-thinking ethos. Our team was awarded the 9-month contract, and as the project's core UX/UI designer, I was tasked with solving the key usability and accessibility challenges. This case study documents the design process, from identifying the core problems to delivering the final, impactful solution.
TEAM
1 Design Lead, 2 Developers
MY ROLE
As the core UX/UI Designer, I owned the end-to-end redesign, from redefining the information architecture, building the design system from scratch, and collaborating with developers on implementation, ensuring WCAG compliance.
TIMELINE
9 months (2024-2025)
RESULT
Achieved 100% Task Success Rate in User Acceptance Testing (UAT).
Delivered a fully WCAG 2.1 AA Compliant platform.
Unified 60+ pages by creating a design system with 20+ reusable components.
ABout the user
The HKCTC’s digital audience encompasses a broad spectrum of individuals, ranging from the casually curious to the deeply invested professional. On one end, we have the general public and students, who approach the site with an exploratory mindset—seeking to understand the council's societal impact or to find resources for their career journey.
On the other end are the specialists. This group is composed of T&C practitioners who need to retrieve technical data with maximum efficiency, and T&C service users (businesses) who look for a clear, guiding hand to lead them through the complexities of the accreditation process.
the challenge
The HKCTC website was failing its core mission to "Enhance Public Trust." To understand the depth of the problem, we leveraged initial brand research conducted by the research team in SD Plus, which included interviews and design workshops with key user groups.
This qualitative data was alarming. Users felt the site was "untrustworthy" and "too complicated." Two quotes captured the sentiment perfectly:
My task was to translate this high-level frustration into a concrete design diagnosis. I analyzed the existing platform and identified four core failures that were causing this breakdown in trust and usability:
#1 Visual & Design Decay
The decade-old visual design immediately eroded user trust. A chaotic mix of inconsistent colors, typography, and cards created a fragmented, unprofessional impression.
#2 Navigational Collapse
The navigation had collapsed. An overcrowded menu (>12 items) caused choice paralysis, while a lack of secondary navigation created dead ends and forced users to restart.
#3 Crippling Usability Issues
Critical usability flaws, most notably a lack of responsive design, alienated mobile users. Vague and unclear CTA buttons left users guessing their next steps.
#4 Information Overload
Key information was buried in dense "walls of text" with no visual hierarchy. Excessive, repetitive banners led to banner blindness, causing users to ignore important content.
Old website (Homepage)
Old website (Content Page)
Navigating Real-World Constraints
Beyond the core UX failures, we navigated few significant project complexities that shaped our design strategy.
Government Technical Mandates
The project was bound by strict, non-negotiable government standards for security and accessibility (e.g., WCAG 2.1). This meant every design decision, from component choice to user flow, had to meet these technical criteria from the outset, forcing a "compliance-by-design" approach.
Trilingual Interface Requirement
The interface required seamless functionality in English, Traditional, and Simplified Chinese. This challenged us to create flexible, adaptive layouts that could accommodate varying character lengths and reading patterns without compromising usability for any audience.
Client-Specific Technical Hurdles
The client's mandated hero video was technically incompatible with the responsive layout. Rather than state the limitation, I proactively designed and presented three distinct visual solutions. This empowered the client to make an informed decision, turning a technical problem into a key moment of collaboration that strengthened our partnership.
Mid-Project Rebranding
An external team began a complete rebranding after 40% of our prototypes were complete. To mitigate risks from a mid-project rebranding,I proactively liaised with the new brand team for continuous updates. This allowed me to adapt the design system in real-time, preventing major rework and keeping the project on track.
OUR STRATEGIC APPROACH
To navigate these complexities, I first focused on proactive communication and expectation management to stabilise the project timeline. With that stability secured, we executed a design strategy built on three core pillars that focus on the issues:
Persona-Driven Architecture
We created dedicated journeys for key audiences, replacing a 'one-size-fits-all' model to simplify navigation and deliver relevant content instantly.
Modular & Thematic Design
A modular design system let us re-skin the site in days, de-risking the mid-project rebrand and safeguarding the timeline.
Compliance by Design
Accessibility was foundational, not a final check. Every component was built to be WCAG 2.1 AA compliant from the start, eliminating rework.
THE Design Decisions
Our design process was a direct execution of our three strategic pillars.
#1 Redefining the Information Architecture
The original site had over 12 top-level navigation items, creating a confusing and overwhelming experience for users. Through card sorting and user analysis to streamline the user needs and client requirements, I consolidated the complex structure into 6 intuitive, user-centric categories. This new, simplified IA proves that users can now find what they need quickly and without frustration.
#2 Building a design system
To ensure consistency and streamline collaboration between myself and the initial development team, a standardised system was essential. I designed and documented a foundational design system from the ground up within Figma. This included the core visual language and a library of 20+ reusable, responsive components.
This system served as the single source of truth for the core project team, dramatically increasing our development efficiency and ensuring we could deliver a high-quality, unified experience for the
#3 From a 'One-Size-Fits-All' to a 'Persona-Driven' Experience
The 'one-size-fits-all' homepage was failing everyone. To solve this, my strategy was to design dedicated landing pages for our primary user personas. This allows us to deliver highly relevant content instantly. For example:
For 'Educators & Students': The journey became visual and action-oriented, focusing on engagement through STEM resources, competitions, and courses.
For 'T&C Practitioners': The journey was streamlined for efficiency, providing direct access to critical content like industry support, publications, and funding.
The impact is a transformed user journey—from frustration and searching to purpose and discovery. Each audience now has a clear, relevant, and efficient path to their goals, directly solving the core usability failure of the original site.
#4 From Walls of Text to Scannable Insights
To combat the user pain point of "too much and too complex information," we implemented a progressive disclosure strategy. We introduced "Key Takeaways" and expandable accordions, allowing users to scan a high-level overview first and delve into details only when interested. This approach significantly reduced cognitive load.
Furthermore, we transformed static data tables into interactive visualisations to minimise user effort. The strategy proved highly effective, cutting the average page scrolls from six to four and confirming a more efficient user experience.
#5 Design for Accessibility (WCAG Compliance)
I took a multi-faceted approach for accessibility, implementing structural, navigational, and visual enhancements to create a truly inclusive and effortless user experience.
#6 Cohesive Experience on Any Device
We started with the desktop view to structure the site's complex information first. From there, we adapted the design for mobile and tablet, prioritizing key content to create a clear and focused experience. This ensures the layout intelligently reflows to be usable on any device.
FInal design
Measurable Outcomes & Impact
The redesigned website successfully transformed the user experience, validated by rigorous testing and achieving full compliance with the highest standards.
100%
Core Task Success
8.0/10
User Satisfaction Score
WCAG 2.1 AA |
Validated Compliance
These results were driven by key design improvements that directly addressed user pain points:
~33% Reduction in Scrolling. A streamlined information architecture enabled users to find information significantly faster.
0 Users Confused Improved content clarity eliminated confusion from outdated or duplicated content.
To ensure the highest standards, our design was rigorously validated by two expert third-party agencies:
Usability & Satisfaction (Cido): All user feedback and quantitative metrics, including the 8.0/10 satisfaction score, were gathered from 8 one-on-one, moderated UAT sessions conducted with the research agency Cido.
Accessibility Compliance (Gate): Full WCAG 2.1 AA compliance was independently validated by Gate, a social enterprise under the Hong Kong Blind Union. Their comprehensive audit involved testers who are blind using screen readers to successfully navigate over 60 pages of the live website, confirming a truly accessible experience.
Reflection & Future Outlook
This project was a pivotal moment in my growth, forcing a shift from a design implementer to a proactive problem-solver and leader. My greatest challenge and proudest achievement came when my design lead departed mid-project. As the person most familiar with the project's history and the "why" behind every decision, I stepped up to become the bridge for our new team members. I took ownership of onboarding our new lead, designer and developers, guiding them through the design system, and ensuring the project's vision and quality remained consistent. This experience taught me to communicate design with a new level of clarity and to be the anchor for a team in transition:
1. Design is Communication, Not Just Pixels. I learned that in a large public project, the biggest challenge isn't the design tool, but aligning diverse stakeholders. A "perfect" design is useless if it can't get buy-in. My role quickly expanded beyond Figma to using prototypes and clear design rationales as tools to build trust, guide discussions, and achieve consensus.
2. Accessibility is a Driver of Innovation. I moved from viewing WCAG as a technical checklist to understanding it as a source of user-centric innovation. I saw firsthand that designing for "extreme users" benefits everyone: a clear heading structure for screen readers also made content easier to scan for all users, and high-contrast colors improved readability for everyone in bright sunlight.
3. The Launch is the Starting Line, Not the Finish. Our internal Figma system worked flawlessly for the project team and ensured a successful launch. However, its value was diminished by the lack of a formal "knowledge transfer" process during the handoff to the maintenance team. This experience made me fully understand that if a design system isn't "productized"—meaning clearly documented so anyone can use it—it cannot survive the test of time and team changes. As a result, creating a clear "user manual" for my designs has shifted from being a "nice-to-have" to a "non-negotiable" part of my workflow.
OVERVIEW
In early 2024, the Hong Kong government launched a competitive public tender to revitalize The Hong Kong Council for Testing and Certification (HKCTC) brand through a complete website overhaul. The goal was to better align their digital presence with innovation, trust, and a forward-thinking ethos. Our team was awarded the 9-month contract, and as the project's core UX/UI designer, I was tasked with solving the key usability and accessibility challenges. This case study documents the design process, from identifying the core problems to delivering the final, impactful solution.
TEAM
1 Design Lead, 2 Developers
MY ROLE
As the core UX/UI Designer, I owned the end-to-end redesign, from redefining the information architecture, building the design system from scratch, and collaborating with developers on implementation, ensuring WCAG compliance.
TIMELINE
9 months (2024-2025)
RESULT
Achieved 100% Task Success Rate in User Acceptance Testing (UAT).
Delivered a fully WCAG 2.1 AA Compliant platform.
Unified 60+ pages by creating a design system with 20+ reusable components.
ABout the user
The HKCTC’s digital audience encompasses a broad spectrum of individuals, ranging from the casually curious to the deeply invested professional. On one end, we have the general public and students, who approach the site with an exploratory mindset—seeking to understand the council's societal impact or to find resources for their career journey.
On the other end are the specialists. This group is composed of T&C practitioners who need to retrieve technical data with maximum efficiency, and T&C service users (businesses) who look for a clear, guiding hand to lead them through the complexities of the accreditation process.
the challenge
The HKCTC website was failing its core mission to "Enhance Public Trust." To understand the depth of the problem, we leveraged initial brand research conducted by the research team in SD Plus, which included interviews and design workshops with key user groups.
This qualitative data was alarming. Users felt the site was "untrustworthy" and "too complicated." Two quotes captured the sentiment perfectly:
My task was to translate this high-level frustration into a concrete design diagnosis. I analyzed the existing platform and identified four core failures that were causing this breakdown in trust and usability:
#1 Visual & Design Decay
The decade-old visual design immediately eroded user trust. A chaotic mix of inconsistent colors, typography, and cards created a fragmented, unprofessional impression.
#2 Navigational Collapse
The navigation had collapsed. An overcrowded menu (>12 items) caused choice paralysis, while a lack of secondary navigation created dead ends and forced users to restart.
#3 Crippling Usability Issues
Critical usability flaws, most notably a lack of responsive design, alienated mobile users. Vague and unclear CTA buttons left users guessing their next steps.
#4 Information Overload
Key information was buried in dense "walls of text" with no visual hierarchy. Excessive, repetitive banners led to banner blindness, causing users to ignore important content.
Old website (Homepage)
Old website (Content Page)
Navigating Real-World Constraints
Beyond the core UX failures, we navigated few significant project complexities that shaped our design strategy.
Government Technical Mandates
The project was bound by strict, non-negotiable government standards for security and accessibility (e.g., WCAG 2.1). This meant every design decision, from component choice to user flow, had to meet these technical criteria from the outset, forcing a "compliance-by-design" approach.
Trilingual Interface Requirement
The interface required seamless functionality in English, Traditional, and Simplified Chinese. This challenged us to create flexible, adaptive layouts that could accommodate varying character lengths and reading patterns without compromising usability for any audience.
Client-Specific Technical Hurdles
The client's mandated hero video was technically incompatible with the responsive layout. Rather than state the limitation, I proactively designed and presented three distinct visual solutions. This empowered the client to make an informed decision, turning a technical problem into a key moment of collaboration that strengthened our partnership.
Mid-Project Rebranding
An external team began a complete rebranding after 40% of our prototypes were complete. To mitigate risks from a mid-project rebranding,I proactively liaised with the new brand team for continuous updates. This allowed me to adapt the design system in real-time, preventing major rework and keeping the project on track.
OUR STRATEGIC APPROACH
To navigate these complexities, I first focused on proactive communication and expectation management to stabilise the project timeline. With that stability secured, we executed a design strategy built on three core pillars that focus on the issues:
Persona-Driven Architecture
We created dedicated journeys for key audiences, replacing a 'one-size-fits-all' model to simplify navigation and deliver relevant content instantly.
Modular & Thematic Design
A modular design system let us re-skin the site in days, de-risking the mid-project rebrand and safeguarding the timeline.
Compliance by Design
Accessibility was foundational, not a final check. Every component was built to be WCAG 2.1 AA compliant from the start, eliminating rework.
THE Design Decisions
Our design process was a direct execution of our three strategic pillars.
#1 Redefining the Information Architecture
The original site had over 12 top-level navigation items, creating a confusing and overwhelming experience for users. Through card sorting and user analysis to streamline the user needs and client requirements, I consolidated the complex structure into 6 intuitive, user-centric categories. This new, simplified IA proves that users can now find what they need quickly and without frustration.
#2 Building a design system
To ensure consistency and streamline collaboration between myself and the initial development team, a standardised system was essential. I designed and documented a foundational design system from the ground up within Figma. This included the core visual language and a library of 20+ reusable, responsive components.
This system served as the single source of truth for the core project team, dramatically increasing our development efficiency and ensuring we could deliver a high-quality, unified experience for the
#3 From a 'One-Size-Fits-All' to a 'Persona-Driven' Experience
The 'one-size-fits-all' homepage was failing everyone. To solve this, my strategy was to design dedicated landing pages for our primary user personas. This allows us to deliver highly relevant content instantly. For example:
For 'Educators & Students': The journey became visual and action-oriented, focusing on engagement through STEM resources, competitions, and courses.
For 'T&C Practitioners': The journey was streamlined for efficiency, providing direct access to critical content like industry support, publications, and funding.
The impact is a transformed user journey—from frustration and searching to purpose and discovery. Each audience now has a clear, relevant, and efficient path to their goals, directly solving the core usability failure of the original site.
#4 From Walls of Text to Scannable Insights
To combat the user pain point of "too much and too complex information," we implemented a progressive disclosure strategy. We introduced "Key Takeaways" and expandable accordions, allowing users to scan a high-level overview first and delve into details only when interested. This approach significantly reduced cognitive load.
Furthermore, we transformed static data tables into interactive visualisations to minimise user effort. The strategy proved highly effective, cutting the average page scrolls from six to four and confirming a more efficient user experience.
#5 Design for Accessibility (WCAG Compliance)
I took a multi-faceted approach for accessibility, implementing structural, navigational, and visual enhancements to create a truly inclusive and effortless user experience.
#6 Cohesive Experience on Any Device
We started with the desktop view to structure the site's complex information first. From there, we adapted the design for mobile and tablet, prioritizing key content to create a clear and focused experience. This ensures the layout intelligently reflows to be usable on any device.
FInal design
Measurable Outcomes & Impact
The redesigned website successfully transformed the user experience, validated by rigorous testing and achieving full compliance with the highest standards.
100%
Core Task Success
8.0/10
User Satisfaction Score
WCAG 2.1 AA |
Validated Compliance
These results were driven by key design improvements that directly addressed user pain points:
~33% Reduction in Scrolling. A streamlined information architecture enabled users to find information significantly faster.
0 Users Confused Improved content clarity eliminated confusion from outdated or duplicated content.
To ensure the highest standards, our design was rigorously validated by two expert third-party agencies:
Usability & Satisfaction (Cido): All user feedback and quantitative metrics, including the 8.0/10 satisfaction score, were gathered from 8 one-on-one, moderated UAT sessions conducted with the research agency Cido.
Accessibility Compliance (Gate): Full WCAG 2.1 AA compliance was independently validated by Gate, a social enterprise under the Hong Kong Blind Union. Their comprehensive audit involved testers who are blind using screen readers to successfully navigate over 60 pages of the live website, confirming a truly accessible experience.
Reflection & Future Outlook
This project was a pivotal moment in my growth, forcing a shift from a design implementer to a proactive problem-solver and leader. My greatest challenge and proudest achievement came when my design lead departed mid-project. As the person most familiar with the project's history and the "why" behind every decision, I stepped up to become the bridge for our new team members. I took ownership of onboarding our new lead, designer and developers, guiding them through the design system, and ensuring the project's vision and quality remained consistent. This experience taught me to communicate design with a new level of clarity and to be the anchor for a team in transition:
1. Design is Communication, Not Just Pixels. I learned that in a large public project, the biggest challenge isn't the design tool, but aligning diverse stakeholders. A "perfect" design is useless if it can't get buy-in. My role quickly expanded beyond Figma to using prototypes and clear design rationales as tools to build trust, guide discussions, and achieve consensus.
2. Accessibility is a Driver of Innovation. I moved from viewing WCAG as a technical checklist to understanding it as a source of user-centric innovation. I saw firsthand that designing for "extreme users" benefits everyone: a clear heading structure for screen readers also made content easier to scan for all users, and high-contrast colors improved readability for everyone in bright sunlight.
3. The Launch is the Starting Line, Not the Finish. Our internal Figma system worked flawlessly for the project team and ensured a successful launch. However, its value was diminished by the lack of a formal "knowledge transfer" process during the handoff to the maintenance team. This experience made me fully understand that if a design system isn't "productized"—meaning clearly documented so anyone can use it—it cannot survive the test of time and team changes. As a result, creating a clear "user manual" for my designs has shifted from being a "nice-to-have" to a "non-negotiable" part of my workflow.
OVERVIEW
In early 2024, the Hong Kong government launched a competitive public tender to revitalize The Hong Kong Council for Testing and Certification (HKCTC) brand through a complete website overhaul. The goal was to better align their digital presence with innovation, trust, and a forward-thinking ethos. Our team was awarded the 9-month contract, and as the project's core UX/UI designer, I was tasked with solving the key usability and accessibility challenges. This case study documents the design process, from identifying the core problems to delivering the final, impactful solution.
MY ROLE
As the core UX/UI Designer, I owned the end-to-end redesign, from redefining the information architecture, building the design system from scratch, and collaborating with developers on implementation, ensuring WCAG compliance.
RESULT
Achieved 100% Task Success Rate in User Acceptance Testing (UAT).
Delivered a fully WCAG 2.1 AA Compliant platform.
Unified 60+ pages by creating a design system with 20+ reusable components.
TIMELINE
9 months (2024-2025)
TEAM
1 Design Lead, 2 Developers
ABout the user
The HKCTC’s digital audience encompasses a broad spectrum of individuals, ranging from the casually curious to the deeply invested professional. On one end, we have the general public and students, who approach the site with an exploratory mindset—seeking to understand the council's societal impact or to find resources for their career journey.
On the other end are the specialists. This group is composed of T&C practitioners who need to retrieve technical data with maximum efficiency, and T&C service users (businesses) who look for a clear, guiding hand to lead them through the complexities of the accreditation process.
the challenge
The HKCTC website was failing its core mission to "Enhance Public Trust." To understand the depth of the problem, we leveraged initial brand research conducted by the research team in SD Plus, which included interviews and design workshops with key user groups.
This qualitative data was alarming. Users felt the site was "untrustworthy" and "too complicated." Two quotes captured the sentiment perfectly:
My task was to translate this high-level frustration into a concrete design diagnosis. I analyzed the existing platform and identified four core failures that were causing this breakdown in trust and usability:
#1 Visual & Design Decay
The decade-old visual design immediately eroded user trust. A chaotic mix of inconsistent colors, typography, and cards created a fragmented, unprofessional impression.
#2 Navigational Collapse
The navigation had collapsed. An overcrowded menu (>12 items) caused choice paralysis, while a lack of secondary navigation created dead ends and forced users to restart.
#3 Crippling Usability Issues
Critical usability flaws, most notably a lack of responsive design, alienated mobile users. Vague and unclear CTA buttons left users guessing their next steps.
#4 Information Overload
Key information was buried in dense "walls of text" with no visual hierarchy. Excessive, repetitive banners led to banner blindness, causing users to ignore important content.
Old website (Homepage)
Old website (Content Page)
Navigating Real-World Constraints
Beyond the core UX failures, we navigated few significant project complexities that shaped our design strategy.
Government Technical Mandates
The project was bound by strict, non-negotiable government standards for security and accessibility (e.g., WCAG 2.1). This meant every design decision, from component choice to user flow, had to meet these technical criteria from the outset, forcing a "compliance-by-design" approach.
Trilingual Interface Requirement
The interface required seamless functionality in English, Traditional, and Simplified Chinese. This challenged us to create flexible, adaptive layouts that could accommodate varying character lengths and reading patterns without compromising usability for any audience.
Client-Specific Technical Hurdles
The client's mandated hero video was technically incompatible with the responsive layout. Rather than state the limitation, I proactively designed and presented three distinct visual solutions. This empowered the client to make an informed decision, turning a technical problem into a key moment of collaboration that strengthened our partnership.
Mid-Project Rebranding
An external team began a complete rebranding after 40% of our prototypes were complete. To mitigate risks from a mid-project rebranding,I proactively liaised with the new brand team for continuous updates. This allowed me to adapt the design system in real-time, preventing major rework and keeping the project on track.
OUR STRATEGIC APPROACH
To navigate these complexities, I first focused on proactive communication and expectation management to stabilise the project timeline. With that stability secured, we executed a design strategy built on three core pillars that focus on the issues:
Persona-Driven Architecture
We created dedicated journeys for key audiences, replacing a 'one-size-fits-all' model to simplify navigation and deliver relevant content instantly.
Modular & Thematic Design
A modular design system let us re-skin the site in days, de-risking the mid-project rebrand and safeguarding the timeline.
Compliance by Design
Accessibility was foundational, not a final check. Every component was built to be WCAG 2.1 AA compliant from the start, eliminating rework.
THE Design Decisions
Our design process was a direct execution of our three strategic pillars.
#1 Redefining the Information Architecture
The original site had over 12 top-level navigation items, creating a confusing and overwhelming experience for users. Through card sorting and user analysis to streamline the user needs and client requirements, I consolidated the complex structure into 6 intuitive, user-centric categories. This new, simplified IA proves that users can now find what they need quickly and without frustration.
#2 Building a design system
To ensure consistency and streamline collaboration between myself and the initial development team, a standardised system was essential. I designed and documented a foundational design system from the ground up within Figma. This included the core visual language and a library of 20+ reusable, responsive components.
This system served as the single source of truth for the core project team, dramatically increasing our development efficiency and ensuring we could deliver a high-quality, unified experience for the
#3 From a 'One-Size-Fits-All' to a 'Persona-Driven' Experience
The 'one-size-fits-all' homepage was failing everyone. To solve this, my strategy was to design dedicated landing pages for our primary user personas. This allows us to deliver highly relevant content instantly. For example:
For 'Educators & Students': The journey became visual and action-oriented, focusing on engagement through STEM resources, competitions, and courses.
For 'T&C Practitioners': The journey was streamlined for efficiency, providing direct access to critical content like industry support, publications, and funding.
The impact is a transformed user journey—from frustration and searching to purpose and discovery. Each audience now has a clear, relevant, and efficient path to their goals, directly solving the core usability failure of the original site.
#4 From Walls of Text to Scannable Insights
To combat the user pain point of "too much and too complex information," we implemented a progressive disclosure strategy. We introduced "Key Takeaways" and expandable accordions, allowing users to scan a high-level overview first and delve into details only when interested. This approach significantly reduced cognitive load.
Furthermore, we transformed static data tables into interactive visualisations to minimise user effort. The strategy proved highly effective, cutting the average page scrolls from six to four and confirming a more efficient user experience.
#5 Design for Accessibility (WCAG Compliance)
I took a multi-faceted approach for accessibility, implementing structural, navigational, and visual enhancements to create a truly inclusive and effortless user experience.
#6 Cohesive Experience on Any Device
We started with the desktop view to structure the site's complex information first. From there, we adapted the design for mobile and tablet, prioritizing key content to create a clear and focused experience. This ensures the layout intelligently reflows to be usable on any device.
FInal design
Measurable Outcomes & Impact
The redesigned website successfully transformed the user experience, validated by rigorous testing and achieving full compliance with the highest standards.
100%
Core Task Success
8.0/10
User Satisfaction Score
WCAG 2.1 AA |
Validated Compliance
These results were driven by key design improvements that directly addressed user pain points:
~33% Reduction in Scrolling. A streamlined information architecture enabled users to find information significantly faster.
0 Users Confused Improved content clarity eliminated confusion from outdated or duplicated content.
To ensure the highest standards, our design was rigorously validated by two expert third-party agencies:
Usability & Satisfaction (Cido): All user feedback and quantitative metrics, including the 8.0/10 satisfaction score, were gathered from 8 one-on-one, moderated UAT sessions conducted with the research agency Cido.
Accessibility Compliance (Gate): Full WCAG 2.1 AA compliance was independently validated by Gate, a social enterprise under the Hong Kong Blind Union. Their comprehensive audit involved testers who are blind using screen readers to successfully navigate over 60 pages of the live website, confirming a truly accessible experience.
Reflection & Future Outlook
This project was a pivotal moment in my growth, forcing a shift from a design implementer to a proactive problem-solver and leader. My greatest challenge and proudest achievement came when my design lead departed mid-project. As the person most familiar with the project's history and the "why" behind every decision, I stepped up to become the bridge for our new team members. I took ownership of onboarding our new lead, designer and developers, guiding them through the design system, and ensuring the project's vision and quality remained consistent. This experience taught me to communicate design with a new level of clarity and to be the anchor for a team in transition:
1. Design is Communication, Not Just Pixels. I learned that in a large public project, the biggest challenge isn't the design tool, but aligning diverse stakeholders. A "perfect" design is useless if it can't get buy-in. My role quickly expanded beyond Figma to using prototypes and clear design rationales as tools to build trust, guide discussions, and achieve consensus.
2. Accessibility is a Driver of Innovation. I moved from viewing WCAG as a technical checklist to understanding it as a source of user-centric innovation. I saw firsthand that designing for "extreme users" benefits everyone: a clear heading structure for screen readers also made content easier to scan for all users, and high-contrast colors improved readability for everyone in bright sunlight.
3. The Launch is the Starting Line, Not the Finish. Our internal Figma system worked flawlessly for the project team and ensured a successful launch. However, its value was diminished by the lack of a formal "knowledge transfer" process during the handoff to the maintenance team. This experience made me fully understand that if a design system isn't "productized"—meaning clearly documented so anyone can use it—it cannot survive the test of time and team changes. As a result, creating a clear "user manual" for my designs has shifted from being a "nice-to-have" to a "non-negotiable" part of my workflow.