Hong Kong Genome Institute: An End-to-End Website Revamp

Project Overview

The Hong Kong Genome Institute (HKGI) is wholly owned by the Government of the Hong Kong Special Administrative Region and serves as a pioneering institution dedicated to advancing genomic medicine in Hong Kong. By promoting the integration of genomics and clinical application, HKGI helps lay the foundation for enhanced genomic diagnosis, personalized treatment, and disease prevention and control. As its vital work needs to be clearly understood by a diverse audience, ranging from healthcare professionals and research communities to the general public, HKGI required a digital platform that could make complex scientific concepts both accessible and engaging.

To bring this vision to life, DigiSalad provided an end-to-end website revamp, delivering comprehensive UX and UI design and development. The revamped website helps the institute present complex genomic information in a clearer, more modern, and user-friendly way, while empowering its team to seamlessly share groundbreaking research with the community.

Key Features

Dynamic Animations & Interactive Scrolling

The newly redesigned website transforms static pages into an interactive journey using fluid front-end animations. As users scroll, text and images gently appear through elegant fade-ups and slide-ins, guiding the eye and pacing the delivery of complex scientific data so it is easy to digest. Alongside this, auto-switching visual carousels automatically reveal new information over time without requiring any extra effort from the viewer. This seamless, high-tech experience not only makes the platform effortless to explore, but it also perfectly mirrors HKGI’s reputation for precision, innovation, and forward-thinking in genomic medicine.

Barrier-Free Navigation and AA Accessibility

The website is designed to provide a more user-friendly experience for visitors with different visual needs. To support Level AA accessibility standards, it offers three font size options, allowing users to easily switch between small, medium, and large text sizes for better readability. A keyword search bar is also included in the top navigation, helping users quickly find specific resources when needed.

Integrated LinkedIn Feed 

The website brings HKGI’s latest social content together in one place through the integration of its LinkedIn feed and YouTube channel. Visitors can catch up on recent LinkedIn posts at a glance, watch selected YouTube videos in an engaging reels-style format, and click through to the full channel for more content. This creates a more dynamic browsing experience while helping audiences stay connected with HKGI’s latest news, developments and educational initiatives.

Human-Centered Content Design

The website uses a clear and structured content layout to make HKGI’s genomic and institutional information easier to understand. Complex content is divided into scannable sections with strong visual hierarchy, clear headings, concise messaging, and intuitive infographics, helping users browse key information without feeling overwhelmed.

To make the experience more approachable, the layout also features professional profiles, video case studies, and friendly character illustrations with interactive hover states. Together with consistent brand colours and clear call-to-action buttons, the design helps present dense genomic information in a more trustworthy and user-friendly way.

Solutions Implemented by DigiSalad

Flexible Widget-Based CMS for Efficient Operations

DigiSalad implemented a widget-based Content Management System for HKGI, allowing the team to manage website content with greater flexibility and efficiency. The system supports content management, media library, user management, user-level settings, content approval flow, and audit log viewing or exporting. This enables HKGI to update information and adjust page content based on its communication needs in a more structured and efficient way.

Smart Content Discovery & Search

To help users find relevant information more easily, DigiSalad implemented practical content discovery functions across the website, including keyword search, tab switching, sorting filters, categorized labels, and pagination. For example, visitors browsing the News & Events section can easily switch between external news coverage and official press releases, filter content by topic or date, and view results in neatly paginated lists that keep the page clean and easy to browse.

Cross-Device Responsiveness & Enterprise-Grade Infrastructure

DigiSalad built the website with responsive frontend and backend development to ensure a smooth and consistent experience across desktop and mobile devices. The layout, navigation, and content modules were carefully adapted for different screen sizes, allowing users to browse HKGI’s information clearly whether they are using a computer, tablet, or mobile phone.

Beyond the user-facing experience, DigiSalad also strengthened the website’s technical foundation to support HKGI’s daily operation and long-term growth. With a structured CMS, multilingual setup, backend functions, data migration, and API integration, HKGI can manage content more efficiently, maintain information consistency across languages, and reduce repetitive manual work.

Server setup, backup planning, resilience measures, and alert monitoring also help ensure the website runs more smoothly and reliably. Even when the platform needs regular updates or future expansion, the system is built to support these changes in a more stable and secure way.

Conclusion

DigiSalad’s revamp of Hong Kong Genome Institute’s website successfully transformed it into a modern, accessible, and user-friendly platform that reflects HKGI’s professionalism in genomic medicine. By focusing on user-centered UX & UI design, clear content structure, AA accessibility support, responsive development, and a flexible widget-based CMS, we enhanced both the usability and long-term manageability of the website. This project showcases DigiSalad’s expertise in creating digital solutions that make complex information easier to understand, while delivering lasting value for both users and clients.