top of page

Mensinator

Project Type: UI Design, Graphic Design

​

Platform: Android App

​

Project Date: August 2024 - Ongoing

​

Software: Figma, Affinity Suite, GitHub

​

Mensinator is an open-source, easy to use period tracker with customizable symptoms that does not collect user data. The project was created by the developer, Emma, to fill a niche missed by other period trackers: In addition to focusing on user privacy, the app allows users to add their own symptoms based on their exact needs.  

​

Design Goals: Assure the app is easy to use, accessible, and customizable in ways that meet user needs. Clean up the initial UI to improve readability and navigation. Avoid making the app overly feminine, as that may alienate certain users.

​

My Responsibilities: Create mockups, color palettes, and marketing images as part of the app development team. Help improve consistency, accessibility, and usability throughout the app.

Screenshot_20241008_121246.png
mensinator promo image 5.jpg

Main promo image for the app:

The team wanted to convey trustworthiness and professionalism, while also presenting a friendly, approachable tone. I chose the fonts and colors shown for readability even on a small phone screen.

Business card marketing: 

Members of our team wanted an easy way to share the app while networking in person.

I created this card as easily- shareable marketing material.

mensinator_Business_Card_Mockup_3 portfolio.png
mens app symptoms 1 portfolio.jpg

Notes for developers:

When I joined the development team, I found many UI inconsistencies such as these dialog boxes with different formatting.

A large part of my work is ensuring the consistency of the app from screen to screen, to improve usability and accessibility. I also aim to reduce confusion between interactive elements, such as buttons and text boxes.

Calendar mockup:

In this mockup created in Figma, I focused on adding white space for improved readability.

mensapp2.JPG
MA dark color picker 4.jpg

Dark mode color picker high-fidelity mockup:

This mockup focused on improving contrast and spacing for the symptom color picker. The original design used text for the colors instead of swatches. I suggested moving away from text to remove confusion between color names and their perception, resulting in easy to understand color buttons. The next iteration had all the colors in a single, scrollable line. We iterated further, arriving at this image.

bottom of page