Contigo App

Contigo is an application that prevents and acts on suicidal behavior. It is a project done in a weekend for a hackathon from Boehringer Ingelheim.

4 minutes read

UX/UI Designer
Alejandro Ibarra (developer) and Brenda Morraja (data analyst)
App and dashboard design

What is Contigo

Contigo is an app where users (patients of psychologists) can have a place that helps them see the positive side and manage their emotions.

The application uses machine learning to detect possible cases of suicide risk to be able to act on time.

The problem

Suicide and mental health problems are at its peak, the pandemic has aggravated the problem, specially in teenagers.

Psychologic consultations has advanced due to new studies and more knowledge but it has not been adapted to new technologies.

Project limitations

The first limitation was time. We only had 2 days to come with an idea and create the solution.

Second one was way of working, as Alex (the developer) needed continuously the designs to be able to develop. This limitation was solved through constant communication.

Roles and responsibilities

First we brainstormed together the solution with the information we had from the quick research and then we divided the work based on the different skills.

I was in charge of the design, Alex was in charge of the development and Brenda was in charge of creating the data model.

For the MVP, we agreed on only go with the desktop web app and creating a data-model based on tweets.

The process

There was no time to think about the process, so we just went straight to what felt right at the moment. But more or less the process was the following:

1. Define the problem
2. Define the audience and business need
3. Define the solution
4. Wireframe
5. Designing the app
6. Branding

1. Define the problem

First of all, we talked with a psychologist to validate what where the real problems that they and their patients had.

We had two challenges to cover:

- Prevention, which objective is to create a safety plan to reduce the risk of a future suicide attempt.

- Detect possible cases of people at risk, with the objective of saving lifes.

2. Define the audience and business need

The solution was designed for teenagers and young people with mental health issues and was intended to be sold to psychologists and public entities such as hospitals and governments.

It was intended to be useful for both patients and psychologists and included a free section for anyone to access: resources for people in danger, including a chat function and information about how to seek help

An initial idea was to use a bot to detect possible suicide attempts via tweets, but this idea was later abandoned due to technical limitations.

3. Define the solution

After the talk with the psychologist we defined the different needs that had to have the app to be useful. The MVP had:

"My safe space": A place where the patient can add information that would be useful for itself to see the positive part of life. This section is only for psychologists' patients. The feature has different modules: 

- A list of the people which they can rely + their contact (that would be useful also for the psychologist to know who to call in case of an emergency)

- Adding playlists that make them feel calm

- Adding images of happy moments

- A list to add plans for the future (with checkboxes)

- Schedule consultations with it's psychologist

Diary: a place where the patient can write their experiences. The idea was to be able to find possible suicidal behaviours with the data model, which is able to detect if something written can have a risk behaviour associated.

Chat 24h: A place where users can talk with psychologists the 24 hours of the day (the user does not need to be registered or be a patient). It works in the same way as the hope phone but in chat.

Resources: A place where the user can find interesting resources to help with their mental health, as guides, tips, a map with the

Daily affirmations: The app gives daily affirmations that can help the user with their mental health.

We left for future iterations other features as exercises set by the psychologist. We focused on an MVP that provided value.

4. Wireframe

Once we had defined the solution, we started defining how we would do it. The
psychologist made a wireframe with the ideas while we were speaking. We used it as the base for our design.

We wanted it to be like a dashboard, so we searched a template and we adjusted it to our needs.

I looked 3-5 examples for inspiration, and once we had clear how we were going to do it, I created a general wireframe to start working on it.

Alex was creating the login while I did the wireframe.

Wireframe done by the psychologistWireframe of the app made by me

5. Designing the app

I started designing the app module by module. Once I got a module prepared, Alex implemented it. Then general things as the navigation and finally the logo.

By the first day the desktop version was finished, so the second day I created the mobile version and a small prototype to showcase the app.

6. Branding

The name of the app is "Contigo", which in Spanish means "with you".

I chose blue for the main color as it represents calmness, relax and trust.
For the palette I went with a monochrome style.

For the logo, I went with a happy face, which has two sides. Not every mental illness is visible, that's why both parts of the face look happy. Furthermore, it is surrounded by it's own arm, meaning self-companionship. The arm also serves as the C of Contigo.

For the typo I went with a sans-serif font, Inter. Inter has a great readability and it gives the app a neutral style, without being too serious or too childish.

Small design system & branding of Contigo App


It was my first hackathon and even though it was exhausting, we had a lot of fun together. Alex could implement nearly all the design even though it was not pixel perfect. Brenda created the machine learning model and it worked really well. Furthermore, the effort was rewarded as we ended up being one of the three winners of the competition.


During the hackathon, I started building a website for the solution but due to time constraints I was not able to finish it. Later, I ended up finishing the design. Here it is!

Small design system & branding of Contigo AppSmall design system & branding of Contigo App

Other projects