Case Study: “Spei” a professional community on mental health.

Esther Calaco
Bootcamp
Published in
15 min readDec 16, 2022

Our first and successful experience in a hackathon, “Innomakers4Health 2022” by Pfizer and The Cube.

Chech the Behance shorter version here.

You know what? WE REACHED THE FINALS IN THE PFIZER AND THECUBE HACKATHONINNOMAKERS4HEALTH 2022”!!!!! Oh, sorry, we’re too excited, we’d better start at the beginning and tell you what this is all about.

Hi, this is us Esther, Andrea Ágredas, Paula Almécija Rodríguez and Berta Otero Garrido, between the 4 of us we have: 4 product designers, 3 designers, 2 developers, an expert in customer success and maybe a couple of brain cells; we love to get into troubles, that’s why we embarked on this new challenge.

And which trouble did we “choose” this time? “How to prevent and improve mental health problems using technology and the Big Data from digital platforms (social networks, video games, websites, etc..)?”

Intro pic with the name of the app, SPEI, and the pic of the four member saying that they are UX UI Product designer and their working tools have been: notion, miro, figma, after effects, photoshop, premiere and illustrator

To summarize: 48 hours ahead to develop an MVP, a clear but very complex problem and a great desire to work together to reach the best solution..

After a lot of laughter and funny moments, just a few hours of sleep and a lot of effort, we can say that we did it. Here we tell you how.

Discovery

What was going on?

There’s always a beginning, and for any good product designer that stage is, according to the Design Thinking practice, the Discovery, let’s start with our research, a fundamental step that helps to empathize with our future users and to outline the problem. We know what we are facing, but not how we can solve it, let’s get to work!

What info can we get already? 🧐 Obvs, we dived into Google and read everything we could about it; thanks to the desk research plus the interviews we realized the complexity of the subject and the wide scope of action, we had to divide our attention to get a better understanding of the two pillars our project is based on: Big Data and mental health.

🧠 Mental health

The WHO says:

👉🏼 Mental health is a state of mental well-being that enables people to cope with the stresses of life, realize their abilities, learn well and work well, and contribute to their community. It is an integral component of health and well-being that underpins our individual and collective abilities to make decisions, build relationships and shape the world we live in.

We can say then that having a good mental health is not only linked to the absence of a disease that affects us, but it must be linked to general wellbeing.

The essential traits of mental health include: individual characteristics, such as neurobiological factors, the interaction between the individual’s genetics and the environment (epigenetics), the ability to manage thoughts, emotions, behaviors and interactions with others, and social, cultural, economic, political and contextual factors (such as national policies, social protection, standard of living, working conditions or social support in the community). Sistema Nacional de Salud 2022–26.

Mental health costs represent a significant cost in Europe, according to the report developed by the OECD together with the European Commission*(Health at a Glance)* it is estimated to be a 4% of GDP in EU countries. The estimated data for Spain ain’t much better, the report says that 45,058 million euros was the total amount of mental health problems cost (4.2% of GDP), distributed as follows:

  • 14,415 million in direct health care costs.
  • 12,318 million in direct costs in social security programs.
  • 18,325 million of indirect costs related to the decrease in labor productivity.

We already know the data on the economic costs of mental health in Spain but, obviously, the biggest cost, the closest and most painful, is that of the citizens:

  • Suicide deaths have increased worldwide and in Spain it has become the leading cause of unnatural death in youngsters (COP, 2019) 4% have made an attempt and 6.9% reported a high level of suicidal ideation (Fonseca et al., 2018).
  • In 2020 suicide ideations and attempts have increased by almost 250% (InfoCOP)
  • The COVID-19 pandemic and lockdowns have had a huge negative impact on mental health according to Fundación Anar (2020):

Suicidal ideation +244,1%
Anxiety +280,6%
Low self-esteem +212,3%
Eating disorders +826,3%
Self-injuries +246,2%

  • Depression in Spain is the most prevalent mental illness, with 3 million diagnosis (Fundamed 2021).

Interviews with professionals

After the quantitative data we needed first-hand experiences, so we interviewed professionals who had a personal perspective on mental health.

  • Daniel Fuentes · Teacher

💡 There are good intentions but few resources, training and means. A lot of things work on a volunteer basis.

Schools do not have a mental health detection and treatment programs, and although there are projects that help to deal with emotions, bullying, gender-based violence, inclusion… those are projects that the school joins voluntarily, such as Plan Proxecta+ in Galicia.

  • Pedro Alberto Padín · Teacher

💡 The official interventions are only carried out when the cases are very extreme, and sometimes not even then.…

For the protocol to be activated, the teacher must detect any kind of sign, the problem is that it must be very obvious since, in general, they lack training and knowledge of relevant behaviors or symptoms; once “detected” the long protocol is activated. Many steps that have as a starting point a huge lack of training.

  • Ana F. · Psychologist

💡 Resources, knowledge and information exchange are often limited to your close professional circle.

💡 She is afraid that the resources may be misused so a professional sharing network would be the best option.

She has resources for her everyday work, from books and videos to documents, techniques and different kind of activities, based on the case and the patient, but she would like to have more and place to exchange and share with a wide group of colleagues.

📑 Big Data

The other pillar and the the most weird matter for us: What is Big Data? according to PowerData:

👉🏼 When we talk about Big Data we refer to data sets or combinations of data sets whose size (volume), complexity (variability) and growth rate, make it difficult to capture, manage, process or analyze using conventional technologies and tools.

How can Big Data be intertwined with mental health? With Social Big Data (SBD), that is to say the place where data and people converge: social networks

It can help with things such as:

  • Streamline the intervention and implementation of protocols. Speed, efficiency and prevention.
  • Strengthening of health systems.
  • SBD in combination with NLP (Natural Language Processing) would help to make health research way more efficient.

We were lucky enough to interview two Data Scientists who helped us get a better perspective of what Big Data is all about.

  • Miguel Cirujano · Data Scientist

💡 We understood that Big Data is too big a concept so we must narrow the scope and find small topics we can work with.

  • Alfredo García · Data Scientist

💡 There are words and concepts we must start to be familiar with, like: web scrapping, machine learning, NLP. In order to narrow down and start improving the search we must generate a specific dictionary of tags.

📑 How Might We…?

Now we have to think about solutions, so we ask ourselves::

How might we use the benefits of Big Data to improve the ways mental health professionals’ resources are used and shared in order to increase the chances of detection, prevention and intervention?

📑 Hypothesis

We now need to focus our research for our hypothesis to be validated:

If we design a digital platform for professionals where we can mix the benefits of Big Data (pointing out the most urgent problems in every territory), with a place to exchange resources, knowledge and intervention techniques; then the chances of improving detection, prevention and intervention rate of success and promptness will increase in the mental health field because we will offer more and better information and resources that will be available for the professional community

Today, in the year 2022, professionals with the ability to act against mental health problems do not have a place where they can upload and share the resources they have. That’s why we believe in the utility of a project like ours, and in how enriching it could be for the community of professionals to have a place, a platform, to exchange knowledge and experiences, combined with the benefits of accurate information obtained thanks to Big Data.

Strategy and Ideation

At this point we needed to do a self-analysis to determine the weaknesses, threats, strengths and opportunities our solution would have.

In addition, it was necessary to start outlining who it would be aimed at, the journey they will walk on and how we could help them.

📑 SWOT

Which were our strengths and opportunities?

  • We had, and still have, the ability to make a user-centered design, because we know their needs and problems and we can empathize with them.
  • Our product would give the possibility to share information and resources with mental health professionals.
  • Mental health problems would be promptly detected and addressed.
  • Having specific statistics thanks to Big Data would give professionals very powerful tools.

And… our weaknesses and threats?

  • We had no expertise in dealing with Big Data and we are not mental health professionals either.
  • We would need professionals to sign up to our platform and contribute with resources.
  • We may have to ask for the help to both public and private healthcare systems to make the community successful.
  • Measures should be implemented both to prevent misuse and to verify all shared resources.
  • We should overcome the social stigma of talking about and/or dealing with mental health issues.

📑 User persona
We had one goal 👉🏻 To empathize.

How did we do it? By designing our users’ profile: the user personas.

To get to know them, based on interviews and research, we designed two different user prototypes with similar goals and related to mental health: a psychologist and a teacher. This helped us to recognize the expectations and needs of our users, those we are making the product for, while allowing us to draw up the process to achieve the main goal of delivering the best user experience.

That’s why it was key to make a journey (as is), to find the pains and gains and discover the opportunities we must took into account for our design proccess.

Iria López · Psychologist

Iria is a psychologist, sometimes she cannot find resources and guides in her community to help her patients. She loves creating them to share among her peers in the field.

Profile and journey of our first user persona, Iria. She has a new patient and can’t find more perspectives and point of views from other colleagues to help. Her professional circle is too small

José Ruiz · Teacher

On the other hand we have José, who is not a mental health professional but is often linked to it because he is a teacher in charge of a classroom; he usually recognizes behaviors or reactions in his students that could be something to rise an alarm to, but lacks the necessary tools to do it.

Profile and journey of our second user persona, José. He is a teacher and one of his students seem to have a strange attitude but he lacks the resources and knowledge to point it out and ask for proper help.

📑 Stakeholders

We conducted a stakeholders analysis **because they are key to the running of companies. The decisions of these stakeholders can affect the results and goals we have, and at the same time, the project activity influences them.

📑 Mission, Vision and Values

How to develop a product properly? Among many important things defining the objectives of the company is one of the, so:

Mission

In our company we aim to provide a high quality service throughout a platform for mental health professionals to interact with each other and exchange resources that they have proved to be successful.

Vision

👉🏻 We want to establish our position as the main tool to help mental health professionals and professionals related to that field to share knowledge and experiences.

👉🏻 We want to be the favorite professional community and, at the same time, the best mental health resources bank for professionals.

👉🏻 We seek, through the use of Big Data, to obtain reports and statistics that will allow a preventive approach on mental health issues and a tool for professional case studies.

Values

👉🏻 Integrity.

👉🏻 Empathy.

👉🏻 Confidentiality.

👉🏻 Communication.

👉🏻 Community.

👉🏻 Support.

👉🏻 Professionalism.

📑 UNIQUE VALUE PROPOSITION

No mental health, no life. Spei will be a collaborative platform for professionals related to mental health that will allow them to create a community for mental health professionals, to exchange resources, approaches and preventive treatments, to have access to talk to other professionals and to have reports and statistics for a better preventive approach and intervention thanks to Big Data analysis.

The funny, creative and exciting phase that every designer loves is coming The Ideation!

Our first approach is through a Benchmark of functionalities so we can have a closer idea of what our product might require.

📑 BENCHMARK What does the competition do?

We analyzed several companies that have features we thought may be essential for our product. We divide the analysis to focus in two different topics: data visualization and resource’s archives.

First, we look at specific characteristics that we consider important, so we could pick ideas, as a way of inspiration and knowledge, to draw our strategy, and we rated them from 0 to 10. Second, after looking into each of them, we did a comparative analysis table to understand what they do, what we would like to do and how we could implement it in our product.

Our conclusion:

Since we have a professional and specific target, our product should have the following characteristics:

  • Easy networking, with DM option.
  • Simple search engine with filters where you can choose subject, area, etc.
  • Good structure with the resources classified by subject.
  • Traditional and user-recognizable infographics.
  • Traceable data.
  • Easy navigation and accessible design.

📑 IDEATION

We aimed to achieve a large number of ideas to find innovative and differentiating solutions to develop of our product focusing on the needs of our users. That’s why we implemented ideation techniques and sorting processes that brought us closer to the final design.

Join us as we walk our way through this process!

How do we generate the greatest number of viable ideas quickly?

In this case we chose a Brainwriting and an Affinity Map.

Brainwriting: 5 min. uncensored, unashamed and unlimited creativity experience to provide solutions to a previously stated question:

What would you like to find in a digital resources sharing community? You will have access to nationwide data reports and resources from other users (Big Data).

Affinity Map: We grouped the ideas by similarity. These groups, ideas, were meant to be the primary features of our product.

📑 MoSCoW

We needed to prioritize, as well as narrow down options, we couldn’t forget this was a Hackathon and our product was an MVP. So, at this point, we put together what came up in the ideation without losing sight of the essential needs for our business.

MoSCoW Canvas with the final features our product will have and are similar to the described before

📑 ITERATIONEXTRA RESEARCH

Since our knowledge about Big Data, Machine Learning, etc. is quite low, we needed more references to be able to talk about them, moreover, to know which features would be viable and which wouldn’t. For this reason we contacted Alfredo, data scientist, again.

Is our proposal realistic? How could we carry it out? How often would it be possible to send new information and statistics to our users?

Insights gained in this new interview:

💡 It’s mandatory to create an inventory or dictionary; It should have main, or primary, words plus combination with others and it should be done along with specialists: psychologist, psychiatrist, sociologist, etc. So we would be able to work with tags.

💡 This work, and the results, will be more reliable the longer we have the app collecting data.

💡 Well-defined architecture is essential in such a project.

The MVP was getting closer and closer…

We were already outlining its main features; we knew what we wanted to do, at that moment we could start shaping it.

We were ready to take off.

Conceptualization

Before the design stage we needed to clarify things! At this point it was key to establish a robust architecture, it would be both the backbone and the starting point to move forward with the navigation.

In a user-centered design the first thing to do is to design the paths our user will go through when using our application and knowing the tasks will be accomplished, those would be reflected in our taskflows, flowcharts and sitemap.

➡️ SITEMAP

In order to organize our product we decided to create the sitemap. Areas, order, hierarchy.

The sitemap of the product, the sections are: access (with sign in and login options) and then, the feed, profile, inbox, contacts, prevention, resources and publish.

➡️ TASKFLOW & FLOWCHART

At this point, we already knew the needs of our user and the structure of our product.

How to find out the path that our user will follow to perform any tasks in our app? Well, defining the “easy”, or happy, path until the goal is achieved… with the taskflows.

What about the detailed step by step? To know that we have the flowcharts:

The path our user must follow, step by step, to publish a resource with a taskflow (the easy one) and a flowchart, with all the options

➡️WIREFRAMES

Our MVP (Minimum Viable Product) had started to take shape!

The best way to turn all the previous work into something real was to start with the UI design, but first, some sketches, wireframes, to measure the areas, to define the shapes and composition:

UI Design

Once we defined our value proposition (outlining our strategy), set forth the features (thanks to the ideation techniques) and built the backbone of our tool (with the architecture stage), it was time to get into the corporate image and the interface design.

We were on our way to translate all our work into a real product.

➡️ CORPORATE IMAGE

Logo, primary and secondary colour palette and the typefaces of the project: Taviraj and Nunito

What do we call ourselves? 🔆 SPEI

It means “ray of hope” in Latin, everything we wanted to convey with our project, because we know health is important but it’s time for mental health to be in the spotlight of our society. If we could achieve this with our application, there would be no better name than SPEI.

➡️ COLOR PALETTE

Almost as in a mental connection, all team members thought of the same colors. A mix of cultural references and unconscious association led us to choose green as our primary, it conveys calm and well-being, and it’s associated with mental health, nature, prosperity, fertility, and generosity.

As a secondary color we decided to go for brown hues because of its association with trust, strength and confidence.

Color accessibility analysis

At all times we seek to make accessible products and this one won’t be an exception. When deciding on the color palette, we conducted an accessibility test to determine which would be the best combinations.

Accessibility analysis results, combining our corporative colours to find out the combinations that follow the WCAG Accessibility Guidelines

➡️ TYPEFACE

Naturally, at all times we had in mind the basic principle of legibility, so we chose plain letters with a wide range of weights and variations.

We chose Taviraj for the titles and headings because of its legibility, it looks good in many sizes and it shows freshness and has a lively personality..

For the body we opted for Nunito, a well-balanced, versatile and attractive typeface. It fits very well with Taviraj and are very legible together.

The guidelines were:

TAVIRAJ
Base size 16px 1rem
Line Height (LH) x1.3
Major Third x1.250 (aprox)
Paragraph spacing based on 8pt grid

NUNITO
Base size 16px 1rem
Line Height (LH) x1.3
Major Third x1.250 (aprox)
Paragraph spacing based on 8pt grid

➡️ Hi-Fi MOCKUPS

With our wireframes as starting point we designed a bunch of screens that show the personality of our product. Here you can find a few of the most remarkable screens:

Several mobile mockups with screens from our app: login, registration process, profile, statistics, etc.

Before get to the prototype showing off moment… we want to talk about our Business Model.

We have deliberately left it for the end of the post as it took many turns and iterations, and we were dealing with it while working on the rest of the stages.

During the event our team had to attend several meetings, called checkpoints, with an assigned mentor, where we talked about our progress and came to him with our doubts. It seemed that we couldn’t find the key to define the BM properly, but after a lot of thinking, iterating, discussing with our mentor, a couple of talks with skill mentors, we got it.

Finally, we chose a B2C business model, freemium and with the possibility of external financing.

And finally, exhausted but proud of our achievement… we present the prototype

Mockup with four screens
Designed by Syifa561 · Freepik.com

Conclusions

Although those were a pretty intense days, where we hardly stopped, we are more than proud of the product delivered.

We believe that this app can bring many benefits to the community of mental health professionals, thus to society.

We made it to the finals and ended in an **incredible fourth place, we are extremely happy with the experience and the work we did, for us this 4th position is a win-win.

Now… Which adventures awaits for us in the upcoming future?

--

--

Esther Calaco
Bootcamp
Writer for

Hi! I’m an experienced graphic designer & illustrator and a brand new UX/UI product designer trying to find new opportunities.