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.

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

Adobe XD
Adobe Illustrator
Adobe After Effects
SVGator

KEY CHALLENGES

Challenges and Approach

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.

Lean team

We consisted of one product manager, one designer (myself), and one front-end developer. This setup required efficient resource management and exceptional collaboration.

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

Explore, Engage, Enjoy.
A Gamified Exhibition Experience

Explore, Engage, Enjoy.
A Gamified Exhibition Experience

Explore, Engage, Enjoy.
A Gamified Exhibition Experience

Our team envisioned an interactive hub where people could explore and learn about the exhibits and participating institutions. This led to the concept of an island, a central space where visitors could interact with elements representing the various exhibits. We implemented a drag-and-browse feature, allowing users to navigate the island intuitively and discover content at their own pace.

To enhance engagement, we added gamification elements, including a crystal collection system. As users explored the island, they could gather crystals, which incentivized thorough exploration and added a sense of achievement. This interactive approach transformed the experience from passive viewing to an immersive journey of discovery, increasing user engagement and creating a memorable experience that set the exhibition apart from traditional formats.

Our team envisioned an interactive hub where people could explore and learn about the exhibits and participating institutions. This led to the concept of an island, a central space where visitors could interact with elements representing the various exhibits. We implemented a drag-and-browse feature, allowing users to navigate the island intuitively and discover content at their own pace.

To enhance engagement, we added gamification elements, including a crystal collection system. As users explored the island, they could gather crystals, which incentivized thorough exploration and added a sense of achievement. This interactive approach transformed the experience from passive viewing to an immersive journey of discovery, increasing user engagement and creating a memorable experience that set the exhibition apart from traditional formats.

Our team envisioned an interactive hub where people could explore and learn about the exhibits and participating institutions. This led to the concept of an island, a central space where visitors could interact with elements representing the various exhibits. We implemented a drag-and-browse feature, allowing users to navigate the island intuitively and discover content at their own pace.

To enhance engagement, we added gamification elements, including a crystal collection system. As users explored the island, they could gather crystals, which incentivized thorough exploration and added a sense of achievement. This interactive approach transformed the experience from passive viewing to an immersive journey of discovery, increasing user engagement and creating a memorable experience that set the exhibition apart from traditional formats.

STORYBOARD

The Game Flow

The Game Flow

The 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 👏

  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 👏

  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 👏

Storyboard

Storyboard

DESIGN

Illustrations & Animation

Illustrations & Animation

Illustrations & Animation

The exhibition featured an impressive lineup of over 20 global creative brands and institutions. I illustrated 14 of these participants as interactive elements on the island, enabling users to engage with them and explore detailed information by tapping on the corresponding detail page links.

For the animation components of our project, we leveraged SVGator, a powerful online SVG animation tool, enabling us to deliver lightweight and scalable animations that improved load times and increased user interaction. I leveraged its features to create natural-looking motion by animating properties like position, scale, and rotation, and enhanced user engagement by setting animations to trigger on click.

The no-code approach streamlined our workflow, enabling rapid iterations and reducing development time. Exporting animations as SVG files or with JavaScript ensured seamless integration with the front-end developer, resulting in a polished and interactive final product within the tight 3-month timeline.

Against the Odds:
Achieving Honorable Mention

Against the Odds:
Achieving Honorable Mention

Against the Odds:
Achieving Honorable Mention

This project has been voted as an Honorable Mention on Awwwards.com. The original game site is no longer available, please check out the complete end-to-end game flow in the recording below.

View previous project

View previous project

View next project

View next project

Back to Home

Back to Home

Back to Home

Back to Home