Toronto Chinatown BIA

4D ChinatownTO is a community project created by the Toronto Chinatown BIA (Business Improvement Area) to bring the neighborhood and businesses of Chinatown directly to peoples’ devices during stay-at-home orders. It is a virtual guide where people can visit Chinatown’s iconic businesses and learn about their history as told by their storekeepers, entrepreneurs, mentors, restaurateurs, immigrants, and Chinatown historian Arlene Chan.

The goal of 4D ChinatownTO is to promote online traffic and awareness of the featured businesses as many small, independent brick-and-mortar stores and restaurants are facing enormous challenges adapting to pandemic quarantine measures.

Without much of the foot traffic and in-store shopping that were once the norm of Chinatown, businesses are adapting to new practices like online shopping, curbside pickup, and delivery. The Chinatown BIA seeks to help transition traditional local businesses to online shopping and let both new and old patrons explore Chinatown from the comfort and safety of their home.

A series of 360° interactive videos with audio commentary is presented to visitors, who can select various waypoints from an overview map. Visitors can explore a 360° view of the business and listen to interviews and narrations. Store details and links to their own websites are included, so visitors can look up or shop for products and services offered by the featured businesses.

The guide is built on a low-impact slider system, allowing for the presentation of the 360° videos alongside additional contextual user-interface elements. Each slide provides the user with the option to mute or unmute the video, read up on business information, and navigate through the streets of Chinatown through an on-screen mini-map. Users can also navigate to an overview map, where they can view all of Chinatown from a bird’s-eye view, selecting from all of the available 360°videos.

Much of the project was built with the plugin Slider Revolution. The videos, filmed by a third-party production team, were uploaded to YouTube where viewers can control the camera. The design of the guide itself is kept minimal as the content is the main focus. A stylized map of the Chinatown area is decorated with subtle animations.

A main challenge of the project was the various technical limitations placed by YouTube on the integration of 360° videos, especially when the videos are embedded and streamed. Another challenge was working inside Slider Revolution. While no-doubt powerful and capable of what we envisioned, the plugin has its own limitations on streaming videos and audio. Audio became a challenge as our initial intent to auto-play the narration conflicts with web browser policies, which were remedied through various techniques such as streaming audio and video separately.

Making sure 4D Chinatown TO works on mobile was also another priority and challenge, as we wanted to ensure users can visit and watch the videos on all devices for convenience. Not only did we face the typical challenge of building a responsive design for a diverse set of screen sizes and devices but also network and browser differences, which always proves a challenge when working with streaming-heavy content.

Prior to beginning development, we took the time to assess Chinatown BIA’s website for speed and performance. Since we intended to play 360° videos across different devices, it was critical the website was not only up-to-date, but fast and lightweight.

As project development continued, the amount of data streamed and loaded on page increased. It became imperative that input by the user responded to interaction quickly, especially on mobile where the slider takes more time to load assets like graphic content and videos.

Overall, 4D Chinatown proved to be a useful tool in highlighting some of the area’s most interesting history and businesses. Providing an outlet for users to interact with their favorite businesses like never before, 4D Chinatown has the utility to act as an interactive and expanding directory well beyond the duration of current lockdown orders.

To see more, click the link below:

4D Chinatown TO