My Work

manCheck Berlin

Digitizing HIV prevention and health education work of a structural prevention project from Berlin.



Client
Schwulenberatung gGmbH
Period
2016
Type
Product Design, Visual Design, Web Development

About the Project

manCheck is a structural awareness and prevention project based in Berlin. They provide information on safer sex, sexually transmittable diseases as well as counselling and psychological / health support.

Results

Bouncerate: -49.95%

Average Session Duration: +110 %

Pages/Session: +76.05 %

April 2017 - September 2017 vs. October 2016- March 2017

The Goal

The challenge in this project was to digitize manCheck's offerings. The objective was to redesign their website, and shift from a simple representative website towards an integrated portal. Visiting their website should provide a similar experience as meeting one of manCheck's streetworkers live at a gay hotspot in Berlin.

manCheck was looking for an engaging experience that lowers the barrier of users to seek information and help and at the same time adress the diverse needs of Berlin's dynamic gay population.

My Role

I defined requirements together with stakeholders, conducted interviews with users, defined the information architecture, created sitemaps, wireframes and high-fidelity designs including a new visual identity, conducted user tests and built the website using Wordpress, HTML and CSS.

The Audience

Together with the stakeholders of this project - the head of the manCheck project, social workers and psychologists from the Schwulenberatung Berlin, I have created an overview of their target group. We identified two main user groups:


  1. Gay men (precisely - men who have sex with men), who seek information on STI's and safer sex

  2. Gay men, who consume illegalised drugs, sometimes in the context of sexual activities or fetish-parties

With Berlin, being one of the most attractive city for gay people in Europe, the cultural backgrounds of the people from those target groups vary greatly - even inside those target groups.

Information Architecture

I analysed quantitative data from the previous website of manCheck and looked at related prevention projects such as IWWIT, Deutsche Aidshilfe or MAINline.

A flat content strucuture with little to no nesting and multiple entry points turned out to be working the best. This ensured that the desired content could be found intuitively, without having to wonder, which category a certain topic belongs to.

Sitemap for manCheck.berlin

Wireframes

I sketched out first layouts and used wireframes in order to have an early validation of the product. This enabled me to easily and efficiently make changes while including users feedback based on their reaction.

The wireframes worked also as a reference point for functional specifications and communicating the functionality I am going to build with stakeholders.

Wireframes are the basis for taking the design further and exploring UI elements and features

At the point when the fidelity of the wireframes increased, I focused on providing alternative entry points to topics compared to the top-menu.

Wireframes are the basis for taking the design further and exploring UI elements and features

High-fidelity Design

In the iterative process the wireframes evolved into high-fidelity designs, images and colours gave life to the monochromatic low-fidelity prototypes and enabled me to get new insights from user tests.

High-fidelity designs for mancheck.berlin

I explored colour-palettes and font combinations, and created a modern and appealing identity for manCheck, while still enabling a clean and functional experience using the product.

Logo, colour and typography for mancheck.berlin

Development

I decided to develop the website using Wordpress, because it allows the website and its content to be easily managed by people without a technical background. I customized a flexible Wordpress theme using CSS in order to implement the high-fidelity designs. 

Furthermore, I ensured to produce 100% valid W3C code and to meet the web content accessibility guidelines Level A. The WPML plugin allowed the website to be localized to multiple languages, starting with German and extending to English, Russian, Arabic and Farsi over the next months.

Additionally, an anonymous, chat-base interface is planned, in order to offer users of the website on-demand counselling. A feature which has been planned by the Deutsche Aidshilfe for years, but which has never been implemented.

Outcome

I created modern, multilanguage portal meeting the needs of a diverse user group, quality and accessibility standards of the project's stakeholders and modern technology.

manCheck.berlin on mobile devices
mancheck.berlin volunteer page
KnowDrugs v1.0 on iOS