An online media platform that offers a unique space for young men of colour.

MANDEM is an online media platform that offers a unique space for young men of colour to express themselves through writing, music and film. Independently run as a non-profit MANDEM has also hosted numerous panel-led events in Bristol and London, supported creative endeavours by young people and continue to produce a discussion-based podcast.

MANDEM’s key aim is to engage young people in culture, politics and identity and are determined to challenge the negative stereotypes surrounding young men of colour in the media, with hope to paint a more wholesome image that people of all walks of life can relate to.


An update to their logo in 2017 saw myself art direct with illustration work by Jono Kamester and Jesse Webster. Their sketched logo needed a vectorised update for scalability that reduced the detail but yet still felt hand drawn.

Progression of the Mansa Musa logo. First is a historic drawing. Second is a sketch. Third is a vectorised version.
Mansa Musa symbol progression.
(From left) 1. Mansa Musa drawing from the Catalan Atlas 1375.
2. Previous MANDEM logo.
3. Vectorised logo.
Mandem logos in black and white.
MANDEM monochrome logos.

Below is a further iteration (2020) that simplifies the form of their symbol to improve recall and scalability on small screens – while staying true to the original concept.

Side-profile silhouette of Mansa Musa wearing a crown with the word MANDEM below.
MANDEM side-profile logo.


As to avoid breeding a so-called echo chamber, we established Ghostwriter with the notion to allow people of any background to contribute their thoughts and creations.

The Ghostwriter emblem was influenced by the work of Noma Bar and features the nib of a fountain pen that can also be viewed as a ghost.

Logo white on black background. A negative space design of a ghost symbol that also appears as a fountain pen.
Ghostwriter logo for Mandem.


The approach to categorisation and navigation design was simple, clear and descriptive. This philosophy would be adopted throughout the site as a means to distance MANDEM from a ‘news site’ style. The layout of the home page for instance, uses whitespace to it’s advantage to not overload the user with posts (that can often be on emotive or complex themes) and as a reflection of the leisurely pace in which content is produced.


By having a limited number of top-level pages prevents chances of errors in the system.

Mandem navigation


Home page.

Post page.

Ghostwriter page

As a means to differentiate the content between Ghostwriter and the rest of MANDEM a colour reverse is used. For consistency a black background is used for Ghostwriter pages.

Ghostwriter landing page interface.
Mandem UI screens

Tags: Front-end Development, Graphic Design, UI, UX