Ari Nation

Ari, the Pad ATM provides self-service pad dispensers to women and girls in Kenya, along with technical and educational support for implementation. We redesigned their website into a unified platform featuring customizable dashboards, interactive maps, a resource library, and plans for a user-focused app to enhance menstrual health management (MHM), enabling data-driven program improvements and better resource allocation.

Project type: Dashboard Design, Product Strategy (Client)

Duration: 6 weeks

Role: UX/UI Designer, Researcher

Tools: FIGMA, Balsamiq, Mapbox

The Design Brief

Problem

Ari’s partners and others in the menstrual health ecosystem need real-time insight into menstrual hygiene services across Kenya so they can optimize their pad distribution and education programs.

Project Goal

To build an interactive dashboard that provides Ari’s menstrual health management (MHM) partners with data-driven insights to support program improvements and better resource allocation.

Quick Links

Discovery

What is Ari’s role in the MHM Ecosystem? What do users need and want?

IN THIS SECTION

  1. Business Analysis

  2. Service Design Mapping

  3. User Interviews

  4. User Persona

  5. Research Key findings

  6. Competitive Analysis

Business Analysis

We analyzed the existing business model and relationships between different partners in the menstrual health ecosystem. This helped us understand Ari’s role in the ecosystem, friction areas, and opportunities for enhancements.

In addition to analyzing the brief for key things to note, we watched an informational video about the business and dissected a funding pitch Ari had submitted to MIT to extract key USPs and KPIs.

Business Structure - B2B Model

  • Givers

    Givers (government organizations and non-profits) rent pad ATMS for schools, public restrooms, or community sites and provide menstrual health education to users.

  • Sellers

    Givers partner with pad manufacturers ("sellers") to purchase pads in bulk for their sites.

  • Girls

    Girls/Women are given a card with pre-loaded credit, allowing them to discreetly go to the bathroom and dispense a pad when necessary.

  • Ari

    Ari is responsible for ATM installation, maintenance, and technical support, as well as carrying out a baseline survey of students during program rollout.

Deliverables

In support of gaining funding to develop their new partner data platform Ari sought three key deliverables from our team during a three week sprint (which was ultimately extended to six weeks):

  • Research Insights: Comprehensive research and insights into what sort of data and metrics their partners would find useful for maintaining and improving their pad distribution and menstrual health education programs

  • Medium to High-Fidelity Prototype + Style Guide: A medium-to-high fidelity prototype and style guide demonstrating an outline of an MVP solution and overall visual direction

  • Product Roadmap

What We Gathered

  • Current Data Gathered

    • User uptake

    • Student and teacher card activity (used when a student card is lost/not working)

    • Sanitary pad dispensation

    • Manual pad dispersement (when an ATM is not working)

    • Behavioral/qualitative information

  • Current Impact

    • Serve 700+ girl

    • 20+ ATMs

    • 10,000+ sanitary pads dispensed

  • Impact Goals

    • Eradicate period poverty

    • Increase access to menstrual health education

    • Gender equality

Service Design Blueprint

To frame our initial understanding of the organizational structure and flow of data, we drafted a traditional service blueprint with girls and women at the center, surrounded by givers and sellers. However, the complexity of the ecosystem rendered this approach insufficient.

Concentric Data Flow Map

Pivoting, we ultimately settled on a concentric diagram, allowing us to focus more on data flow and levels of accountability rather than micro-level user journeys.

This method helped us to visualize Ari’s ecosystem more effectively and offered a bird’s-eye view during our collaborative client intake session, when we worked alongside the client to edit and co-design the final product.

Research Insights

To kickstart the research process, we conducted 7 remote, moderated research sessions on Zoom and Google Meet with users referred to us by the client.

The users were a mixture of ‘givers’ and ‘sellers,’ including representatives from pad manufacturing companies, NGOs, and local government.

Participant 5

Employee of Sustainable Pad Manufacturing Company

Seller

Participant 6

Employee of Government
Sanitation Program

Giver

Participant 7

Employee of Nonprofit
Org for Girls +
Ari Partner

Giver

Participant 2

Community Sanitation Organization Employee

