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 communicating 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. While all sites looked distinct from one another, they all had similar strengths in communicating the robust services they offered. Similarly, they all struggled with organizing the information in a way that guides the user to a specific task or answer.

Initial Usability Evaluation

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.

Initial Usability Testing

Identifying design problems isn’t the only dimension to capture. I conducted moderated usability testing in person with 5 participants who were unfamiliar with the organization. I observed how they used the site to accomplish relevant tasks 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 found that users generally had good views of the site and its trustworthiness, but did struggle with how information was sorted and organized. This was valuable information, but I knew I could be missing relevant insights by not including the perspectives of past survivors of the non profit.

Qualitative User Interviews

I developed a research guide to understand if there are commonalities among the domestic violence survivors that Freedom Youth Family and Justice Center serves that could 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. I sorted the information they shared by affinity below.

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 long, impractical information.

“Some websites tell you different things, answers can be too long before you find what you’re looking for”

Past survivor

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 Freedom Youth Family and Justice Center – 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.

Ideation

Interview Insights and Statements for Ideation

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

Action from Ideation

After navigating the website in its entirety, I created a site map of the current site and highlighted pages that I believed to be redundant and confusing information in red. I then 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.

Prototyping

As I started wire framing my designs for this new site, 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. 

High Fidelity Wireframes

Brand Identity and Logo

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. When created high fidelity wireframes, 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.

Desktop Screens

Mobile Screens

Mobile screens were designed given how likely users were to access the site through their phone for greater privacy

Testing

I conducted in person usability testing with 5 people who were unfamiliar with the site. I developed the usability testing guide based on the initial usability testing guide. I sorted the behavior observed and the feedback received by affinity.

Revisions

The feedback I received suggested users desired additional information in order to more willingly proceed with the intended goals. The revisions I made were subtle, but created easier access for information users would like to make their decision of making a call, inquire about services, follow the organization, and make a donation.

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, and create the path to reaching out as straightforward as possible.

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 biased by the original website, and focused on maintaining a familiar appearance when I could have made more transformative changes. 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. 

In the future, I would like to explore having the site as a personalized, accurate source for information during the timeline of a survivor’s open case. Users cited having confusion about receiving information and programs that were unclear, and thus there is potential for the website to have good source for reference to take the burden off of the staff members as a source for information.

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 prioritize the user when developing the feature allowed my design choices to arrive at the organization’s intended goal.