Mann Malang

Introduction

Mann Malang is a non-profit community for people with intersex variation to provide resources and foster connections.

The Objective

To create a PWA to help users (that are intersex people or connected to intersex people) have access to resources that can provide them with help and necessary information. The goal is to also let the users connect with like minded people and build a community.

My Role:

User personas based on the client's research
User flow mapping
Creating the wireframes
Creating the final designs
Curating the illustrations
Making the logo

The Problem

People from the Intersex community often find it hard to find help or resources or even people who may be facing the same challenges as them in the world. Even caretakers (such as parents, siblings, etc.) of intersex people need access to helpful resources and to other people in similar situations as themselves.

The Solution

To create a platform which can offer resources, insights and a place to foster community and rewarding relationships. This community would be for people that identify as intersex as well as people that are connected to them.

The Challenge

To create a safe space.
To keep anonymity at the forefront.
To seamlessly bring together multimedia blogs, webinars, listicles, forums and chat spaces together.

My Process

The client came to me already having an idea of what they wanted to create, which was a PWA. This would be beneficial in India as it was a product that had to reach as many people as possible and the primary device to access the internet in India is a smartphone^{1, 2}. A desktop version of the PWA would also be created for the minority who have access to desktops/laptops.

This cemented our decision to follow a mobile first design strategy.^{3, 4}

Having worked with communities on the ground with their target audience, they already had a bank of research on the users. It was my job to bring their ideas to life.

User Personas

The first step was to sift through the user data that was collected by the clients and understand the frustrations and motivations of the users.

I aggregated the vast data and created 5 personas, consisting of people with intersex variation, caretakers of intersex people and researchers/activists.

User Flows

After creating the user personas, a very thorough site map and user flow was made.

The client already had a clear idea of what functionalities they wanted to include in the product. These functionalities included:

Article pages, including image and video
Blogs & listicles
Webinars
Forums & threads
Connecting with other users
Messaging
Profile
Dashboard and curated feed

After listing out the functionalities a site map was created to figure out a clear navigation for the user. The challenge was to keep the navigation as simple as possible, considering how many different sections were there in the product. The product was split into two main sections, what you could see when signed in and when signed out. The idea being that even if someone didn’t want to interact with the community, they would still have access to helpful information from blogs, articles, webinars and videos.

Based on the site map, the user flow was created.

Wireframe

A high fidelity wireframe was created showing every screen in detail. A mobile only wireframe was created as this was a PWA. Once the wireframe was approved by the client, the final UI design was created for mobile and desktop as well.

Final Design

During my research I came across a few other websites related to the intersex community. I observed that most of them primarily use the intersex colours⁵ (yellow and purple) and they were very text and information heavy.

The final design for this project also used the intersex colours, but in a different way. I used different shades of yellow and purple that would complement each other rather than assault.

The design finally created was based on one scenario of the type of content that would be uploaded. For example, there was a certain template created for blog thumbnails, forum thumbnails, etc. How the website would finally be displayed to the user would be based on the actual content uploaded from the backend by the client and the feed that each individual user would see according to their interests.