How we designed an interactive, gamified website with a virtual trail

Recently, we were tasked by Ci Yuan Community Club to create an interactive virtual trail site for Singapore’s Racial Harmony Day. Racial Harmony Day is commemorated to remember the racial riots of the past and to emphasise the importance of maintaining racial and religious harmony in Singapore. An interactive, gamified website is one that users can engage with and has some semblance of a game — for example a scoring system and minigame elements, without being a whole actual game. Interactive, gamified websites have been proven to increase user experience and engagement and have been an ongoing trend for a while now.

Conceptualising with a narrative that makes sense

We came up with the overall theme, “A City of Colours”, and decided on three trails to represent three different aspects of Singapore — Faith, Culture & Heritage. On top of that, we created an overarching narrative to entice users to see their journey to the end. Users were assigned the persona of an explorer from a faraway land, visiting Singapore to give their penpal a birthday surprise. Throughout the three trails, they would be able to learn more about the different landmarks and play minigames and watch videos to earn points. As users virtually travel through the city, they can find out more about Singapore’s history in a multicultural and harmonious light.

Enhancing the story with an appropriate look and structure

With our narrative set, we were able to map out the user flow and pages we needed. We also sketched out several wireframes to help present our idea to all parties involved. After browsing through various styles and references, we picked one that we felt was able to bring out the beauty of our city and story — a vibrant and clean style featuring a cream background, bright accent colours and flat vector images that drew users’ attention to the right details. On top of that, we came up with variations of Ci Yuan Community Club’s tapioca mascot to suit the different narratives and sections of the site. From then on, we designed high-fidelity mockups to pass on to our web development team.

Gamification

To make the microsite more engaging, we deliberated on simple games like puzzles, quizzes and crossword puzzles, which are HTML-coded. As we anticipated a young audience participating in our virtual trail, we ensured that the games were not too difficult so that everyone could easily participate.

We also developed a simple leaderboard system, where users had to enter a ‘nickname’ in order to start so that their points could be tagged to their nickname on the leaderboard. To reduce the entry bar of the microsite, we auto-generated nicknames for users based on a list of dictionary words concentrated with numbers. We noticed that while many actual users wanted to use their own nicknames, more users left the nickname as the default. As such, the auto-generated nickname was a successful move to enhance the user experience and allow more users to access the microsite.

Making sure every feature works

Afterwards, we conducted several rounds of extensive Quality Assurance (QA) testing to ensure the site worked well across most modern browsers and devices. This was to minimise the number of bugs and make for a better user experience.

Anything is possible with proper planning and the right skills

The result was a fun, educational and interactive website where hundreds of users were able to play through and gain knowledge about the beauty of Singapore as a multicultural country. As interactive web design is a forte of ours, we were happy to have such an opportunity to make use of our passion and expertise to deliver an engaging and user-friendly website. Even with a short timeline, we were able to plan and manage our resources effectively. To find out more about how we design such interactive websites or to enquire about our interactive web design services, feel free to drop us a line! We’d be happy to help and share our knowledge.