Trading volatility for structure
A system-first redesign of HKEX’s digital ecosystem—built to handle content variability at scale.
Background
A refresh of the group website for Hong Kong Exchanges and Clearing Limited (HKEX) — modernising the visual language and user experience across a content-heavy digital ecosystem spanning the homepage and core corporate pages, while supporting a shift towards more engaging and informative storytelling without compromising the trust and professionalism expected of a corporate institution.
The ecosystem spans a wide range of corporate content, owned by different departments, serving distinct audiences, and subject to frequent updates and evolving business needs.
Role
Experience Designer within a design team shaping the experience direction, interaction patterns, and scalable components, modules, and page templates within an evolving design system.
Timeline
January 2026 – June 2026
Core challenge
How might we refresh and modernise HKEX's digital ecosystem while creating a scalable design system that could accommodate evolving content, multiple audiences, and changing business needs before content approval?
Impact
Enabled parallel progress by decoupling design from content readiness
Translated content audits into tangible, reviewable page structures
Established a reusable, component-driven system across multiple page types
Reduced ambiguity for stakeholders by visualising content within structured layouts
Context & Stakes
As one of the world's leading exchange groups, HKEX operates a large digital ecosystem serving investors, listed issuers, regulators, media, and the wider public.
The project began as a refresh of HKEX's group website, modernising its visual language and user experience while supporting a shift towards more engaging and informative storytelling. The goal was not simply to create a more contemporary experience, but to do so without compromising the clarity, trust, and professionalism expected of a corporate institution.
The engagement spanned art direction exploration, content audit, and the redesign of key corporate pages. What began as a visual and experience refresh would eventually evolve into a broader challenge of designing for scale, flexibility, and change.
Before
Structure
System
The challenge was not simply to modernise the interface, but to uncover the underlying structure that could support a more cohesive and scalable digital ecosystem.
The Real Problem
While the visual and experience direction established a clear foundation for the refresh, the larger challenge emerged once the work moved into designing components, modules, and page structures.
Content remained under review while requirements continued to evolve across different audiences, intents, and business needs. This created a circular dependency: design needed approved content to move forward, while stakeholders needed design to properly evaluate and approve content.
The real problem was how to refresh and modernise HKEX's digital ecosystem while creating a scalable design system that could accommodate evolving content, multiple audiences, and changing business needs before content approval?
This required shifting the focus from designing individual pages to designing a system that could absorb uncertainty, variation, and change.
Key Challenges & Constraints
Several constraints shaped how the system could be designed and delivered:
Balancing modernity and professionalism
The refresh needed to introduce a more contemporary and engaging experience without compromising the clarity, trust, and professionalism expected of a corporate institution.
Evolving content
Content remained under review throughout the project, with requirements continuing to evolve as stakeholders refined what they wanted to communicate. Designing against fixed content was not possible.
Multiple audiences, different intents
Different sections served different audiences, goals, and content needs. The system needed to remain consistent while adapting to varying levels of depth, complexity, and purpose.
Designing for reuse
Components and patterns needed to work beyond a single page or section, reducing the need to create new solutions for every use case.
Extending an existing design system
Any additions needed to align with the existing design system and visual language, ensuring consistency while evolving the system.
Decision 1 —
Designing the strategy before designing the system
Decision 1
What we were facing
Before designing components, modules, or page structures, the team first needed to establish a visual and experience direction for the refresh.
HKEX wanted to modernise its digital ecosystem and adopt a more engaging, storytelling-driven experience. However, the challenge was not simply to make the website feel more contemporary. Any new direction still needed to maintain the clarity, trust, and professionalism expected of a corporate institution.
Decision 1
What we chose to do
To better understand the opportunity space, we first conducted an art direction exploration, drawing inspiration from how other corporate and financial organisations approached visual storytelling, information hierarchy, and digital experiences.
This exploration eventually converged into two distinct directions:
The Horizon
Clarity
Two contrasting directions emerged from the exploration — one prioritising storytelling and engagement, the other clarity and efficiency.
Placeholder
The Horizon
Clarity
Primary goal
Create engagement and emotional connection
Improve accessibility and information retrieval
Visual style
Rich imagery, vibrant colour palettes, expressive visuals
Restrained visuals, abstract brand assets, generous whitespace
Content presentation
Featured content sections and narrative-driven layouts that encourage exploration
Clear hierarchy and information-first layouts that surface key content immediately
User behaviour
Encourages discovery and exploration
Supports efficient navigation and comprehension
Experience qualities
Approachable, engaging, human
Professional, credible, trustworthy
While both directions offered distinct strengths, neither fully addressed the needs of HKEX's digital ecosystem. The challenge was not choosing one over the other, but understanding how elements from both could be combined into a direction that balanced storytelling with professionalism, engagement with clarity, and exploration with utility.
Decision 1
Synthesising a direction
Rather than choosing one direction over the other, we combined the strengths of both into a unified design strategy.
From a UX perspective, storytelling and utility were deliberately balanced throughout the experience. Narrative-led moments such as hero experiences, featured content, imagery, and visual storytelling sections were used to create engagement and emotional connection, while functional elements such as quick links, information access points, and structured content layouts ensured information remained accessible and easy to navigate.
The Horizon
Clarity
Unified design
The goal was not to choose between storytelling and clarity, but to determine where each could contribute most effectively to the experience.
From a UI perspective, the same principle of synthesis was applied to the visual language. Rather than adopting either fully rounded or fully squared treatments; vibrant colours or restrained visuals, we combined characteristics from both directions across key assets and components, creating a recognisable visual signature that balanced modernity with professionalism.
Horizon
Clarity
Synthesised visual language
The final visual language emerged through synthesis, combining selected characteristics from both explorations into a cohesive system of visual assets and components.
This approach allowed the refresh to feel more contemporary without losing the trust and credibility associated with the HKEX brand.
Decision 1
Defining content principles
With a visual and experience direction established, the next step was understanding how content could support that direction. To do this, we conducted a content audit across the ecosystem to identify recurring communication challenges and opportunities.
The audit revealed three recurring themes: different types of content were often experienced through similar interaction patterns despite serving different purposes, content serving different roles was not always easily distinguishable within content-rich pages, and complex information was not always communicated in formats that supported understanding.
Content audit observations
Monotonous content interaction
Different types of content require distinct ways of being experienced
Weak content recognisability
Different content types and pathways should be clearly distinguishable
Content complexity & format mismatch
Content formats should support how information is understood
Monotonous content interaction
Products and services require direct access, but are presented through the same carousel interaction as team profiles.
Weak content recognisability
Links are easier to miss at first glance as both modules appear visually similar.
Content complexity & format mismatch
Overview and reference content follow similar layouts despite supporting different user needs.
The content audit revealed recurring challenges around content interaction, recognisability, and comprehension, highlighting opportunities to improve how information was experienced across the ecosystem.
Rather than treating these as isolated findings, we consolidated them into a set of content design principles that would guide how different types of content should be experienced, distinguished, and understood across the ecosystem.
Audit findings
Content principles
Design applications
Monotonous content interaction
Context
Interaction models
Weak content recognisability
Distinction
Contrast & emphasis
Content complexity & format mismatch
Comprehension
Structure & user intent
The audit findings evolved into a set of content principles that guided how content should be experienced, recognised, and understood across the ecosystem.
These principles would later shape not only the design of components, modules, and templates, but also the usage patterns that determined how different types of content were experienced, differentiated, and understood across the ecosystem.
Decision 1
Why it mattered
Establishing a shared direction early ensured later design decisions could be made consistently and with greater confidence. Rather than evaluating pages, components, and layouts in isolation, the team could reference a common set of visual and content principles.
This provided a foundation for the system that followed, ensuring components, templates, and interaction patterns evolved from a coherent experience direction rather than a collection of disconnected design decisions.
Decision 2 —
Building flexible foundations to adapt to evolving content
Decision 2
What we were facing
One of the biggest challenges throughout the project was that content continued to evolve while design work was already underway. Content reviews, stakeholder approvals, and ongoing revisions meant that waiting for finalised content would delay delivery, while designing against incomplete content risked significant rework.
At the same time, the objective was not to replace the existing HKEX design system, but to extend it. New solutions needed to remain consistent with the existing foundation while accommodating a wide range of content needs across the ecosystem.
Decision 2
What we chose to do
Rather than designing around individual pages, we focused on creating a flexible foundation that could adapt as content evolved.
This required balancing completeness with simplicity, flexibility with consistency, and adaptability with delivery speed. The objective was not to predict every future content need, but to create a system capable of supporting change without requiring significant redesign.
The work focused on three levels: extending flexibility at the component level, extending flexibility at the module level, and applying the system across different contexts.
Decision 2
At the component level
At the component level
Designing for completeness
Because content was still evolving, extending existing components based only on approved content would have created a cycle of continuous rework whenever requirements changed.
Instead, components were designed around their most complete state first, accounting for additional metadata, content variations, and future requirements before simplifying where necessary.
This reduced dependency on finalised content and made future adaptations easier without requiring redesign.
Existing HKEX design
Extended complete design
The card component is shown as an example of how existing components were extended using a completeness-first approach, allowing simpler variations to be created through reduction rather than redesign.
At the component level
Building for flexibility
Rather than creating separate components for every scenario, component families were designed around shared structures that could support different content needs while maintaining consistency.
Visual storytelling
Default presentation for content with supporting imagery
Functional content
When imagery is unavailable or unnecessary
Prioritise information
When information should take precedence over visuals
Richer narrative
For testimonial and media-driven content
Elevate important content
For featured stories, announcements, or initiatives requiring greater visibility
Decision 2
At the module level
At the module level
Designing for completeness
Where existing modules did not exist, new modules were assembled using established design system components such as typography, buttons, imagery, and layout patterns.
These modules were designed around their most complete scenario first, ensuring they could accommodate evolving content requirements while remaining consistent with the broader system.
Existing HKEX design
Body/Regular 16px
Body/Subscript 12px
Extended complete design
The side-image module is shown as an example of how new modules were assembled from existing design system components, allowing new capabilities without introducing a separate design language.
At the module level
Building for flexibility
Rather than relying on a single content layout, module variants were introduced to support different communication goals while remaining part of the same underlying system.
Visual storytelling
Default content presentation
Direct information access
For content with multiple destinations
Focused messaging
For introducing key themes and context
For adapting the same module structure to different visual and layout contexts without creating new modules.
Decision 2
Applying the system across different contexts
The true test of flexibility was whether the system could support different content needs without introducing new patterns.
By combining reusable components and modules, the same system could adapt across pages with very different communication goals while remaining visually and structurally consistent.
Side-image module
Visual storytelling variant (L), focused messaging variant (R)
Card grid module
White background 3 card variant (L), blue background 2 card variant (R)
Banner module
Image-left variant (L), image-right variant (R)
The same components and modules were reused across different contexts, adapting to varying content needs while preserving a consistent design language.
Decision 2
Why it mattered
Without a flexible foundation, every content change would risk introducing additional design work, inconsistency, or bespoke solutions.
By designing for completeness and flexibility at both the component and module level, the system could evolve alongside content while remaining scalable and coherent. This reduced rework, supported parallel content development, and provided a stronger foundation for the usage patterns established in the next decision.
Decision 3 —
Establishing usage patterns to define how content should be identified, accessed, and understood
Decision 3
What we were facing
While Decision 2 established a flexible system of components, modules, and templates, flexibility alone was not enough. Without clear guidance, the same building blocks could be used inconsistently across the ecosystem.
The content audit revealed recurring challenges around content interaction, recognisability, and comprehension. Different types of content often required different ways of being experienced, distinguished, and understood. The challenge was not only creating a system that could adapt to content, but also establishing guidelines that could help determine how that system should be used.
Decision 3
What we chose to do
Rather than prescribing fixed page structures, we established a set of usage patterns that translated the content principles into practical design guidance.
These guidelines helped determine how content should be interacted with, distinguished, and structured based on its purpose, role, and information needs. This ensured that decisions could remain consistent even as content evolved over time.
The guidance ultimately focused on three areas: Balancing exploration and direct access, signalling recognisability through contrast, and using structure to match user intent.
Decision 3
Balancing exploration and direct access
One of the recurring themes identified during the content audit was that different types of content were often experienced through similar interaction patterns despite serving different purposes.
To address this, interaction patterns were used intentionally to communicate how content should be experienced. Content requiring immediate visibility and access was surfaced through direct-access patterns, while storytelling and trust-building content benefited from more exploratory interactions that encouraged progressive discovery.
This allowed content to be experienced in ways that better aligned with its purpose rather than forcing all content into the same interaction model.
UX Principles applied: Information Scent & Progressive Disclosure
Direct access
For business-critical content such as HKEX's offerings and quick resource links, where immediate visibility and access support both user goals and business objectives.
Explorative interaction
For storytelling and trust-building content such as scrollable video testimonials and hover-and-reveal mission statements, where interaction itself becomes part of the experience, encouraging deeper engagement and emotional connection.
Different interaction models were used to support how content should be experienced, balancing immediate access with opportunities for deeper exploration.
Decision 3
Signalling recognisability through contrast
The content audit also revealed that content serving different roles was not always easily distinguishable within content-rich pages.
To improve recognisability, visual contrast was introduced selectively through colour, imagery, and emphasis. Rather than relying solely on position or repetition, these treatments helped users more easily distinguish featured content, pathways, and supporting information.
This improved content recognition while helping users better understand the role content played within a page.
UX Principle applied: Von Restorff Effect
Contrast through colour
For content that benefits from greater visual distinction, creating emphasis without introducing entirely new patterns.
Contrast through structure
For signalling related pathways and destinations without disrupting the primary page narrative.
Contrast through imagery
For featured content, using imagery and scale to create distinction and encourage engagement.
Visual contrast was used selectively to help users distinguish between content types, pathways, and featured experiences.
Decision 3
Using structure to match user intent
The content audit further revealed that content with different information needs was often presented through similar structures and formats.
Rather than applying a single template approach across the ecosystem, structures were matched to user intent. Landing pages balanced narrative, context, and discovery to support exploration, while inner pages and articles prioritised information retrieval, scannability, and direct access.
This created clearer distinctions between exploratory and reference experiences while making information easier to understand and navigate.
UX Principles applied: Cognitive Load Theory & Recognition Over Recall
Storytelling-led template
For landing pages where narrative, context, and discovery play a greater role in helping users understand a topic before deciding where to go next.
Functional-led template
For inner pages and articles where users have moved beyond exploration and are seeking specific information, benefiting from direct access, scannability, and efficient retrieval.
Template structures balanced storytelling and functional elements differently depending on the dominant user intent and information needs.
Decision 3
Why it mattered
Without clear usage guidance, content decisions risked becoming subjective, leading to inconsistent experiences across pages and departments. Similar content could be presented differently, while fundamentally different content could end up being treated the same way.
Establishing a shared set of usage patterns helped ensure content was presented in ways that aligned with its purpose, communicated its role clearly, and supported how users consumed information.
This allowed the system to scale more consistently while preserving the intent behind the content it was designed to support.
Impact & Outcomes
Key outcomes
MTA launched successfully in Peru, validating the core experience under real-world conditions. The launch was recognised through official government communications and press coverage, reinforcing confidence in the product’s real-world impact.
A refined version later rolled out for Kenya, reusing the same core flows while adapting to country-specific requirements.
The work established a modular design system and interaction patterns, enabling future deployments without redesigning the product from scratch while strengthening collaboration between design, engineering, and product.
System impact
The stabilised core flows and systemised patterns reduced development and QA overhead for subsequent country deployments, allowing new requirements to be introduced without disrupting the traveller experience. These foundations continued supporting the product’s evolution after my departure.
Reflection & Learnings
Designing without certainty
This project reinforced that design doesn’t always begin with clarity. When content is still evolving, waiting for certainty isn’t always an option — sometimes the system needs to create the stability that the project lacks.
Beyond reusability
I came away thinking differently about design systems. Reusability isn’t just about components being reused, but about helping teams make consistent decisions as content, contexts, and requirements change.
Restraint over expansion
The project also reinforced that scalability doesn’t always come from creating more. Often, the most sustainable solution is extending what already exists and making it work harder.
Credits
Senior Manager, Experience
For introducing the idea of designing for completeness when the project needed a way forward. Your ability to turn ambiguity into action continues to influence how I approach complex problems.
Senior Associate, UI/UX Design
For being a constant source of support throughout the project. Your calm presence, strong visual craft, and reliability consistently elevated the work while inspiring me to raise the bar for my own visual design skills.
Associate, UI/UX Design
For driving much of the content audit and wireframing effort that gave the project its momentum. Your initiative, ownership, and leadership helped turn ideas into progress.
Senior UI/UX Designer, AVP (HKEX)
For trusting us as an extension of your team and for providing clear direction, honest feedback, and valuable organisational context throughout the project.
© 2026 Nigel Lim. All Rights Reserved.
Made with Framer, and the eventual peace that came from a truce between my perfectionism and procrastination.