Mental-health guidance for the adults around a child.

Equipa is an app concept that gives parents, teachers and school counselors trustworthy, age-appropriate material on children's mental health. I designed it in a team of three with Rubén Amaya de la O and Ignacio Calderón Alfaro, and we brought pedagogues and school counselors in from the first week to shape what we built.

Problem: Children's mental health needs attention, and the adults responsible for children lack trustworthy, easy-to-find guidance.
My role: Designer across research, UX and UI.
What I did: A benchmark, personas, card sorting in Optimal Workshop, paper prototypes, the information architecture, a design system and the final interface.
Outcome: Completed research and a tested concept, with an interface validated twice: by card sorting, then by paper prototypes with potential users.

The Equipa app concept, 2020.

Who it is really for

The subject is children, but the reader is always an adult: a parent, a teacher or a school counselor. That distinction shaped every decision that followed. None of us was a parent, a teacher or a counselor, so we brought pedagogues and school counselors in from the start, to shape the requirements and to question whether the product was needed at all, not to review a finished design.

The brief

The problem: children's mental health needs urgent attention, and building a culture of education that treats it like any other branch of health had become a priority. The challenge: an educational app that gives adults resources for prevention and awareness. We split the work into two phases, UX and then UI.

Three phases in order: Investigation and Analysis, then Planning and Development, which together make up UX, then Graphic Interface Design, which is UI — Three phases: research, planning, then the interface.

Three levels of knowledge

We grouped users by how much they already knew about mental health in a school setting. A parent has basic knowledge and wants quick search, friendly language and trustworthy information. An educator is at an intermediate level and wants variety and their students' well-being. A school counselor is advanced and wants to support parents and teachers and share what they know. Two of the three, educators and counselors, were also among the experts we consulted. The content ended up organized two ways at once: by the child's age, and by how much the adult already knows.

Three illustrated personas: a couple standing together, a person writing on a presentation screen, and a person seated with a notepad beside a speech bubble — Three personas, one for each level of knowledge: parent, educator, school counselor.

Before designing, we studied content apps such as Spotify, Instagram, YouTube, Pinterest, Netflix and Wattpad to choose patterns: a persistent menu, search with filters, a visual-first layout and content grouped by topic. We wrote down what each one costs, too: a visual-first layout leaves out people who prefer text, and a persistent menu takes screen space.

Architecture, tested twice

The first architecture had four branches: Search, Resources, Directory and a user profile. We tested it with card sorting in Optimal Workshop and changed it where participants grouped things differently, for example by adding personalized recommendations, training programs with dates and places, and a way to share information.

Alpha architecture. Blue marks changes after card sorting.

Paper prototypes with potential users drove a second round. Notifications and the profile moved to the corner of Home, the quick-save shortcut was removed, and the Profile tab became a Library for saved resources, contacts and information. The profile screen now lets the user switch their active user type, which replaced the downloads and notifications lists. Those changes became the beta architecture: a first-run flow of sign-in, user type, topics of interest and terms, then Home and four sections. We drew eight user flows on top of it: sign-in, home, personalization, resources, search, directory, library and secondary actions.

Wireframes before and after paper prototyping.

The beta architecture: a first-run flow of sign-in, user type, interests and terms, then Home with its sections, each drawn as a flow of wireframes — Beta architecture. Screen text is in the original Spanish.

Look and feel

The direction was "Clear and Dynamic": clear, because most users have basic to intermediate knowledge of the topic, and dynamic, to keep them engaged. We built a moodboard of playful apps and games, then a design system.

Palette, gradients and four logo versions.

The system also covers buttons in three colors, the bottom menu, text fields, the search bar, profile images and link states.

The final interface

The final screens put the content first. Articles open with save, download and share actions, and a share sheet reaches text messages, WhatsApp, Instagram stories, Facebook and a copied link. Video and PDF resources sit beside strategies and tips, grouped by theme. Search offers filters by disorder type and common pattern, and shortcuts to audiovisual material, PDFs, strategies and events. The directory lists institutions and clinics, and the Library keeps what each person has saved.

Two phones showing an article on childhood depression with save, download and share actions, and the share sheet listing messaging apps and a copied link — Final screens, in the original Spanish: an article and its share sheet.

Four phones: a video resource, a list of saved documents in the Library, a Tips screen and a recreation article — Resources, tips and saved documents.

Two phones: the Directory with institutions and clinics, and Search with filters by disorder type and pattern and shortcuts to videos, PDFs, strategies and events — Directory and search filters.

Results

personas, one for each level of knowledge: parent, educator and school counselor

Content leveled by the child's age and by what the adult already knows