The Scatter Joy Project
〰️
The Scatter Joy Project 〰️
The Project
The Scatter Joy Project is a non-profit organization based in Columbus, Ohio. Their primary goal is to reduce the stigma around mental illness, and connecting those in need with resources to help them cope.
While mental illness is a large part of the client’s offerings to those in need, they also offer resources for Veteran’s, new mothers, family & more; supporting anyone who needs it.
The Problem
An average of 1 in 5 adults suffer from some form of mental illness, and the numbers of adults falling victim to suicide has steadily risen since 2020. The ability access to crucial support programs is essential for those who are struggling—and Scatter Joy wants to provide them with the help that they need, based on how they need it.
The Solution
Through a resource library, the client is able to manage a collection of resources that are filterable, expandable & easily updated for an ever-growing support network. Their website will need to be usable, responsive & optimized for viewing and functionality on all screen sizes. It also will need to become more modular to grow with them as they reach out and help more and more people in need.
User Research
-
The project kicked off by leading a series of stakeholder interviews—in key departments that would have the largest presences on the library’s website. We spoke with more than 30 people in 4+ departments to unpack and uncover flaws with the current framework, a wishlist of items they would like to have feature-wise & an understand how they (and their customers) would be using their content.
-
Once we had a good understanding of works, what doesn’t and how it should function—we could then address the large demographic of individuals who had some form of visual impairment & modify some of their brand colors for the webspace by making it clear the contrast ratio for visibility.
By aiding a Content Strategist, we reviewed the content of more 90 pages on the website to see where experiences could be condensed, reorganize & reformatting to better sure how the users would ideally use their online resources. This also included the reworking of their existing navigation to organize and reduce redundancies of links. -
Once the design process was about ready to begin, we walked the client through the navigational & design solutions that would help the project succeed. We gained valuable insight from the original group of stakeholders to validate that the solutions met their needs (and then some).
In addition, this process also helped us develop more features that would be a “nice to have” that would make immense improvements to the existing workflows and help users get to the right content more efficiently.
Exploration
〰️
Exploration 〰️
Project Characteristics
To provide extra context for the client, we began wireframing in Mid-Fidelity to showcase how their colors might be used, the general flow of the top 5 experiences on the website & how we might display different types of content globally.
Feature Development
-
A robust form that was full of conditionals to successfully help them become a new member of the library.
-
An interactive map that allowed library members to find historical artifacts or items at different locations. There is also an option to view online archives from all over the State of Ohio, and you can even reserve time to see artifacts in person with a member from the library.
-
An extensive collection of scholarly and historical resources that are available both online, and in-person. This experience offers customers to explore things outside of the Columbus Metropolitan Library system as a perk of being a member.
Iteration
〰️
Iteration 〰️
Hi-Fidelity Designs
Once the basic structure of the website was established, we built hi-fi comps to round out the global styling we planned to use and finish solving through additional experiences. This allowed us to the front-load much of the different components in the Design System from an atomic level, so building would be interchangeable and consistent.
Usability Testing & QA Testing
-
Using stakeholders from the client & a handful of additional users who fit the demographic of the average customer; we were able to virtually provide the client with a fully built website, ready for edits and modifications based on how they used different features.
The testing process also helped us validate that we not only solved a usability and workflow issue—but we were able to offer the content to the users in a more meaningful and engaging experience that was customized to their needs. -
As pages were designed & approved by the client, all elements within the page were double checked for accessibility to ensure spacing, font sizes, alt tags & buttons cleared the needed level of visibility for the AA WCAG guidelines.
-
Both during & after building and making pages, we tested the designs on Desktop, Tablet & Mobile—making modifications to the experiences to maximize each screen size. It also allowed us to build custom experiences to individual sized screens to enhance how a user would use the clients’ resources from their specific device.
