Design for Kats

Research: Narrowing the Scope

As a non profit, there could potentially be a wide range of personas that use the site, but the nonprofit’s current goal was to create a site that was more usable for the users directed them to open a case with the organization

The overall goal was to create a website that was more usable, so what I needed to research was what makes the site easier for the identified user to carry out their goals. 

The organization had certain ideas of what changes they wanted to implement, but I knew it was necessary to conduct robust research first to understand the problem. 

I looked at websites for other nonprofits that focused on serving victims of domestic violence and analyzed how they organized the information for their services and programming. I determined what each nonprofit was effective at showcasing and what was difficult to understand about the design. This was crucial exploratory research to understand the standards of non profit websites.

The competitor’s method of showcasing different strengths were strong models for what to represent, it laid strong groundwork for where the site can be redesigned.

Usability Testing

In order to understand objectively what needed to be changed about the website, I conducted a heuristic usability analysis. By going through the site pages with a fine tooth comb, I analyzed how the page wanted me to interact with its features and information, and how well that came across. Overall, the organization of content was the main usability issue. There were redundancies and irrelevant information that distracts the user and detracts from a smooth consistent experience. Even without understanding the user’s perspective, there were many opportunities to reorganize the website’s information architecture. Having a site that meets expected standards of usability is crucial to communicating trust to its audience.

Usability Testing

Identifying design problems isn’t the only dimension to capture. I conducted usability testing with 5 participants who were unfamiliar with the organization in order to understand how real users would interact with it, and where they would potentially struggle if asked to find information. After assessing the findings, I noticed that users generally had good views of the site and its trustworthiness, but did struggle with how information was sorted and organized.

User Interviews

With user interviews with past survivors, I developed a research guide to understand if there are commonalities with the survivors that FYFJ serves that can be leveraged in the redesign. I wanted to understand their experience with the organization and what their process was like, in order to identify pain points and how the website could optimize the experience. 

I was able to virtually interview 3 past survivors who had gone through the organization. I was constrained by the difficulty of coordinating interviews, some of them dropped off and thus the sample was a bit limited to hear the stories of targeted personas. 

Interestingly enough, a lot of the past survivors did not cite using the website extensively, and preferred to interact with the organization in person. It’s possible this was due to safety issues, but also due to the directness of handling things in person. I learned valuable information into what was difficult during their process, and how they were able to use the website to make their decisions. 

Besides the things to implement on a heuristic level, the stories I heard from past survivors indicated that extended features were not used, and thus not currently needed. Based on the stories from past survivors’ interviews and the behaviors from usability, I understood that the users coming into contact with the organization and its website were understandably in time of crisis and were not looking for a website with “answers (that are) too long before you find what you’re looking for”. Most users preferred to communicate in person because the non profit staff can provide accurate clarifying information on programs and next steps quickly. Most users used the website as a means to contact the organization through a phone call. Despite this, past survivors also used the website and its information to make their decisions about choosing FYFJ – knowing that it served mothers and was equipped to work with kids, and had ongoing programs for the family. Although admittedly non surprising, the interviews with past survivors demonstrated that they used the website as the quickest path to finding out if the organization is able to help them, and then acting on that decision in by phone call.

From evaluating the site’s usability and testing the way that others interacted with the site, it was clear that the site could do more to support this path of connecting with the organization. I was moved by the stories I had heard from past survivors and created a persona that aimed to sensitively capture the persona that is visiting the site and considerations about their situation to take into account

I created a site map of the current site and highlighted pages that I believed to be redundant and confusing information I proposed a new site map who’s content would be consolidated and provide clear actions that prompt the user to become more involved with the organization and its programming. This map was the foundation for the changes I implemented.

As I started wire framing my new designs, I was guided by the importance of having a powerful landing page that facilitated the main user path I identified from my research. The changes I made were focused on giving the best information for the user to make a decision and then providing a phone number clearly and easily – the preferred way to act on their decision so as to more effectively convert the users that were visiting the site. 

The rest of the designs were implemented with the objective of having uncluttered pages that fit heuristic usability standards, reducing graphics that are confusing, grouping together content that better represents the organization’s work and provides clear directed ways to interact with the content. 

I didn’t encounter a strong need to recreate the branding style, as it seemed well established and aligned well with the tone of the organization. I constrained the variety in the primary colors and added more neutral colors to work with.

In addition to branding, I redesigned the logo based on feedback from the usability testing. The logo was designed to be a clearer reference of the organization and it’s dedication to opening doors and providing escape for its clients.

High Fidelity Wireframes

Conclusion

Freedom Youth Family and Justice Center is an important nonprofit that deserves website that represents the benefit it has brought to the community. It’s main audience deserves to have an experience that is straightforward and empowers them to make an important decision. Thus, it was valuable for me to use insights in order to make the experience tailored to their specific needs.

If I had the chance to do this again, I would love to have done more research with the users. I think that when developing wireframes I was initially too biased by the original website and focused on maintaining a familiar appearance when I could have made more transformative changes. I think using strategies like a card sort may have brought new insights for how to organize the site, or at least could’ve helped me make certain decisions faster. 

I would also like to explore having the site as a personalized, accurate source for information during the timeline of their open case. Users cited having confusion about receiving information and programs that were unclear, and thus there is potential for the website to be a good source for reference to take the load off of the staff members.

In undertaking this redesign, I gained a better understanding of when to practice restraint with adding details and elements. In that way, I empathized with the original site that suffered from cluttered buttons and graphics just to fill space. But constraining myself by relying on a design system and remembering to put the user first allowed my design choices to arrive at the organization’s intended goal.