03 – HRABRI TELEFON

Redesigning the website for Croatia’s children helpline organization

03 – HRABRI TELEFON

Redesigning the website for Croatia’s children helpline organization

Hrabri telefon [eng. Brave phone] is a non-profit organization that provides direct telephone assistance and support
to abused and neglected children and their families.
Hrabri telefon [eng. Brave phone] is a non-profit organization that provides direct telephone assistance and support to abused and neglected children and their families.
Hrabri telefon [eng. Brave phone] is a non-profit organization that provides direct telephone assistance and support to abused and neglected children and their families.
Hrabri telefon [eng. Brave phone] is a non-profit organization that provides direct telephone assistance and support
to abused and neglected children and their families.
Hrabri telefon [eng. Brave phone] is a non-profit organization that provides direct telephone assistance and support
to abused and neglected children and their families.

Created for Hrabri telefon while working at Enterwell, 2018

Created for Hrabri telefon while working at Enterwell, 2018

Created for Hrabri telefon while working at Enterwell, 2018

Created for Hrabri telefon while working at Enterwell, 2018

Created for Hrabri telefon while working at Enterwell, 2018

Framing the problem

The problem with the former website was an outdated and non-responsive design. Before the project kickoff, the client conducted small-scale research where they found that the target audience perceives the website as “cold” and “hard to navigate”.

My role was to redesign the website from the ground up, in a collaboration with the stakeholders and developers at Enterwell.

With the new website, the goal was to make the user feel like the Hrabri telephone's website is a safe space where they can ask for help, learn how to deal with different situations and emotions.

Due to the client's budget constraints, no further research was conducted, and instead, I relied on best practices for great user experience and desk research. 

Framing the problem

The problem with the former website was an outdated and non-responsive design. Before the project kickoff, the client conducted small-scale research where they found that the target audience perceives the website as “cold” and “hard to navigate”.

My role was to redesign the website from the ground up, in a collaboration with the stakeholders and developers at Enterwell.

With the new website, the goal was to make the user feel like the Hrabri telephone's website is a safe space where they can ask for help, learn how to deal with different situations and emotions.

Due to the client's budget constraints, no further research was conducted, and instead, I relied on best practices for great user experience and desk research. 

Framing the problem

The problem with the former website was an outdated and non-responsive design. Before the project kickoff, the client conducted small-scale research where they found that the target audience perceives the website as “cold” and “hard to navigate”.

My role was to redesign the website from the ground up, in a collaboration with the stakeholders and developers at Enterwell.

With the new website, the goal was to make the user feel like the Hrabri telephone's website is a safe space where they can ask for help, learn how to deal with different situations and emotions.

Due to the client's budget constraints, no further research was conducted, and instead, I relied on best practices for great user experience and desk research. 

Hrabri Telefon - old website

Old Hrabri telefon website

Old Hrabri telefon website

Old Hrabri telefon website

Old Hrabri telefon website

Setting the new typography and IA

As people who are visiting Hrabri telefon’s website are in need of help, I wanted to use a font that would convey the feeling of friendliness and empathy. To achieve this, I used a humanist Alegreya Sans font.

From the client's research, we knew that there are three target groups - Children (6-12 years), Young people (13-18), Adults (Deliberately left undisclosed). I created four main pages - a landing page (with general information who is Hrabri telefon, what are the latest news and the donation section), and a separate page for children, young people, and adults. Although all three target groups have the same end goal of look for help, each page was designed in a way that will be most appropriate for them.

Hrabri telefon - typography

An example post with Alegreya Sans and Alegreya Sans SC fonts used for this project

An example post with Alegreya Sans and Alegreya Sans SC fonts used for this project

An example post with Alegreya Sans and Alegreya Sans SC fonts used for this project

A platform that listens to you

I wanted to make this website feel alive. In a way that is not only one-way communication. To that extend I created a one-question questionnaire with the question How do you feel today”, which depending on what you select, suggests different reading material and advice.

Talking to stakeholders I found that there are cases where the user would browse the website in secret and might need a quick way to close the website. And even though if the user is using a PC to browse the website, we can’t assume that all will know the keyboard shortcut to close the current tab. In order to solve this, I created a button that instantly closes the current tab.

Hrabri telefon - How do you feel questionnaire

"How do you feel today" questionnaire 

"How do you feel today" questionnaire 

"How do you feel today" questionnaire 

Telling a story through motion

Unlike adults who are more interested in raw information, children expect the content to be more playful. With that in mind, I created various animations for the children page to make it more playful, so they would feel like this is their safe space with no judgment.

Video of children web page showing various animations I created

Video of children web page showing various animations I created

Video of children web page showing various animations I created

© 2020 Denis Maček

© 2020 Denis Maček

© 2020 Denis Maček