Steven Chan
a windy cartoon winter road with trees, snow piles, and old-fashioned lamp posts

Québec Carnival Dynamic Map

Microsite Project

kayak that goes to project details wooden sled that goes to project details a parading that goes to project details food truck that goes to project details ice sculpture that goes to project details a concert stage that goes to project details

Details

Québec Carnival Dynamic Map was a microsite based on Carnaval de Québec that provides a responsive interactive map inspired by Disney’s Club Penguin Map. This team project consisted of 5 members. As Lead Designer and Developer of the interactive map section, I sketched stylized map foundations, discussed creative additions with artists on the team, and developed the dynamic placement of information icons. Additionally, I focused on the responsiveness of the map and tailored the experience to fit the dimensions of the microsite. Québec Carnival Dynamic Map was created in 2023 for a 13-week class at Simon Fraser University.

gif of the responsive views
A gif demonstrating the responsive map of the original project
gif of the mobile scrolling
A gif demonstrating the mobile form factor scrolling

Process

Ideation

During our team ideation meeting, we noticed the cluttered nature of Carnaval de Québec’s traditional map. Afterwards, I proposed the creation of a user-friendly interactive map as the microsite’s key feature. The decision to use a cartoon-style map heavily inspired by Club Penguin had the Carnival’s winter theme and all-age community in mind. First, I used Photoshop to sketch a low-fidelity mockup of the map to receive feedback from the team and class.

screenshot of map MVP
An initial sketch of the map

Prototyping

With adjustments based on the feedback, I moved into wireframing in Figma for smartphones, tablets, and desktops. The wireframes help guide the interactive icon placement while scripting the HTML and CSS.

screenshot desktop map wireframe
A wireframe of the desktop form factor map
screenshot tablet map wireframe
A wireframe of the tablet form factor map

An issue we Fixed

One user interface issue we found was the lack of affordable provided before hovering over icons. Users did not realize the elements were clickable. To solve this, we added a subtle looping bounce animation to the CSS which separated the icons from the background image.

gif of the map icons blending into the background
A gif demonstrating how the interactive icons blend into the map when they do not bounce.

Final Thoughts

The Québec Carnival Dynamic Map improve my skills in responsive web design and its incorporation into creative ideas to make functioning prototypes. I began by planning wireframes with different screen sizes to support responsive viewing of the map. Then, by collecting client and peer feedback, I iterated on the original design to improve clarity, and visual interest.