Grab a cuppa, get comfy and have a nosy around :)

Back

Compass for Kindness

compassforkindness.co.uk

Share

Compass For Kindness is a free online interactive resource, created by Lutalica Designer Zoe Tang and developed pro-bono by the Lutalica team. Compassion for Kindness strives to dismantle the stigma surrounding suicide, by presenting the facts about suicide in a clear and digestible manner and equipping individuals with the right tools to engage with loved ones in an open and positive way.

Credits

Branding and UX/UI: Zoe Tang

Development: Lisa Komoltseva

Awards

Awwwards: Honorable Mention

The design of Compass for Kindness blends aesthetics, creativity and play, supporting people to engage with the emotionally difficult subject matter. Mirroring the intricate journey of navigating through emotional complexities, Zoe presents advice from trusted mental health organisations with an interface that is empathetic and engaging.

The use of interactive elements like the drag-and-drop feature for identifying signs of suicidal thoughts provides users with a clear and memorable guide to support loved ones who might be struggling with suicidal ideation.

The visual identity draws heavily from the themes of navigation and exploration, using elements reminiscent of old maps and the adventurous spirit of orienteering. The chosen colour palette of soothing blues, pinks, and greens, along with the use of script typography akin to vintage maps, invites users into a space that is both comforting and familiar.

In recognising the urgent need for accessibility across screen sizes, especially as individuals in crisis or seeking privacy are more likely to search the web via phone, Compass for Kindness was meticulously designed with a responsive framework.

The website’s content stacks and adapts to varying screen sizes, ensuring that the message of hope and guidance is accessible on any device.

In creating the branding of Compass for Kindness, Zoe paid particular attention to creating a visually enticing platform that would be both inclusive and accessible. Accessibility is woven into every aspect of the branding, ensuring that the message of compassion and understanding is conveyed clearly to all.

Related Projects

Understanding Accessibility Homepage: text based in a clear sans serif font on a gradiated pink
Understanding Accessibility

A tool for web designers to easily learn about and implement digital accessibility.

Homepage of Weirdo website on desktop
Weirdo

An advertising agency championing diversity with unique and inclusive campaigns.