Chinatown Stories Map
![](https://cdn.prod.website-files.com/676f6ae096033eb8cf776d26/67799c3d458ca4e6bb2a2eda_ChinatownWeb-Banner.png)
Background
Chinatown Stories Map was created to invite you to get curious: to seek history of the land before Chinatown, hear diverse community histories that helped shape Chinatown, and continue this dialogue to build towards an inclusive, safe, and vibrant Chinatown for everyone. This project was a community effort with many collaborators including storytellers, writers, editors, community consultants, translators, organized by illustrator and project lead, Emily Chu.
View the live website.
![](https://cdn.prod.website-files.com/676f6ae096033eb8cf776d26/6779b01ee2ec11c30e9c6129_ChinatownWeb-1.webp)
Challenge
The storytellers and researchers collected information on 30 separate sites in Edmonton's Chinatown. Our goal was to build a website that could feature them all in an interactive format, and that would be a companion to the printed version of the map. Each story had different sizes and types of images, as well as an accompanying article that had three separate language translations. The printed version of the map (designed and illustrated by Emily Chu) featured QR codes for each site that lead to an article online.
![](https://cdn.prod.website-files.com/676f6ae096033eb8cf776d26/6779b026c4d2edd9575a697f_ChinatownWeb-2.webp)
Solution
The unique nature of this project required the illustrated map to be reproduced on the web in a way that matched the printed map as closely as possible while incorporating the available interaction of a digital format. The functionality of the map hovers and links to each article was created almost entirely natively in Webflow with the addition of just a smidge of custom code.
With 30 unique articles and different amounts and sizes of supporting images, the layouts had to be flexible. They also had to incorporate three language versions without heavily prioritizing one over the others. To achieve these goals, I created a three column layout that provided a summary of the article in each language and a link to jump to the article in that language. There are also image slots all through the layout where images can be dropped in depending on what best suits the provided material.