Culturally Connected

The Challenge

Culturally Connected is an initiative by the BC Children's and Women's Hospital that brings together cultural humility and health literacy to help care providers and their clients develop shared understanding of each other's values, beliefs, needs, and priorities. The Digital Panda was approached to design and develop their educational web site.

The Solution

We developed a website and an abstract infographic style that works together with animations to explain the essence of the Culturally Connected approach.

From the very beginning it was clear that we’ll have to deal with a lot of written content and abstract concepts that are hard to illustrate. We decided to use these limitations to our advantage. Our idea was a long, scrolling website where concepts build upon each other and abstract shapes transform into infographics to explain and visualize the core principles of Culturally Connected.

Wireframing and prototyping interactions

This was one of those rare cases when content was available up front. So we started with wireframes and rapid interaction tests.

Even at this stage, we wanted to make sure we’re on the same page with the client, that is why we created some simplified interactions how content would be delivered and what scrolling behaviour to expect.

Developing the illustrations and infographics

We had to move away from characters or concrete objetcs. Culturally Connected can be used in various situations, thus the client wanted to make sure our illustrations don’t narrow the scope of it’s application.
We started with sketches of people in typical situations, but soon it became obvious that we need a more abstract approach. In fact, the more abstract the better. We gradually removed characters, details, textures and ended up with an almost primitive direction of basic shapes.

Iterating on illustrations, infographics and testing in the context of the interface.

Interface and interaction design

With the illustration style approved, we worked our way through the interface and animations to turn imagery into explainer graphics.

Development and implementing SVG animations

The developed website uses lightweight svg animations and an interesting transition for the full-screen menu.

Start Your Project