Gamified DesignInspire Online Exhibition

Gamified DesignInspire Online Exhibition

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.

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

Adobe XD
Adobe Illustrator
Adobe After Effects
SVGator

Adobe XD
Adobe Illustrator
Adobe After Effects
SVGator

KEY CHALLENGES

Challenges and Approach

Challenges and Approach

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.

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.

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.

We started designing the game flow and illustrations immediately after storyboard confirmation. Then refined the user experience while creating the game interface.

IDEATION

A Gamified Exhibition Experience

A Gamified Exhibition Experience

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

Game Flow

Game Flow

  1. User lands on the game page and presses "Explore now"

  2. First-time users go through the instructions

  3. User can drag and tap elements on the game site, showcasing exhibits and exhibition details

  4. User taps on elements to zoom in and collect crystals

  5. User can further explore the exhibit details via the links

  6. Upon collecting all 14 crystals, a fireworks animation celebrates the completion 👏

DESIGN

Illustrations & Animation

Illustrations & Animation

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

Achievement

Achievement

We're honored to have received an Honorable Mention on Awwwards.com. Feel free to check out the full game recording on YouTube.

We're honored to have received an Honorable Mention on Awwwards.com. Feel free to check out the full game recording on YouTube.

View previous project

View previous project

Back to Home

Back to Home