Minerva is a browser-based web app designed at Agency/Incubator RaVe, for UK's SWGfl. It aims to serve as a central reporting hub with subtle AI support, to help victims of online abuse by identifying patterns, connecting them to services, and simplifying the reporting process.
As the Principal UI/UX Designer at RaVe, my contributions focused on establishing a robust design system, crafting user-friendly progressive disclosure forms, and building high-fidelity prototypes that brought the team’s vision to life.
Problem Statement
Online abuse is a pervasive issue that impacts countless individuals, with victims often struggling to report incidents, find support, or understand the complex legal frameworks surrounding their experiences. Existing reporting mechanisms are fragmented, unintuitive, and insufficiently tailored to the nuanced nature of online abuse, such as intimate image abuse or cyberstalking.
Minerva was envisioned as a comprehensive, AI-driven platform to empower victims by simplifying the reporting process, identifying patterns of abuse, and guiding users to relevant resources and support services.
The challenge was to create a safe, accessible, and intuitive digital experience that catered to the emotional and technical needs of users in distress.
Research
The research phase involved a collaborative effort with SWGfL, Rascal Ventures, and academic researchers specializing in online abuse, such as the University of Suffolk’s TIVA team. Insights were derived from:
- User Interviews: Victims of online abuse shared their experiences with existing reporting mechanisms, highlighting gaps such as the lack of anonymity, overwhelming forms, and unclear next steps.
- Expert Consultations: Legal experts and support service practitioners provided input on legal complexities and resource signposting.
- Data Analysis: Studies, such as the University of Suffolk’s findings, revealed the emotional and mental health toll of online abuse, emphasizing the importance of a non-judgmental and empowering user experience.
Key insights that informed the design process included:
- Progressive Disclosure: We all can get cognitively overloaded by lengthy forms, more so in a moment of distress or emergency as this app caters to . Breaking down the reporting process into smaller, digestible steps was critical.
(A very similar approach was taken in designing the HiCarer project, also for RaVe). - Emotional Tone: The platform needed to balance empathy, a non-judgemental rhetoric, with a sober, matter-of-fact language, offering users a sense of safety and control.
- Clarity and Guidance: Users required clear explanations of legal terms, next steps, and available resources to reduce confusion.
Design
Ideation
The early ideation phase involved brainstorming sessions with stakeholders, where we explored how to balance functionality with emotional sensitivity. For my part, I focused on how a design system could ensure consistency across the platform while maintaining a supportive tone. Some early ideas were:
- Using calming color palettes and accessible typography to create a welcoming interface.
- Designing modular components that could handle diverse use cases, from evidence collection to resource signposting.
- Developing progressive form flows to reduce cognitive load.
User Flows
I mapped out primary user flows, focusing on:
- Practitioner Involvement: Being Minerva inherently anonymous up to the point where the user decides to request practitioner support, they can choose to provide contact details and additional information (e.g., name, location, DOB) to enable tailored assistance.
- Automated Alerts: Serious cases trigger an automated email notifying practitioners, who review flagged incidents in the admin suite for prompt action.
- Outcome and Next Steps: Users receive case outcomes with clear next steps, resource signposting, or secure deletion of contact details if no further action is required.
To support these flows, I ensured that the design system included components for interactive tooltips, breadcrumb navigation, and progress indicators to keep users oriented.
Wireframing
We created early low-fidelity prototypes to visualise the user flows, focusing on the:
- Form Structure: As mentioned above, breaking down forms into smaller, logical sections with clear headers and tooltips.
- Interaction Points: Designing components like drop-downs, radio buttons, and file upload fields to be intuitive and accessible, in handheld devices.
- Emotional Cues: Incorporating empathetic microcopy and visual cues (e.g., subtle icon animations) to reassure users, direct attention or indicate progress.
These interactive wireframes were shared with the team for feedback and iterated based on input from researchers and stakeholders.
Prototyping
As the lead in prototyping, I created high-fidelity, interactive prototypes using Figma. These were instrumental in:
- Demonstrating the progressive disclosure forms, where users were guided step by step to reduce overwhelm.
- Showcasing the design system in action, including reusable components like buttons, input fields, and modals.
- Simulating key interactions, such as uploading evidence, receiving feedback on submission status, and navigating between sections.
The prototypes were used for internal presentations and user testing sessions, allowing us to validate assumptions early in the process.
Validation
User Testing
To ensure the design met user needs, we conducted usability testing with victims of online abuse and support service practitioners. Key testing goals included:
- Assessing the clarity of the progressive disclosure forms.
- Ensuring users felt emotionally supported throughout the reporting process.
- Verifying the usability of interactive components, such as evidence upload and navigation.
Feedback revealed several areas for improvement:
- Simplify Legal Terms: Users found some terminology confusing and requested plain language explanations.
- Clearer Progress Indicators: Users wanted more explicit feedback on how far they had progressed in the reporting process.
- Mobile Optimization: Given the high likelihood of mobile usage, users emphasized the importance of a seamless mobile experience.
Iterations and Refinements
Based on user feedback, I worked on refining the prototypes and design system:
- Tooltips and Help Icons: Added contextual help options to clarify legal jargon and provide emotional support.
- Enhanced Progress Indicators: Redesigned the progress bar to include milestones and estimated completion times.
- Mobile-First Adjustments: Ensured all components were fully responsive, with optimized layouts for smaller screens.