Responses by The Digital Panda.

Background: Culturally Connected is an approach that combines health literacy and cultural humility to help care providers and their clients develop a shared understanding of each other’s values, beliefs, needs and priorities. The website was designed as an educational resource to get providers acquainted with how the approach works, and provide some useful tools and case studies to put theory into practice. While it was created to support care providers working in the health sector, Culturally Connected and its fundamental practices are also valuable to those working in other sectors, including education and settlement.

Design core: From the very beginning, we knew we’d have to work with a lot of written content. The concepts used in Culturally Connected are abstract ideas that are hard to illustrate, without limiting the potential scope of their application. We think the site’s core feature is the way we used parallax scrolling and SVG animations to create a fluid narrative explaining the concept in a single page.

Challenges: The most challenging aspect of the site was developing the art direction. First, we wanted to use illustrations from real-life scenarios: for example, a care provider having a discussion with a family at a hospital. After the first round of sketches, it was clear that we would have to look for something more abstract: because the approach is applicable to many scenarios, illustrating specific ones might have limited the understanding of its application. The visual design and illustrations went through numerous iterations—getting simpler and simpler with each—until it reached its current state. This final look was also affected by the constraints of SVG animations.

Navigation: The navigation structure was informed by the content. To get a good understanding of the Culturally Connected approach, you have to learn about the basics, it’s fundamental components and how they come together. So we wanted to create an experience where you move from one part to the other seamlessly.

Technology: We built the entire site within Webflow, a modern visual-first CMS, paired with some very custom JavaScript. Webflow allowed us to develop rapidly and make adjustments to the visual design on the fly. However, it had some limitations. At the time we developed the site, Lottie—an animation plugin that helps render vector graphics on the web—was not something that could be easily used. We had previously implemented it on our own site, so we had some experience. All of the animations were done in Adobe AfterEffects as vector shapes, then exported using Lottie. We also used Waypoints in order to specify breakpoints for the animations to move in or out.