Skip to content
LinkedIn

UX Case Study: Flourish - An App to Help Female Refugees with Sexual and Reproductive Health

Introduction:

As part of an international Women's Day hackathon, my teammate and I set out to create a mobile application that would make a real impact. Our brief was clear: demonstrate how technology can assist refugee women and girls in accessing sexual and reproductive healthcare information and resources. With just 48 hours to work, we designed and developed Flourish, a high-fidelity prototype that would go on to win the hackathon . Flourish provides a safe and anonymous platform for women to learn about Female Genital Mutilation (FGM) and access support in four key areas: my body, my mind, my rights, and my community.

Mockups

The Process:

Research and Planning:

To kick off the design process, we conducted extensive research on FGM and its effects on women's sexual and reproductive health. We also explored the unique challenges and barriers faced by female refugees when seeking healthcare access and information. This research helped to inform the design and functionality of the Flourish app.

Problems

  • Language barrier: In a survey of Syrian refugees in Lebanon, the International Rescue Committee found that language barriers were a significant challenge for refugees accessing healthcare, with 84% of respondents reporting that they had difficulty communicating with healthcare providers due to language barriers. The survey also found that refugees faced other challenges in accessing healthcare, including cost and lack of information. (Source: International Rescue Committee, "Syrian Refugees in Lebanon: The Humanitarian and Development Impact")

  • Stigma: In a report published by the United Nations Population Fund (UNFPA), it was noted that FGM is often surrounded by deep-seated social norms and beliefs, which perpetuate the practice and discourage open discussion or criticism. This can lead to significant stigma and discrimination for women who have not undergone the procedure, as well as for those who have undergone it. (Source: UNFPA, "Female genital mutilation: A visual overview")

  • Access to technology: According to a 2019 report by the UN Refugee’s Agency in refugee camps, 85% of households had at least one mobile phone and 77% of refugees surveyed in a sample of 11 countries owned a mobile phone while 22% of refugees have access to a computer or tablet. (Source: UNHCR Global Trends Report 2019)

  • Misinformation: The UNFPA has also noted that there are a number of myths and misconceptions about FGM that can contribute to its continuation, including the belief that it is necessary for a girl's physical and emotional well-being, or that it is a cultural tradition that should be respected. (Source: UNFPA, "Female genital mutilation: A visual overview")

Solutions

  • Integrated translation: Our app will provide multilingual support and translate information into the language(s) spoken by refugees. On the main menu, we will show language options in their original scripts. Another option we have considered is the ability to start communities by language.

  • Anonymous forums: The forums will all be completely anonymous so that women can ask questions without fear of judgement.

  • Mobile first approach: We will design for mobile first seeing as refugees are more likely to have access to a mobile phone than a computer or tablet.

  • Moderated forums: We will have moderated forums to avoid the spread of misinformation at all costs.

Wireframing:

With a clear understanding of the needs and preferences of the target users, we created wireframes to establish the basic layout and functionality of the app. They also developed a framework for the information architecture, ensuring that the app's content was organised in a way that was easy to navigate.

Digital wireframes

Prototyping:

Using Figma, we created a clickable prototype that allowed us to test the app's functionality and user experience. The prototype included all four sections of the app: my body, my mind, my rights, and my community. Users could access educational resources about FGM, bookmark them for later use, and seek professional help, legal advice, and therapy. In the my community section, users could join different communities and participate in safe and moderated forums. Users were able to see comments in their original language and a translated version.

You can try the the low-fidelity prototype here.

Low-fi prototype

Internal Testing:

To ensure that the app was user-friendly and met the needs of its target users, the team conducted internal testing. This involved sharing the prototype with colleagues and soliciting feedback. The team received valuable feedback on the app's design and functionality, which they used to make improvements.

Iteration:

Based on the feedback received during internal testing, we made changes to the app's design and functionality. We decided to make the following changes.

  • The onboarding experience: In the onboarding experience, we made a critical change after conducting usability tests. As we learned more about FGM, we learned that many survivors do not recognise themselves as survivors of FGM due to cultural norms and perceptions. To address this issue, we included a brief introduction to FGM to educate users and help them understand the issue. By doing this, we hoped to empower users and increase their likelihood of engaging with the app's resources.

  • Bookmarks: As the app's content continued to expand, we identified a potential usability issue. Users might have difficulty navigating the growing number of subsections related to physical health, mental health, and legal issues. To address this, we added a bookmark symbol to allow users to save articles for later. This feature enabled users to quickly access relevant content without having to search through a lengthy list of categories.

  • Forum features: We added three new features to our forums. First, we added a 'Browse' option to help users explore different topics and discussions. Second, we included an 'About' section to provide more information about the community and its guidelines. Lastly, we added a 'Pinned Articles' section to highlight popular or useful resources for easy access. These changes were aimed at improving the overall usability and user experience of the app.

Onboarding before and after

Bookmarks before and after

Forums before and after

Visual Design Considerations:

Colour palette and font picture

  • Colour palette: We chose purple because it is associated with femininity, creativity, and empathy. The colour purple is also commonly used to represent International Women's Day, making it a natural choice for this app.

  • High contrast colours: We went for high contrast colours to ensure that the app is accessible to individuals with visual impairments or who may be using the app in low-light conditions. This choice was validated when we checked WebAIM and saw that the colour scheme we chose adhered to WCAG AAA standards.

  • Font: We chose Plus Jakarta Sans as a font because it has a modern, clean, and approachable feel that would appeal to the target audience. Additionally, Plus Jakarta Sans is highly legible and easy to read.

  • Icons: We chose large, friendly-looking icons to make the app more approachable and easy to use. The icons were designed to be simple and easy to understand, with clear and concise labels that communicate their purpose. The icons were also designed to be large enough to be easily clickable, even for users who may be using the app on a small screen.

  • App logo: We were mindful to ensure that the lotus icon would be discreet. We wanted to ensure that the app would not draw unwanted attention from family members or other individuals who may be monitoring the user's device, and to protect their anonymity and safety. By choosing the lotus symbol, which is a symbol of growth and transformation, we aimed to make sure the app remained discreet while still conveying a sense of empowerment and positivity to its users.

Mock Ups:

Mobile mock ups

High-Fidelity Prototype:

You can try the high-fidelity prototype here.

Responsive Designs:

Since we only had a tight deadline of 48 hours to complete our hackathon project, we decided to prioritise designing for mobile devices, as our research indicated that refugees are more likely to have access to mobile phones than computers or tablets. But after the hackathon, we took some time to think about how we could make our designs more flexible and accessible to users with different needs and preferences.

Mobile mock ups

Mobile mock ups

Conclusion:

The Flourish app is a powerful tool for educating and supporting female refugees affected by FGM. It provides a safe and anonymous platform for women to learn about FGM and access the resources they need to make informed decisions about their health and wellbeing. The app's four sections - my body, my mind, my rights, and my community - offer a comprehensive range of information and support. Although the team was unable to conduct user testing due to time constraints and lack of access to the target user group, the app's design and functionality were informed by extensive research and internal testing. Overall, the Flourish app has the potential to make a real difference in the lives of women around the world.

What I learned:

Participating in a 48-hour hackathon was an intense and highly rewarding experience for me as a UX designer, particularly in terms of designing for accessibility. The challenge of creating an app that could be easily used by refugees with different backgrounds, experiences, and abilities was significant, and it forced me to think deeply about how to design a truly inclusive experience.

Overall, participating in the hackathon provided me with valuable experience and skills that I can apply in future projects. I learned the importance of effective communication, prioritisation, and collaboration when working to a tight deadline, and gained a deeper understanding of designing for accessibility. It was an exhilarating experience that pushed me to be my best and work with my teammate to create something truly meaningful.