Giver

Participant 1

Director of Community Based Organization for Girls

Giver

Participant 4

MHM Coordinator in County Government

Giver

Participant 3

Founder of Sustainable Pad Manufacturing Company

Seller

Key Interview Topics

  • Structure and function of their own organization

  • Relationship with Ari

  • Data they currently and would like to collect

  • Data collection, visualization and reporting methods and associated pain points

  • Accountability to other stakeholders

  • Any technical or legal constraints

We subsequently used the key insights from these interviews to model the average user through a persona.

Challenges + Surprises

Our interviews revealed that only one of the seven participants was an existing Ari partner, while the rest were active members of Kenya’s MHM community, with varying levels of awareness and interest in partnering with Ari. These discussions provided valuable insights into the broader MHM ecosystem, user perspectives, and partner needs. Feedback from the existing partner highlighted satisfaction with Ari's data platform—previously unknown to us—and areas for improvement.

Challenges during cross-cultural research, such as severe flooding in Kenya disrupting Wi-Fi and electricity, led us to adopt Google Meet over Zoom and prepare asynchronous backup surveys to mitigate delays.

User Persona

Zawadi

“I find it difficult to measure whether girls are actually using the pads provided to them, and in the correct, hygienic way as there is no measurement tool for this.”

What data is most important to Zawadi?

  • Regional impact metrics.

  • Social challenges affecting intervention success.

  • Trends in pad distribution and reach.

  • Tracking who has received MHM education.

  • Pain Points

    • Are girls using the pads they get?

    • Cultural taboos, shame, and other cultural factors

    • Socioeconomic factors play into period poverty

  • Beliefs

    Driven by the belief that period poverty can be combatted with:

    • Affordable + equitable access to menstrual products

    • Education around use, sanitation, and disposal

    • Financial independence

    • Tailored services

  • Needs

    • A means to ensure quality and consistency of data

    • Ability to track the location of pad distribution

    • Visibility into technical issues with the Ari machine

    • To protect the privacy of women and girls

    • Accurate data in order to prove the need for intervention

  • Wants

    • Efficient digital report submission to reduce administrative work and paper use

    • National Key Indicators

    • Centralized data system

    • Reducing service overlap and area over-saturation

    • Collaboration with similar organizations

Competitor Analysis

To identify potential areas for opportunity, we carried out competitor analysis, investigating a mixture of relevant organizations in the UK and some global organizations mentioned during our user interviews.

  • Aunt Flow

    • Pad subscription service - way for givers to seamlessly share their beneficiaries’ needs with sellers

    • Case studies - way to share success stories and best practices

  • MyPeriod

    • ‘Period health’ quiz - a potential way to test schools or sites to gauge if they are ready for an ATM

    • Interactive map - could we use markers with traffic light colors to indicate site need or ATM issues?

  • SuSanA

    • Offers a database of repositories, forums, and research

    • Videos to explain the discussion forum and website

    • Themed forum categories for knowledge sharing

  • BRIAN

    • Ability to choose what you’d like to track and customize the data and metrics you want

Definition

What is the problem? What resources and tools are appropriate?

IN THIS SECTION

  1. Problem Statement

  2. Heuristic Evaluation / Accessibility Audit

  3. Technical Analysis

Problem Statement

A combination of synthesis and prioritization led to the following problem statement:

Zawadi needs real-time insight into menstrual hygiene services across the MHM ecosystem so they can optimize their pad distribution and education programs.

Heuristic Evaluation + Accessibility Audit

During the interview process, we found out from the one existing partner that Ari actually does have a data platform. Our client had inadvertently not shared it with us initially, and the partner said they were highly satisfied with it, so we requested access.

In addition to receiving access to the partner platform, we received a sample of an existing baseline survey that the client carries out before implementing programs in schools and quarterly reports sent out to each partner.

