Allinclusive Design

Project Idea

I did not find a resource about trauma-informed design in the digital space, so I made one. :-)

On this platform, I share the principles to make digital products more inclusive for people who experience stress and anxiety as a result of trauma. The principles are based on findings from the field of trauma informed physical spaces and my empiric observations during helping refugees.

Trauma informed design promotes safety, healing, and wellbeing by integrating the principles of trauma informed care into the design and construction of the spaces where care takes place. My goal was to transform these findings and formulate the principles for the digital world, so that digital products contribute to healing and promote empowerment.

Research

While accessibility is a big topic in design, it is often understood in terms of insuring the physical accessibility or removing the existing barriers. My goal was to research the ways to make digital products more accessible to people who experience stress and anxiety as a result of trauma. The research showed that there are way more studies and sources in the domain of architecture and interior design than from the field of human-computer interaction. This platform is intended to share experience, gather knowledge and provide practical examples in trauma-informed design in the digital world.

I gathered my observations research of different sources and summarized the principles in the following categories:

• Colours
• Power and control
• Font Legibility
• Empowering Messages
• Accessible Media Files
• Text Readability
• Predictability

Design

In general, I applied the principles during the design of the platform.

The goal of the visual interface was to create a natural and organic appearance. I used waves to transmit the vibe of transparency and fluency. Water has as well calming and cleaning properties, which should be the goal for trauma-informed design and trauma healing. I used SVGs to create the “wavy” margins for each section and strived for similarity with waves.

I used Atkinson Hyperlegible font, which I feature in the Font Legibility section.

To illustrate the ideas behind each principle, I used sticker illustrations in warmer colours. I used the existing flaticon creativity Stickers pack and modified them according to the needs of the platform.

Development

I developed the website from scratch and coded the platform by myself. The idea was to create a clear division of sections and enable smooth navigation for the users. My goal was to make a responsible platform enjoyable at every device.

I used JavaScript for interactions and the ScrollMagic scroll interaction library for scrolling behaviour implementation. For each section, a natural section swipe to create a natural and smooth scrolling between sections and fixing the previous section at the top while scrolling.

You can visit the website using the link.