In response to the pandemic, DesignInspire — an annual event by the Hong Kong Trade Development Council (HKTDC) celebrating creativity and innovation — transitioned to a virtual format in 2020, running from December 3 to 9. This shift allowed industry professionals and the public to explore designer projects and interactive content online. To elevate the digital experience, I designed a gamified exhibition site that blended storytelling and interaction, offering users an engaging and immersive way to navigate the event, ultimately delivering an exceptional user experience despite the physical limitations.
TIMELINE
Sep - Dec 2020
ROLE
Journey owner
Graphic designer
Animator
DELIVERABLES
UI/UX design
Illustration
Animation
TOOLS
KEY CHALLENGES
Tight timeline
The project was challenging due to a tight 3-month timeline. We had to brainstorm the game UX flow from scratch and complete production before Dec 3 for the online exhibition.
Small team
We consisted of one product manager, one designer (myself), and one front-end developer. This setup required efficient resource management and exceptional collaboration.
OUR APPROACH
Streamlined Execution
We started designing the game flow and illustrations immediately after storyboard confirmation. Then refined the user experience while creating the game interface.
IDEATION
Our team initiated an interactive island hub where visitors could explore exhibits and participating institutions. We implemented a drag-and-browse feature, allowing users to navigate intuitively and discover content at their own pace.
To boost engagement, we added gamification through a crystal collection system. As users explored, they gathered crystals that encouraged thorough exploration and provided a sense of achievement. This transformed the experience from passive viewing into an immersive journey, creating a memorable exhibition that stood apart from traditional formats.
STORYBOARD
User lands on the game page and presses "Explore now"
First-time users go through the instructions
User can drag and tap elements on the game site, showcasing exhibits and exhibition details
User taps on elements to zoom in and collect crystals
User can further explore the exhibit details via the links
Upon collecting all 14 crystals, a fireworks animation celebrates the completion 👏
DESIGN
The exhibition featured over 20 global creative brands and institutions. To bring this vision to life, I designed and illustrated 14 custom interactive elements representing each participant on the island, allowing users to explore detailed information through tappable links to corresponding detail pages
For animations, we leveraged SVGator, a powerful online SVG animation tool that delivered lightweight, scalable animations with improved load times and user interaction. I created natural-looking motion by animating properties like position, scale, and rotation, with click-triggered interactions to boost engagement. The no-code approach significantly accelerated our workflow, enabling rapid iterations and reducing development time. Exporting animations as SVG files with JavaScript ensured seamless front-end integration, resulting in a polished, interactive product delivered within the tight 3-month timeline