We therefore decided to carry out a full audit of each of these components, in addition to Ari’s public-facing website, to see what we could extract, improve, and reuse.

  • Partner Data Platform

    • Existing data platform included filterable bar and line graphs on metrics like dispensation over time and dispensed pads vs. students.

    • Lacked useful metrics like average monthly pad usage.

    • Visual design was clean but lacked impact.

    • Included manual reporting for offline or malfunctioning ATMs.

  • Baseline Survey

    Surveys conducted before ATM setup at sites (mainly schools) assess:

    • Menstrual health and hygiene literacy

    • Water and sanitation quality

    • Pain management techniques

    • Partner organizations receive recommendations and a roadmap for menstrual health education.

    • Data collection and questions are solid but delivered in a static, visually unengaging PDF.

  • Quarterly Reports

    Quarterly impact reports sent to partners include:

    • Pad dispensation metrics

    • Manual pad distribution/teacher’s master card activity

    • User uptake and activity

    • Behavioral and quality of service reports

    • Data is strong but static, with no filtering or customization options.

    • Visual design is bold and engaging but lacks accessibility in some areas.

  • Public Facing Website

    Public-facing website highlights:

    • Powerful statistics, e.g., more women have internet access than sanitary pads.

    • Clear goals, USPs, and impact numbers, tailored to local culture.

    • Multiple ways to get involved.

    • Helpful FAQs.

    • Bold, exciting visual design, but with accessibility, hierarchy, and layout issues.

Our evaluation helped us identify the following opportunities for improvement:

  • Enhanced Dashboard Metrics: Simplify data visualization for easier usability.

  • Public Accessibility: Leverage internal data to benefit the wider MHM community.

  • Interactive Reports: Transform static PDFs into engaging, customizable formats.

  • Unified Branding: Extend the cohesive style of Ari’s website to their dashboards.

Technical Analysis

Before starting the design process, we attempted to consult with the developer to understand their preferred tech stack and integration plans, but the client encouraged us to proceed freely as developer discussions were ongoing. We researched and compared designing with Glide, used for the existing dashboard, versus creating a solution from scratch using flexible tools like BootstrapMade.

After evaluating scalability and functionality, we recommended building the new solution from scratch using Figma for optimal flexibility and long-term growth.

Glide (Current - Dashboard)

BootstrapMade/From Scratch (Current - Website)

  • Pros

    • Optimized for data visualization

    • No code

    • Already used, client-approved

  • Cons

    Limited flexibility regarding:

    • functionality

    • embedding external data components

    • visual design

  • Pros

    • Highly flexible regarding visual design and integrating external data components

    • Strategically, housing the solution within the current website allows for greater public visibility

  • Cons

    • Current clients and data would have to move over

    • May need continuous developer maintenance depending on CMS setup

Development

How might we facilitate knowledge sharing and collaboration as well as provide data visualization?

IN THIS SECTION

  1. Ideation / Sketching

  2. Wireframes

Ideation + Sketching

Moving into ideation, we did three rounds of ‘Crazy 8s’ considering three themes and associated sets of ‘How Might We’ statements. Our prioritized ideas ultimately led to our product proposal and initial set of wireframes for testing. Deprioritized ideas were delivered to the client in a product roadmap.

Wireframes

Due to time constraints resulting from cancelled, rescheduled, and delayed interviews, our wireframes were made rapidly using Balsamiq and focused more on the flow and key features rather than detailed content for testing purposes, which we brought in later when we created Figma prototypes for the second iteration.

Knowledge-Sharing + Collaboration

Thought Cycle 1

How might we enable Zawadi and partners to coordinate efforts and confidently track and share resources effectively?

How might we enable Zawadi to see realtime ecosystem-wide gaps in menstrual product supply and relevant baseline education?

    • Streamlines access to Ari’s company overview, goals, and impact data using concise, fact-focused content.

    • Allows partners to log into their dashboard or sign up directly, unifying platforms.

    • Links to an open-source map, resources, and FAQs, engaging potential partners while contributing to community knowledge.

    • An open-source, interactive map with a traffic-light system indicating levels of need to reduce aid overlap and encourage collaboration.

    • Displays served and underserved sites, enabling users to request or offer support.

    • Highlights partner locations and facilitates networking among MHM organizations.

  • A scalable repository developed by Ari and partners, featuring:

    • Video courses.

    • A partner and community directory.

    • Regional guidelines and MHM case studies.

    • Educational materials tailored for diverse contexts.

