Flow Care App

UX/UI Design

Figma Prototyping

Visual Identity

Project Year

2025

Client

HoneOkello Augustine Kezzy-Founder

Industry

NGO Uganda Africa

Flow App Design

FlowCare is a mobile wellness app designed specifically for teenage girls living in Ugandan villages, built in collaboration with the NGO Plavio. The goal was to provide a culturally respectful, easy-to-use digital tool for tracking menstrual cycles, promoting hygiene, and empowering young users with education and self-care tips.

This case study walks through the research, personas, design process, and culturally aware decisions that helped shape FlowCare into a compassionate and useful digital solution.

Visual Identity & Branding

Logo Concept

The FlowCare logo was designed to reflect the values of compassion, empowerment, and dignity. The centerpiece is a drop of menstrual blood, housing a heart that symbolizes care and self-love. Beneath it, a ripple effect reinforces the idea that menstrual education and empowerment can create waves of change—not just for one girl, but for entire communities.

This symbol is soft, feminine, and dignified—deliberately crafted to counter the shame often associated with periods in many cultures.

Color Palette

To support the branding, I created a custom color system using shades of pink, purple, earth tones, and soft neutrals. These colors evoke safety, warmth, and confidence—key emotional anchors for the app’s young user base.

  • Pinks were used to symbolize softness and care.
  • Purples convey strength, richness, and femininity.
  • Pastel shades give the UI a non-intimidating, welcoming feel, especially for first-time users.

This palette was applied consistently across the app, including icons, backgrounds, cards, and buttons, ensuring brand cohesiveness and user trust.

Visual Identity & Branding

Logo Concept

The FlowCare logo was designed to reflect the values of compassion, empowerment, and dignity. The centerpiece is a drop of menstrual blood, housing a heart that symbolizes care and self-love. Beneath it, a ripple effect reinforces the idea that menstrual education and empowerment can create waves of change—not just for one girl, but for entire communities.

This symbol is soft, feminine, and dignified—deliberately crafted to counter the shame often associated with periods in many cultures.

Color Palette

To support the branding, I created a custom color system using shades of pink, purple, earth tones, and soft neutrals. These colors evoke safety, warmth, and confidence—key emotional anchors for the app’s young user base.

  • Pinks were used to symbolize softness and care.
  • Purples convey strength, richness, and femininity.
  • Pastel shades give the UI a non-intimidating, welcoming feel, especially for first-time users.

This palette was applied consistently across the app, including icons, backgrounds, cards, and buttons, ensuring brand cohesiveness and user trust.

The Challenge:

Designing for Limited Digital Access and Health Literacy

Designing FlowCare was not only a technical task—it was a mission rooted in social change, empathy, and cultural sensitivity. As a menstrual health app intended for Ugandan girls in rural and underserved areas, FlowCare had to overcome a series of layered and interdependent challenges. These challenges spanned digital access limitations, emotional barriers, educational gaps, and cultural nuances. Here’s a deeper look at the core design challenges the project addressed:

1. Overcoming Limited Digital Access
A key challenge was ensuring that the app could function reliably in low-tech environments. Many users rely on basic smartphones with limited data, shared usage, and intermittent connectivity. To make FlowCare accessible, the app was designed to be lightweight, fast-loading, and data-efficient. Critical features and content were optimized for offline access and future caching, ensuring that girls could use the app even with limited or no internet connection.

2. Addressing Low Health Literacy and Menstrual Stigma
Menstrual health remains a sensitive and stigmatized subject in many parts of Uganda, compounded by a lack of formal reproductive education. This required a content strategy that prioritized plain, respectful language, non-technical explanations, and visual storytelling. By using illustrations and iconography, the app made it easier for users to understand important health concepts, regardless of literacy level, while promoting a message of empowerment and dignity.

