ASSMCA, Puerto Rico

A public mental health app, a volunteer system and an internal incident-reporting tool for a government agency.

Role: UX and UI design (team of three)
Scope: Public mobile app, internal incident-reporting system, volunteer system
Year: 2020
Client: ASSMCA, mental health and addiction services agency of the Government of Puerto Rico, through Motivus

The problem: ASSMCA, the mental health and addiction services agency of the Government of Puerto Rico, needed a public mobile app, an internal system for recording suicide and overdose incidents, and a volunteer system.
My role: UX/UI designer on a team of three at Motivus, in 2020.
What I decided: A help button fixed in the center of the app’s navigation. An internal system organized by role.
Where it stands: All three were designed, built and approved. They went live in 2020, a budget cut shortened their life, and by 2023 a new site had replaced them.

Context and my role

The clinical content, including the self-assessment questions and result text, came from ASSMCA; we designed the flows around it.

The solution

In the app, a help button fixed in the center of the navigation opens the phone line, the chat or a ten-question self-assessment answered with three faces, ending in a green, orange or red result.

The internal system is organized by role (administrator, forensic pathologist, first responder) around a three-step incident form, a searchable list and account management. Its screen data is placeholder.

Four mobile app screens in yellow and gray: a home screen with three large buttons for phone line, chat and self-assessment above a list of nearby programs; a bottom sheet asking if the person needs support, with three buttons; a services screen with four tiles; and an events list with photo cards. — Public app: home, help sheet from the center button, services and events.

Six mobile screens: an intro screen, two question screens each with three faces labeled never, sometimes and always, and three result screens with green, orange and red headers, each followed by a list of recommendations. — Self-assessment: two of ten questions and the three results. Content provided by ASSMCA.

Four mobile screens: a side menu in Spanish with a language selector, the same menu in English, the first step of a three-step volunteer application form, and a login screen with email and password fields. — Language menu, volunteer sign-up form (step one) and login.

Desktop landing page with a full-width photo of a person looking at a sunset, a headline inviting people to support and share their energy, two buttons for signing up and logging in, and three gray placeholder blocks under a section titled "Why volunteer". — Volunteer system landing page. The blocks under the hero are placeholders.

Four desktop screens of an incident reporting flow: a side panel to choose between four incident types, then three form steps with a progress indicator for demographic information, method of incident, and date, place and notes. — Internal system, desktop: reporting an incident in three steps.

Six mobile browser screens: a login screen, a list of incidents with filters, a panel to choose the incident type, and three form steps for demographic information, method and incident details. — The same system on mobile.

Two desktop screens: a table of incidents with ID, class, municipality and date columns below search filters and pagination, and a side panel with the details of one incident including gender, age, method, date and notes. — Searchable incident list and detail panel. Data is placeholder.

Four desktop screens: a table of user accounts with name, email and role; a side panel to choose between first responder and forensic pathologist accounts; a form to enter name and email for a new account; and a side panel with one account's details. — Account administration: list, account type, new-account form, detail.