Partner Organization System Management

Thought Cycle 2

How might we enable Zawadi to monitor if the menstrual products they have distributed are being used safely and hygienically?

How might we make the data a tool for empowerment?

  • A personalized dashboard enabling partners to monitor and manage their ATMs effectively.

    Features include:

    • Alerts for ATM malfunctions or blackouts.

    • Tools for reporting technical issues and logging manual dispensations.

    • Visualized impact and usage statistics via graphs and callouts.

    • Storage for MHM educational materials.

    • Links to reports and customized maps.

    • A traffic-light map providing an overview of all partner sites to identify issues quickly.

    • Drill-down capabilities for site-specific insights, such as offline ATMs or site-wide blackouts, for targeted resolutions.

    • Digitalized reporting system integrating live data with existing PDF-style report content.

    • Includes links to baseline survey results and customizable graph displays for tailored reporting.

Education + Empowerment

Thought Cycle 3

These proposals were largely looking to the future and ways in which the core MVP could scale.

How might we help girls and women share their needs with organizations who want to help?

How might we enable Zawadi to tailor their program(s) according to the specific cultural and socioeconomic needs of the area(s) they are serving?

  • Addressing the lack of government standardization for MHM, this feature empowers partners with resources to enhance their programs, including:

    • Case studies showcasing successful MHM programs.

    • Video courses on best practices for program rollout.

    • Standardized curriculum templates for effective implementation.

  • Tailored resources to address regional challenges such as higher rates of teen pregnancy or alcoholism.

    Proposed features include:

    • Map filters to highlight regions facing specific contextual issues.

    • Sensitively designed resources to guide program implementation in these areas.

  • A direct platform for ATM users to engage actively in their menstrual health journey, featuring:

    • Menstrual cycle tracking tools.

    • Online education courses and anonymous Q&A forums for taboo topics.

    • Mechanisms for reporting product issues and sharing reasons for reduced ATM usage.

Deliver

What worked for users and what didn’t? What visual design changes will level up the user experience?

IN THIS SECTION

  1. Usability Testing / Iteration

  2. Visual Design Process

  3. Roadmap / Strategy

  4. Final Solutions

  5. Impact

  6. Reflections

Usability Testing

To validate our basic product proposal, we conducted remote, moderated sessions consisting of usability tests and brief interviews focusing on the following key flow:

Ecosystem Dashboard and Map > Login > Partner Dashboard and Maps > Partner Reports

We had planned to conduct a higher number of tests but due to cancellations, rescheduling, and time constraints, we were only able to conduct two, so we conducted our planned client review as a third test.

Participants

  • Founder of Ari

    Insight into business needs.

  • MHM Initiative Coordinator

    Representing partner organizations.

  • Researcher

    Academic perspective on MHM challenges.

Balancing Client + User Needs

Before our standard usability tests, we held a combined testing and feedback session with the client. The client raised concerns about the open-source data-sharing component, emphasizing the importance of anonymity for schools and partners. However, participants strongly supported shared resources, with one calling it "unethical to keep data to ourselves," and a partner even requested their logo be prominently featured.

At the next client meeting, we shared this quote and presented user insights to defend the proposal while addressing minor usability issues identified during testing.

Findings

What Worked

  • Data Sharing: Enthusiasm for ecosystem-wide collaboration and open-source insights.

  • Data Visualization: Bold callouts and interactive charts enhanced usability.

What Needed Improvement

  • Balancing Privacy: Ensuring anonymity for sensitive data without losing transparency.

  • Layout Hierarchy: Prioritizing alerts and quick-action buttons for better navigation.

Visual Design Process

To provide the client with high-level visual direction, we explored colors, patterns, and typography to apply to the next iteration of our MVP design.

  • Moodboard & Style Guide

    Inspired by vibrant Ankara prints, Afro-futurism, and Ari’s existing branding, our proposed style guide reflected Ari’s dynamic identity. A balanced color palette and thoughtful typography choices unified the user interface across all platforms.

  • Color Palette

    Taking inspiration from the maximalism-oriented moodboard as well as the existing website and PDF reports, our final color palette incorporated a range of bright tones paired with a neutral beige and greyscale.

  • Typography

    We decided to retain the typefaces in use on the existing website as they are accessible, easy to read, clean, and web safe, while still having a degree of personality.