3. Creating Emotional Safety and Trust
For many girls, FlowCare may be their first private and supportive space to learn about menstruation. It was critical to build an experience that felt emotionally safe, welcoming, and non-judgmental. The interface featured a warm tone of voice, relatable illustrations, and a strong sense of community. Features like the “Ask-A-Sister” forum allowed users to connect with peers anonymously, reinforcing the idea of sisterhood and mutual support rather than shame or fear.

4. Ensuring Cultural Relevance
Most health and wellness apps are built with Western audiences in mind, which can lead to cultural disconnects. To resonate with Ugandan girls, FlowCare was visually and contextually grounded in African culture. Custom illustrations of African girls in village settings replaced generic icons. The app avoided references to unfamiliar products or language, instead relying on visuals and messages that felt authentic and locally meaningful.

5. Designing for First-Time Smartphone Users
Many users were expected to be new to mobile apps, which required rethinking standard UX patterns. The interface needed to be simple, intuitive, and forgiving—with large tap targets, linear navigation, and minimal learning curves. Every element, from forms to feedback messages, was designed to prevent confusion and build user confidence. Clarity and ease-of-use were top priorities, helping users gradually adopt new digital behaviors without frustration.

The Challenge:

Designing for Limited Digital Access and Health Literacy

Designing FlowCare was not only a technical task—it was a mission rooted in social change, empathy, and cultural sensitivity. As a menstrual health app intended for Ugandan girls in rural and underserved areas, FlowCare had to overcome a series of layered and interdependent challenges. These challenges spanned digital access limitations, emotional barriers, educational gaps, and cultural nuances. Here’s a deeper look at the core design challenges the project addressed:

1. Overcoming Limited Digital Access
A key challenge was ensuring that the app could function reliably in low-tech environments. Many users rely on basic smartphones with limited data, shared usage, and intermittent connectivity. To make FlowCare accessible, the app was designed to be lightweight, fast-loading, and data-efficient. Critical features and content were optimized for offline access and future caching, ensuring that girls could use the app even with limited or no internet connection.

2. Addressing Low Health Literacy and Menstrual Stigma
Menstrual health remains a sensitive and stigmatized subject in many parts of Uganda, compounded by a lack of formal reproductive education. This required a content strategy that prioritized plain, respectful language, non-technical explanations, and visual storytelling. By using illustrations and iconography, the app made it easier for users to understand important health concepts, regardless of literacy level, while promoting a message of empowerment and dignity.

3. Creating Emotional Safety and Trust
For many girls, FlowCare may be their first private and supportive space to learn about menstruation. It was critical to build an experience that felt emotionally safe, welcoming, and non-judgmental. The interface featured a warm tone of voice, relatable illustrations, and a strong sense of community. Features like the “Ask-A-Sister” forum allowed users to connect with peers anonymously, reinforcing the idea of sisterhood and mutual support rather than shame or fear.

4. Ensuring Cultural Relevance
Most health and wellness apps are built with Western audiences in mind, which can lead to cultural disconnects. To resonate with Ugandan girls, FlowCare was visually and contextually grounded in African culture. Custom illustrations of African girls in village settings replaced generic icons. The app avoided references to unfamiliar products or language, instead relying on visuals and messages that felt authentic and locally meaningful.

5. Designing for First-Time Smartphone Users
Many users were expected to be new to mobile apps, which required rethinking standard UX patterns. The interface needed to be simple, intuitive, and forgiving—with large tap targets, linear navigation, and minimal learning curves. Every element, from forms to feedback messages, was designed to prevent confusion and build user confidence. Clarity and ease-of-use were top priorities, helping users gradually adopt new digital behaviors without frustration.

User Research & Personas

UX/UI Designer & Developer

As the sole designer on this project, I was responsible for the complete UI/UX design, branding, and visual storytelling of the app. This included creating:

  • The full visual identity and logo
  • Custom color palette and UI components
  • Layouts and screen flows for all features
  • Illustrative support and iconography
  • User experience strategy tailored for the cultural context of rural Uganda.

This project was both a technical and emotional journey, combining health research, social advocacy, and user-centered design.

