Accelerating 15% Growth in Acquisition for Payment Solutions
[Project Overview]
Faced with a 40% cart abandonment rate, I redesigned the checkout flow to address user pain points. By simplifying the process, optimizing for mobile, and adding features.
MY ROLE
Lead Designer
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.
the challenage
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 a consistent, accessible, and high-quality experience across more than 60 pages, a standardised system was essential. I designed and documented a foundational design system from the ground up. This included defining the core visual language and building a library of reusable, responsive UI components (buttons, forms, navigation).
This system not only created a unified brand presence but also dramatically increased development efficiency and ensured the website would be easy to maintain and scale.
#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.
Measurable Outcomes & Impact
To validate our design, we partnered with a third-party agency (Cido) to conduct 8 one-on-one, moderated UAT sessions with a diverse mix of real users. Participants used a mix of laptops, tablets, and smartphones to complete core tasks, such as finding specific reports, registering for events, and submitting inquiries. The results quantitatively confirmed our success and provided rich qualitative feedback:
100%
Core task success rate
(UAT)
8.0/10
Overall User Satisfaction Score
(UAT)
Fully Compliant
with WCAG 2.1 AA standards
(Validated by Gate)
The redesigned website successfully transformed the user experience, validated by rigorous testing and achieving full compliance with the highest standards.
Streamlined Information Architecture
Led to a 33% reduction in scrolling, enabling users to find information faster and achieve a 100% task success rate.
Improved Content Clarity
0 users reported confusion from outdated or duplicated content, resolving a primary pain point.
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. While our UAT was successful, I realized it was only a snapshot in time. My immediate next step would be to implement analytics to track key metrics like "search failure rate" and "high-bounce-rate pages." This project cemented my belief that a product launch isn't the end; it's the beginning of a continuous, data-informed iteration cycle.