Our Final Solutions

Moving into the second iteration, we collaboratively translated the design to Figma, drastically increasing the fidelity with a focus on the three core sections, plugging in updated content, and addressing the testing feedback.

High-Fidelity Wireframes

  • Ecosystem Dashboard + Map

    A real-time view of menstrual product distribution and educational initiatives.

    • Suggested video introducing Ari Nation

    • Cards explaining why one should join Ari Nation and different ways to get involved with varying levels of commitment, pulling from existing website copy, with CTA buttons to sign up

    • Anonymized interactive ecosystem map allowing the user to see need and aid across the ecosystem

    • Map filters include Ari partners, national MHM organizations, counties, and contextual issues, with the ability to toggle a heatmap showing need levels on and off

    • Limited resources, with the incentive to sign up to receive full access to the open-source library

  • Partner Dashboard

    Tools for data analysis, resource monitoring, and actionable insights.

    • Map showing beneficiary schools with the ability to click into a zoomed in ATM map

    • Snapshots of the ATM statuses and the ability to directly report problems

    • Charts showing pad stock, with low stock alerts

    • Customizable graph showing active vs. inactive users so partners can catch dips and spikes and quickly address any issues

    • Top tips for increasing usage, encouraging users to explore other resources with in the platform

  • Interactive Reports

    Dynamic reporting formats for deeper exploration.

    • Ability to filter by school or by ATM

    • Ability to customize graph displays (options include line graph, bar graph, pie chart, and table views)

    • Snapshot of lifetime and monthly impact

    • Option to download as PDF to share with funders or other stakeholders, with the ability to select what is included

  • Baseline Survey Dashboard

    Accessible results integrated with the government’s educational curriculum.

    • Snapshot of baseline survey results, with the ability to click into the full report

Final Prototype

The Maps

  • Open-Source Map

  • Open-Source Heatmap

  • Partner Map (Schools)

  • Partner Map (ATMs)

Roadmap + Strategy

In addition to a research summary, the Figma prototype and a developer package including the Mapbox asset, we provided the client with a comprehensive roadmap and strategy document. below are some of the highlights.

  • Immediate Priorities

    • Ecosystem dashboard and interactive map

    • Partner dashboard and interactive map

    • Detailed, customizable reports

    • Cards for FAQs page

    • Dashboard for baseline survey results

    • Access to the government educational curriculum

  • Medium-Term Goals

    • Educational videos and guidance

    • ‘Create your own metric’ tool

    • Account or app for the ATM users themselves to track their periods, access online menstrual education courses, ask taboo questions anonymously, and report issues or reasons for reduced ATM usage

  • Long-Term Vision

    • Menstrual health management meetings and events page

    • Partner directory

    • International expansion

The Impact

Optimization: Streamlined Ari’s offerings into a unified, accessible platform with advanced tracking and reporting.

Collaboration: Fostered ecosystem-wide resource sharing, addressing disparities and improving program impact.

Strategic Shift: Inspired by user insights, Ari pivoted toward a broader, data-driven vision for MHM.

Client Testimonial

"Teaghan and the team delivered everything I envisioned but couldn’t articulate. Their dedication transformed our approach to MHM with real user insights and exceptional design."


— Munira Twahir, Founder and CEO of Ari

Reflections

  • Gather Context Early

    Understanding the client’s vision, goals, and constraints from the outset is crucial to shaping a design that aligns with their needs and ensures the project starts on the right path.

  • Verify Users' Roles

    Double checking role and relationship of recommended users for research to the business.

  • Feedback Loops Are Key

    Continuous collaboration and feedback are key to staying aligned with the client's expectations and quickly addressing any concerns. This helps refine the design direction and ensures a smooth iteration process.

  • Test Assumptions

    Directly testing client assumptions against user insights can validate initial findings and inspire strategic shifts, as demonstrated by our second round of interviews.