/lu:talika/

the part of your identity that doesn’t fit into categories
Dark mode
Light mode

/lu:talika/

the part of your identity that doesn’t fit into categories
Dark mode
Light mode
Back

Bodysymptoms

Branding + UX/UI + Development

bodysymptoms.org

Share

Bodysymptoms is an online resource that aims to demystify and support people suffering from functional disorders such as IBS and Fibromyalgia. Developed as part of Dr. Chloe Saunder’s PhD, Bodysymptoms brings together current research, healthcare insights, and lived experience of people who suffer from functional symptoms. Drawing on research findings and the outcome of a participatory discovery process, we created a brand identity and designed and developed the website for Bodysmptoms.

Credits

Branding: Zoe Tang

UX Design: Faith Ekanem

UI Design: Alaïs de Saint Louvent

Development: Nata Sheketa

Branding

In developing the branding for Bodysymptoms, we placed a significant emphasis on accessibility, recognising that the primary users of this resource might be grappling with disparate health challenges, and this is reflected in the spacing, colours and fonts used. A key aspect of our branding strategy was the incorporation of playful elements, such as stickers. These were designed to add a touch of lightheartedness and care, steering away from a purely clinical or medical feel. The colour scheme features soft tertiary colours and calming greens, interspersed with bold pops of coral to draw attention where needed.

Landing Page

desktop version of site, featuring gingerbread men-like cut out illustrations and a faded blue background
mobile and tablet versions of bodysymptoms website

The landing page was designed to build curiosity about the project, ahead of the full launch. As part of this, we showcased the first iterations of the Bodysymptoms illustrations, which were co-created by Chloe and the youth group Super, and subsequently adapted for use on web by Lutalica. The illustrations went through a special round of user testing to see if they accurately represented the phenomena the researchers were hoping to convey.

Website

Guided by participant feedback, we designed the website in the knowledge that different users would be coming with different needs and at different points in their symptoms journey. Several UX/UI decisions reflect this, for example the ability to toggle between ‘Learning mode’ and ’Support mode,’ and the sticker offering people a quiz to connect their symptoms with the Bodysymptoms framework.

To create a soothing browsing experience and reduce environmental impact, we implemented lazy loading on the site, with elements gracefully coming into view as the user scrolls. Additionally, reflecting the multinational background of this project, the website is viewable in five European languages.

Bodysymptoms is fully responsive according to screen size, which was especially important for this project, given its expressed aim to appeal to young people, who are more likely to access the web via phone than desktop. The site stacks straight forwardly on mobile, with some elements sitting on top of each other as opposed to side-by-side as on desktop.

Related Projects

lvndr white logo on a red and purple gradient background

LVNDR Health

Bloume Health