Luke Bergstrom
The Full Story
About
Overview: Took an already existing but badly designed Non-Profit website and conducted and applied research in order to create a website (tablet, mobile and desktop versions) that was flowed better and designed better than the previous design
Project90 is a new approach to ending homelessness. The 6 pronged model to help their customers out of homelessness and into self sufficiency has let to great success for the parent organization, 90Works. They now want to scale their impact by introducing this model to other non-profit organizations focused on ending homelessness.
The Project90 model was designed to address caseworkers’ current frustrations when trying to carry out their mission to eradicate homelessness. But, their current site is difficult to understand, which is preventing users from understanding the value of this model and implementing it at their own organizations.
Our goal is to highlight the benefits of the self-sufficiency model, and the accompanying tools for implementation, so that our users are able to increase their effectiveness in ending homelessness.
We collected 5 interviews and 21 survey results from case workers currently working to end homelessness. While there was a large variety of case management models used, all of them agreed that they wish they had more time to actually help people and less time having to do paperwork. While they do feel like they’re making a difference, they wish they could be more effective.
Meet Jennifer: Jennifer is an operations director at a homeless shelter. She chose to go into social work because she’s passionate about helping people. She struggles with all paperwork and bureaucracy that comes with her caseload, which takes away from the time she has to actually work with people. Because of this, she’s always looking for more time and resources to continue growing her impact.
Site Architecture:
-
The site is a single page, which means the user is faced with a lot of content all at once, without a clear understanding of the relationship between different sections.
Spacing:
-
Spacing between visual elements and text is too small, making the site seem jumbled and overwhelming
Content Hierarchy:
-
Important contect like “About Us” and information about the self-sufficiency model not given the proper emphasis and placed pretty low down on the page. Without any clear information about what the site is about, there is not motivation for a user to scroll down far enough to get this understanding.
After our brainstorm session, we chose to focus on making a better explanation of the self sufficiency model, including links to resources that would help case workers meet the needs of their customers within all 6 domains. To help explain the model further and get case workers on track to implement the model themselves, we also needed to create a way for them to RSVP for upcoming webinars, as well as access an existing library of on-demand recordings of previous webinars.
Jennifer’s Journey takes her from discovering Project90 from a Google search on ways to improve her current methodology for handling her case work to learning about the self-sufficiency model and successes other case workers have seen using it. She then signs up for a webinar to learn more and takes the time to implement the model at her own organization.
The initial site was one page so we wanted to really break that up for the rework. We split it into 4 main categories and landing pages - about us, self sufficiency model, our solutions, and learn more. We also decided to have a need help button and link to parent page in header and smaller links throughout the page linked in the footer
We initially mapped out several user flows, but then selected the key features to focus on due to our limited time constraints we initially wanted to have the whole website. And if we had time we would go back and continue to work on the our solutions, and get started and getting those on mobile and tablet as well
For our paper prototype we all created 3 separate prototypes and then combined elements to make the best paper prototype possible. We believe that most of the issues that we had with this prototype were most an issue of there being only pen and paper drawings with no color and not an issue with our actual site navigation or layout.
Click on image to view Figma file
For our testing we used use berry which enables us to get a detailed results page. What we found was that people had a hard time finding the help button was a bit hard to find and our heatmaps confirmed this , so we needed to make sure it was easier and bolder going into Mid-Fi.
Iterating on our testing previously improving such as the get help button, we also started looking through and adding components that we can implement such as navigation between modal screens and video carousels for the testimonials and the webinar pages.
Click on image to view Figma file
Our tasks going from low fi to mid fi were all able to be completed, and with the help of an updated and digitized prototype. We were able significantly improve our need help button so we chalked it up to a pen and paper problem rather than an actual ux/ui problem. We were also able to gather data that indicated we needed to make improvements to the navigation between the model sections so we decided to add a component that gives an indication when you hover over it to ease navigation between the slides.
For our Style Tile and guide we decided to stay with the original brand color. While brainstorming palettes, we looked for complementary scheme because it passed accessibility tests. To drive emphasis to the self-sufficiency model throughout the site we used iconography to represent the model domains site and navigation. We chose sans serif fonts for an innovative / tech feel, while juxtaposing the text with softer illustrations and images.
Click on image to view Figma file
Here is an example of our button testing. We preferred the teal buttons over the orange and black (the only combo that was accessible in our color scheme) because it made us feel like halloween. Ultimately the orange button won by a slim margin, so we stayed with the orange.
We worked through many iterations and tests for color, composition, and content chunking to come up with our high fidelity prototype. We struggled balancing color accessibility, with the brand orange, and the complementing green while keeping the design minimal and balanced. Ultimately we decided a less is more, we needed to be strategic with our orange CTA buttons, and using white space to create a sophisticated and professional product.
Click on image to view Figma file
After evaluating the the original website we decided to build out their information architecture and sitemap to better communicate their mission. Afterwards we indeed up with several user flows and decided we needed to scale back to focus on the most important features. We prototyped and tested until we felt our design was solid enough for high-fi. In hi-fi it took us a few more iterations and test to balance our palette while keeping it accessible without overwhelming users.