Based on @fourdropsofus social work
01 - About the project
Four Drops of Us is a book and social profile about exploring our shared experience of having a menstrual cycle as a source of connection. The author, Cateau Oonk has been doing an amazing work while collecting experiences and voices for her book, creating a community of people to explore the menstrual cycle experience. As a fan of her work I decided to sketch and develop an MVP app that could serve as digital platform for the work.
02 - Goal & Problems
1
Four Drops of Us needs to reach a broader audience to scale up their community. Expanding their network relying on social networks is not enough anymore.
2
Event subscription
The community is organizing live events to gather people together and create a safe space. Making people register to their events relying on third parties platforms is not ideally so they would to have their own platform to handle purchases and event subscriptions.
3
Focus on communication
The author is currently sharing her work via Instagram. This constraints her to have a static format or presenting her content.
03 - Personas
Patricia
Business Analyst from Barcelona
Patricia is 26 y.o. business analyst from a large venture based in Barcelona. She is borned and raised in the capital of Spain and conducts a regular life sharing her appartment with other 5 people. She never talked freely about her period and considers it a taboo.
Jennifer
Fashion Designer from the USA
Jennifer is an ambitious 21 y.o. fashion designer that is spending a six month period in spain for shool. Menstrual cycle is not a taboo for her since her family always created a safe space for the topic.
04 - Typography
The Season Serif Font
To create a connection between social medias and this new app, the chosen heading font is the same of the one used by the team of FDoU. It's elegant, classy and elevates the style of the app.
SF Pro
To ensue accessibility and readability of the content on iOS platforms, the content of the app will use native Apple font.
05 - Main Colors
HEX #1E1E1E
Dark Grey
Dark eye-relaxing background color.
HEX #A90003
Vivid Red
Charming and vibrant accent color.
HEX #FEF8EE
Light beige
Bright calm color highly readable in dark contexts.
06 - Wireframing
Home Page
Event List Page
Event Page
Blog Post Page
07 - Development
Wireframes were lately translated into proper designs using Figma. With Figma as base for development, I started implementing the FourDrops app. I decided to test my self implementing the app with The Composable Architecture (TCA) leveraging its powerful, state-driven architecture. The view are all implemented in SwiftUI and only the most complicated layout pieces are in UIKit.
SwiftUI
UIKIt
TCA
Want to know more?
View Project on Github: