Suicide Zero
Background
Every year, around 1500 people take their own lives in Sweden. This applies to both the youth and adults, as well as women and men. Suicide Zero is a non-profit organisation dedicated to preventing suicide and promoting mental well-being.
Founded on the principle that every life is valuable, Suicide Zero strives to raise awareness about the prevalence of suicide and its devastating impact on individuals, families, and communities. By fostering a culture of open dialogue and empathy, Suicide Zero aims to create a world where suicide is prevented through collective effort and compassionate understanding.
Suicide Zero has, in addition to its main task, also initiated two projects specifically aimed at helping children. "Livsviktiga snack," which targets parents and adults with children aged 9-12 in their vicinity, as well as "Livsviktiga snack i skolan." The latter project being aimed at schools and school personell working with children aged 9-12.
Team
Product Owner, Project Leader, UX Designer, Art Director, Front and Backend Developers
Role
UX Research and Design
Tools
Figma and Miro
Our mission
Spring’s mission was to develop a new design and functionality for all three websites, as well as to build an entirely new editor interface. Each organization then had their own demands and goals.
Suicidezero.se stands as the cornerstone platform, having evolved significantly over time, resulting in a substantial web presence. It’s main goals are to promote mental health awareness and suicide prevention, as well as garnering support for the organisation's initiatives. With that in mind our emphasis was on crafting a seamless and intuitive User Experience, facilitating effortless navigation no matter if the user need to find information, start an event or decides to join a lecture. Additionally, we refreshed the visual identity, blending modern aesthetics with familiar elements.
Regarding the development of "Livsviktiga snack," we made a deliberate choice to undertake a comprehensive website reconfiguration. Departing from the existing digital static format, we created an interactive platform that invites users to explore the website and its content, thereby learning more about the subject. Acknowledging the diverse requirements of various guardians, we prioritised the inclusion of resources catering to the unique challenges each visitor might encounter.
"Livsviktiga snack i skolan" is a project that will be launched in the spring of 2024. As of now, a dedicated website is absent. We have created a dual-faceted platform. Primarily, a segment serves to introduce the project to users and potential clients, while a secondary facet caters to educators, granting them access to educational materials. The visual design mirrors the established "Livsviktiga snack" graphic identity, yet artfully distinguished to prevent any confusion between the two projects.
The process
The project unfolds as two parallel processes: one dedicated to crafting the websites of Livsviktiga snack and Livsviktiga snack i skolan, and another focused on creating the Suicide Zero website.
UX Research
The structure of both processes mirrored each other. We took on a Double Diamond approach kicking off with a series of workshops. Involving key stakeholders from each organization, our objective was clear when starting the Discovery phase. We aimed to establish a common goal and purpose for the organization and the website. To achieve these goals we then engaged in an exploration of the target audience, dissecting their specific needs, formulating content tailored to meet those needs, and conceptualizing a design to effectively showcase the solution.
Suicide Zero Workshops and Analysis in Miro
The workshops took varied forms; for instance, we employed customer journey maps and audience descriptions to define and understand target audiences. Other aspects involved categorization and mapping, urging participants to articulate the website's goals, leading to group discussions. After each workshop, we analysed the outcomes, absorbing this knowledge for the upcoming sessions.
Entering the Define phase we finished off the series with a content structure to gain a unified understanding of the websites content, structure and how these parts would connect on a broader scale.
Suicide Zero Workshops and Analysis in Miro
Content structure in Figma
UX Design
We continued our UX Design process in to the Develop phase, crafting an overarching layout sketch of the homepage’s content based on the various needs of the target audience.
The Suicide Zero homepage is all about guiding users on effective actions to support individuals in distress, may it be a private person or a company, visitors seek proactive engagement. Initially, our focus was on discerning the pivotal role of the Hero section in creating an emotional connection with users. Subsequently, we strategically presented Suicide Zero's mission, preventive measures against suicides, avenues for further exploration on the subject, and insightful articles detailing the organization's current initiatives.
Overarching layout UX sketch
Moving to the next stage, we created wireframes for the various website pages. Given that three websites were developed simultaneously, we ensured that the modules created for each site could also be widely used on other sites. It was crucial for the modules to contain different types of information and easily adapt styling to the graphic profile of other sites.
We outlined the main content and proposed the type of content that should exist based on the analysis from the workshops. However, anticipating that editors might build new pages and sometimes disagree with our recommended content, it was crucial that the modules we created could easily be composed with other modules.
Sample of Suicide Zero mobile and desktop wireframes.
Sample of Livsviktiga snack mobile wireframes.
Sample of Livsviktiga snack i skolan desktop wireframes.
UI Design and Development
Upon completing UX sketches, we compiled a list of module types and sent it to our UI designer/art director. He established the graphical profiles for each website and applied UI design to all pages and modules making sure all parts were ready as we approached the Deliver phase. Everything has been designed in Figma to ensure efficiency in everyone’s design process. The finalized design was then sent to the development team.
Fonts and Colour Palette for Suicide Zero
Fonts and Colour Palette for Livsviktiga snack and Livsviktiga snack i skolan
About our process
This remains an ongoing project where we've conducted research, designed, and developed concurrently for the different websites. We commenced with "Livsviktiga Snack" and "Livsviktiga Snack i Skolan." When entrusted with creating Suicide Zero's website, it became important to initiate that task promptly as it was set to launch before "Livsviktiga Snack i Skolan."
Additionally, the understanding that all three websites would be managed from the same editor interface led us to design and develop them in parallel, streamlining the workflow and enabling timely adjustments. We've employed an iterative process involving testing and development, presenting what we've developed to the client for continuous updates and feedback on the content being created.
To ensure clarity and coordination within our team, we maintained two backlogs, one for the UX/UI team and one for the developers, to ensure everyone was on the same page regarding progress, plans, ongoing development, and pending tasks.
"Livsviktiga Snack" is scheduled to launch at the beginning of 2024, "Livsviktiga Snack i Skolan" is planned for May 2024, and Suicide Zero is slated for launch at the turn of 2023-2024. The work will continue as Spring has been entrusted to remain the organization's primary web provider.
Final design
Sneak peak of the new design of Suicide Zero’s websites
Sneak peak of the new design of Livsviktiga snack i skolan’s websites
Sneak peak of the new design of Livsviktiga snack’s websites