Embedded Files
Focused study ⬇️
Manchoufouch case study.pdfComplete case study ⬇️
Manchoufouch is a mobile application that allows users to report all violences based on gender and sexuality in Morocco, and to educate themselves about their rights and sexuality.
Project duration:
September 2023 - January 2024
The problem:
In Morocco, Homosexuality is criminalized and many individuals face societal rejection, discrimination, and abuse with limited means to seek help or educate themselves about their rights and themselves.
Even though the law 103.13 protects women subject to violences, only 54% of the population is aware of it
The goal:
To create a digital safe space where marginalized individuals can access vital resources, report abuse, and find support.
My role:
Lead UX Designer and UX Researcher
Responsibilities:
Conducting user research
Creating personas
Developing problem statements
Wireframing and prototyping
Usability studies
User research
Summary
Our primary user research began with qualitative interviews, targeting those marginalized in Moroccan society. Initially, we presumed most users wanted a discreet platform due to societal stigma. Post-research, we understood the diverse needs – from LGBTQ+ individuals seeking community support to illiterate women needing audiovisual content.
Persona 1: Semir
Problem statement:
Samir is a gay man in a conservative society who needs a confidential and inclusive website to find supportive communities, learn about gender and sexuality, and report any discriminatory incidents because he wants to safely explore his identity and find acceptance and support.
User Journey Map
Persona 2: Layla
Problem statement:
Layla is a woman subject to violence from her partner who needs a secret and safe way to get help and information because she wants to protect herself and her children and is scared of what her partner might do.
User Journey Map
Persona 3: Fatima
Problem statement:
Fatima is a woman trapped in a dangerous place who needs a hidden and safe way to get help and information because she wants to escape her scary situation without her husband finding out.
User Journey Map
Ideation
In our ideation phase, we tailored our designs on the immediate emotional and informational needs of our users.
Given that many users could be in distress or urgent situation when accessing the app, we prioritized intuitive navigation, clear calls to action, accessibility and proximity.
Wireframes
Wireframes for Home Page
The map, Ressources and CTA Button were chosen to create the first digital wireframe. Users need to access immediate help and know which direction to take.
Digital Wireframes
The map shows hospitals, police stations, shelters and safe spaces. We also collaborated with a number of institutions and trained them to provide safe spaces to women and the LGBTQI+ Community.
Along with the emergency button that evolved during the stages, both elements are vital to persons in immediate danger.
Users should promptly receive assistance if violence arises. The system also discreetly activates both the microphone and camera recordings. Additionally, the map feature offers an offline mode, subject to the user's phone storage capacity.
Usability studies
Study type: Moderated usability study with our social worker
Location: Rabat Morocco and remote
Participants: 5 participants
Length: 20-25 minutes
Findings
“I should take measures before an emergency happens.”
Safety Measures Access
The safety measures, one of our main ressources are hard to locate.
Insight: make them on the splash screen
"The word "Report" is confusing.
What am I reporting?"
Report button
Terms and steps weren't explicit enough for our users.
Insight: Add illustrations and steps, and provide a clearer name for the report section.
“Okay i report but what happens when I need immediate assistance?”
Post-Submission Clarity
Users are unsure about what happens after they submit a report.
Insight: Users need assurance and understanding of the process after reporting and should have access to emergency ressources.
Mockups Before and after usability studies 1 and 2
All the resources should be made in the home screen taking into account emergency. And labels had to be more clear. The pages IA and navigation bar had to be rethinked.
Home Page
Emergency Support Page
Report Page
The video is a tutorial of how to use the app and offers
Form to Report Pages
During a national crisis, we faced a unique challenge with our Moroccan audience. They are both emotionally driven and innately curious. In their urgency, many aimed to find solutions quickly, occasionally skipping essential steps. This became evident when we offered our free services: to handle the influx of requests, we had to categorize them by priority and urgency. Initially, when we only utilized required labels on our form, a mere 28% of users provided complete information. However, after incorporating an attention icon and emphasizing the message, "Attention: Incomplete information will hinder access to our services," we noticed a significant increase, with 40% now offering more thorough data.
Yet, even with these improvements, we still encountered some issues. We introduced a mandatory online form, and three users pointed out it wasn't user-friendly. They only grasped its workings after we clarified the necessity of filling in all fields. An intriguing observation was that when we requested email addresses without marking it as mandatory, every single user provided it.
Drawing from this experience, and considering our users' characteristics and behaviors, we decided on the tutorial video approach. The autoplay feature was set as the default, compelling users to watch the necessary steps before accessing the form. But understanding the diverse needs of our audience, we also ensured they could close the video at the outset if they wished. Moreover, to cater to those needing extra assistance, an information button is embedded in the form, redirecting them to the video whenever required.
Learning Center
Users willing to learn also want quick access to the blog and are not okay with more steps, that tends to look complicated for them. We also decided to remove the emergency button as it is accessible from all the other pages and users tend to be confused regarding the search button as they are used to having it on the top right corner.
All participants expressed a preference for real images, feeling that the illustrations seemed less serious. After conducting usability study 2, we discovered the most intuitive layout for our articles and the layout had to be adjusted.
Prototype after Usability Study 2
What changed after usability study 3
Simplifying Navigation: The Hamburger Menu Revelation
During Usability Study 3, an interesting revelation came to light. We observed that users rarely interacted with the hamburger menu icon. Instead, they preferred direct navigation to their profile via the nav bar. This insight led us to rethink our approach. We decided to declutter the interface by removing the hamburger menu, focusing on a more streamlined, user-friendly navigation experience.
Interactive Forms: Ease and Efficiency
We've always believed in making things easier for our users. The interactive form with its dropdown menu is a testament to this belief. It's designed to be straightforward yet comprehensive, ensuring users can provide all necessary information without feeling overwhelmed. We've clearly marked the required fields to prevent incomplete submissions, striking a balance between thoroughness and user convenience.
Iconography and Design: Less is More
In a platform rich with icons, it's easy for essential features to get lost in the visual noise. Recognizing this, we've simplified the help button, aligning it with our graphic charter for a more cohesive look. This subtle change significantly enhances the user interface's clarity and accessibility.
Emergency Contact: Clarity and Responsibility
We realized that having a 'Contact Us' option under 'Emergency' could create unrealistic expectations, as our team isn't available 24/7. To avoid any confusion, we've removed this option from the emergency section. Users can still contact our team during working hours, but we've made it clear that this isn't an emergency service.
However, post-submission of the form, users will now have immediate access to our contact details. This includes our email address, phone number, and physical address, along with our working hours. We believe this will provide clarity and reassurance to our users, ensuring they know how and when they can reach us for non-emergency inquiries or to follow-up.
To further enhance user understanding and prevent any accidental submissions, we've introduced several key features in our form progression and submission process.
Firstly, we've differentiated the 'Submit' button from the 'Next' button in both color and design. This visual distinction clearly indicates the finality of the submission process, guiding users more intuitively through the form.
In addition to this, we've incorporated a progress indicator in the form. This feature visually represents each step in the process, helping users track their progress and understand how much of the form is left to complete.
Most importantly, we've added a critical confirmation step before submission. When a user clicks on the 'Submit' button, a pop-up will appear asking, "Are you sure you want to submit the form?" with two options: 'I’m not sure' and 'Yes, Submit'. This ensures that users are fully aware of their action and provides an opportunity to review their information before finalizing their submission. This step is crucial as it emphasizes that once submitted, the information cannot be changed, reinforcing the importance of accuracy and deliberateness in the submission process.
Rearranging Features: Logical and User-Centric
We've moved the 'Help and Support' section to the main menu, as its placement in the profile section wasn't intuitive. This change aligns with the goal of making essential features more accessible and logically placed.
Color Psychology: Instilling a Sense of Safety
the 'Find a Safe Place' button has been recolored to evoke a sense of safety and calm. Color psychology plays a crucial role in user perception, and this change is aimed at making users feel more secure and reassured when using our platform.
Accessibility considerations
Symbols Help Tell the Story
Illustrations and icons are added next to the text and are used to illustrate each section because we have users that are illiterate but can recognize symbols. This is why we also have a video tutorial.
Voice Recording Feature
Understanding the diverse needs of our users, we've introduced a voice recording option. Each text field is accompanied by a play button, visually cueing users to the recording feature. This addition, thoroughly explained in our tutorial video, offers an alternative way for users to express and record their responses, catering to different user preferences and needs.
High-Contrast Design
High-mode contrast was taken into account for the choices of colours with a ratio of 8.63:1enhancing readability and inclusivity for all users.
Desktop Responsive Design
After conducting our second usability study and another round of user interviews, we refined the sitemap for the desktop version. Recognizing that desktop users might not report emergencies (to ensure their screens aren't seen by others), we prioritized the "Safe Spaces" and "Learning Center" features.
Next steps
Community Aspect: We're planning to create a community feature in the app where users can engage anonymously to encourage connections, allowing the exchange of stories and support. One challenge we face is ensuring the platform doesn't turn into a dating space. Our partnership with LGBTQI+ dating platforms, where we display our services, has proven that around 15% of incoming requests are related to seeking partners.
AI Assistant: In order to provide 24/7 assistance, we want to introduce an AI bot, who knows about the legal aspect of Moroccan law and is equipped to guide on safety procedures while directing users to the resources we have on the app, depending on the user's need. Our goal is to ensure that the bot is also proficient in Darija, the Moroccan dialect and can reply to audio messages.
What I learned:
Design is about understanding and adapting to the user's needs. Documenting the interviews and usability studies didn't just guide our decisions, but also gave me the evidence needed to convince stakeholders about the modifications to the initial design.Sometimes, what designers think is clear and needed, users don't see or need. Knowing the user's context, especially their location and device, is essential. This led us to enable the map for offline download and to place text next to each button. It's also the reason the desktop version is different than the mobile app.
See also
Page updated
Google Sites
Report abuse