Tools Used

  • Figma:
    Used extensively for wireframing, prototyping, UI component design, and final high-fidelity mockups. Figma enabled fast iteration and responsive layout structuring across mobile screens.
  • Canva:
    Assisted in quick layout tests, typographic hierarchy, and accessible visual compositions for print or presentation purposes.
  • Adobe Illustrator & Photoshop:
    Where needed, I refined icons, adjusted color palettes, and polished image assets for visual clarity and consistency.
  • Leonardo AI:
    I used Leonardo AI to create custom, culturally relevant illustrations and visual assets for the app. This allowed me to reflect authentic African characters and village environments that would resonate with users and build trust. The AI tool was instrumental in producing emotion-driven visuals at scale—faster than traditional illustration workflows.

Combining Leonardo AI’s image generation with Figma’s design precision gave me full control over the visual language and tone of the app. These tools enabled me to design an inclusive, emotionally supportive product without sacrificing scalability or cultural context.

UX/UI Designer & Developer

As the sole designer on this project, I was responsible for the complete UI/UX design, branding, and visual storytelling of the app. This included creating:

  • The full visual identity and logo
  • Custom color palette and UI components
  • Layouts and screen flows for all features
  • Illustrative support and iconography
  • User experience strategy tailored for the cultural context of rural Uganda.

This project was both a technical and emotional journey, combining health research, social advocacy, and user-centered design.

Tools Used

  • Figma:
    Used extensively for wireframing, prototyping, UI component design, and final high-fidelity mockups. Figma enabled fast iteration and responsive layout structuring across mobile screens.
  • Canva:
    Assisted in quick layout tests, typographic hierarchy, and accessible visual compositions for print or presentation purposes.
  • Adobe Illustrator & Photoshop:
    Where needed, I refined icons, adjusted color palettes, and polished image assets for visual clarity and consistency.
  • Leonardo AI:
    I used Leonardo AI to create custom, culturally relevant illustrations and visual assets for the app. This allowed me to reflect authentic African characters and village environments that would resonate with users and build trust. The AI tool was instrumental in producing emotion-driven visuals at scale—faster than traditional illustration workflows.

Combining Leonardo AI’s image generation with Figma’s design precision gave me full control over the visual language and tone of the app. These tools enabled me to design an inclusive, emotionally supportive product without sacrificing scalability or cultural context.

UX/UI Designer & Developer

As the sole designer on this project, I was responsible for the complete UI/UX design, branding, and visual storytelling of the app. This included creating:

  • The full visual identity and logo
  • Custom color palette and UI components
  • Layouts and screen flows for all features
  • Illustrative support and iconography
  • User experience strategy tailored for the cultural context of rural Uganda.

This project was both a technical and emotional journey, combining health research, social advocacy, and user-centered design.

Tools Used

  • Figma:
    Used extensively for wireframing, prototyping, UI component design, and final high-fidelity mockups. Figma enabled fast iteration and responsive layout structuring across mobile screens.
  • Canva:
    Assisted in quick layout tests, typographic hierarchy, and accessible visual compositions for print or presentation purposes.
  • Adobe Illustrator & Photoshop:
    Where needed, I refined icons, adjusted color palettes, and polished image assets for visual clarity and consistency.
  • Leonardo AI:
    I used Leonardo AI to create custom, culturally relevant illustrations and visual assets for the app. This allowed me to reflect authentic African characters and village environments that would resonate with users and build trust. The AI tool was instrumental in producing emotion-driven visuals at scale—faster than traditional illustration workflows.

Combining Leonardo AI’s image generation with Figma’s design precision gave me full control over the visual language and tone of the app. These tools enabled me to design an inclusive, emotionally supportive product without sacrificing scalability or cultural context.

High-Fidelity Wireframes

Features Overview

Menstrual Cycle

At the core of FlowCare is a clean, visual calendar tracker. Users can see their predicted cycle days highlighted in a friendly, intuitive layout. This helps users plan around their period and understand their own patterns better.

Educational Resources

Sections like “Hygiene Tips”, “Period Wellness”, and “Body Education” deliver essential information in bite-sized, encouraging content blocks. Paired with culturally relevant illustrations, these modules are both informative and emotionally resonant.

Ask-A-Sister

Sections like “Hygiene Tips”, “Period Wellness”, and “Body Education” deliver essential information in bite-sized, encouraging content blocks. Paired with culturally relevant illustrations, these modules are both informative and emotionally resonant.

Daily Log

Sections like “Hygiene Tips”, “Period Wellness”, and “Body Education” deliver essential information in bite-sized, encouraging content blocks. Paired with culturally relevant illustrations, these modules are both informative and emotionally resonant.

Offline Considerations

Because internet access can be inconsistent in rural areas, the app is designed to work with minimal data usage, and content is planned to be downloadable for offline reading in future updates.

Menstrual Cycle

At the core of FlowCare is a clean, visual calendar tracker. Users can see their predicted cycle days highlighted in a friendly, intuitive layout. This helps users plan around their period and understand their own patterns better.

Educational Resources

Sections like “Hygiene Tips”, “Period Wellness”, and “Body Education” deliver essential information in bite-sized, encouraging content blocks. Paired with culturally relevant illustrations, these modules are both informative and emotionally resonant.

Ask-A-Sister

Sections like “Hygiene Tips”, “Period Wellness”, and “Body Education” deliver essential information in bite-sized, encouraging content blocks. Paired with culturally relevant illustrations, these modules are both informative and emotionally resonant.

Daily Log

Sections like “Hygiene Tips”, “Period Wellness”, and “Body Education” deliver essential information in bite-sized, encouraging content blocks. Paired with culturally relevant illustrations, these modules are both informative and emotionally resonant.

Offline Considerations

Because internet access can be inconsistent in rural areas, the app is designed to work with minimal data usage, and content is planned to be downloadable for offline reading in future updates.

Figma Makeathon Participation

This year, I was thrilled to join the Figma Makeathon powered by Contra—a vibrant global competition where thousands of designers collaborated and competed using the newest Figma Make technology. You can read more about the event here.

For this challenge, I decided to take my existing FlowCare app’s high-fidelity wireframes and bring them to a whole new level. Using my detailed design foundations, I immersed myself in Figma Make’s rapid prototyping features and experimented freely with new layouts, personalized content, and AI-assisted tools.

Through this process, my FlowCare app transformed from static wireframes into an engaging, interactive digital experience specifically tailored to empower Ugandan girls. Figma Make gave me the flexibility to adapt quickly, create more compelling stories, and demonstrate the true impact of the app. The final result is a live, story-driven web prototype that I’m immensely proud to share: FlowCare App

Participating in the Makeathon was one of the highlights of my year. I was able to learn from the global design community, push my creative limits, and discover how AI can accelerate and enrich our workflows. It was rewarding to see my app evolve and to connect with other designers who value innovation and empathy.

Final Outcome & Impact

Bringing FlowCare to life has been an incredibly rewarding journey—one that truly evolved during my participation in the Figma Makeathon powered by Contra. By transitioning my high-fidelity wireframes into an interactive Figma Make prototype, I was able to push the project’s boundaries and demonstrate its core mission in a way that feels both engaging and authentic.

FlowCare’s development demanded more than good design—it called for empathetic problem-solving that honored the realities of its users. Each of these challenges was turned into an opportunity to make the app more inclusive, compassionate, and impactful. By bridging technology, culture, and human-centered design, FlowCare provides a safe, empowering space for girls to take control of their menstrual health—on their own terms.

Designing FlowCare was more than just a UX challenge—it was a deeply human endeavor. It demanded empathy, cultural research, and storytelling to translate a taboo topic into an empowering experience.

Every design decision, from the curve of the drop in the logo to the shade of purple in a tab bar, was made with intention: to help a girl feel safe, seen, and supported. This is the power of design when guided by compassion.

Explore the live prototype:
FlowCare App Figma Makeathon