Responsive website redesign

The Client

Freedom Youth Family and Justice Center is a non-profit organization that serves those escaping human trafficking and domestic violence.


Challenge

Redesign the site layout and information architecture to create usability heuristics that lead to higher conversions and increased knowledge of the non-profit’s resources

My Role

Usability testing, user research, ideating, designing, and user testing

Impact

Higher conversions to the organization and increased program awareness/participation

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.

Competitors

YWCA of Genesee Co.

Community Action Programs

Victims Assistance Center Jefferson Co.

The competitors sites were all designed to clearly communicate the robust services they offered. Similarly, they all had instances of struggling to organize the information in a way that guides the user to a specific task or answer

Initial Usability Evaluation: What’s Working?

In order to understand objectively what needed to be changed about the website, I conducted a heuristic usability analysis.

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

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 to complete common tasks with how information was sorted and organized.

User Interviews

I was able to virtually interview 3 past survivors who had gone through the organization. Some past survivors dropped off and thus the sample was a bit limited to hear the stories of targeted personas. 

Common Behavioral Patterns

  • Most users preferred to communicate in person because the non profit staff can provide accurate clarifying information on programs and next steps quickly
  • Many features of the website were not used, because contacting the organization to leave a threatening situation is a higher priority
  • However, some survivors wished they knew more about the community building programs
  • Most users used the website as a means to contact the organization through phone call

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

Past survivor

Ideation

Targeting User Feedback to Prioritize Impactful Solutions

Designing the site to better connect user with the organization and its programs would increase conversions, by empowering users to make the right choices for their needs. The persona aimed to sensitively capture the mindset of the user that’s visiting the site and considerations about their situation to take into account

Julia

Doesn’t spend a lot of time on the internet and needs an organization that is trustworthy during one of the biggest decisions of her life

Needs

  • Straightforward answers
  • Quick connection to a helpful human

Pain Points

  • Confused about what support shelters can offer

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. The two maps can be compared by using the slider bar below.

Site Map Before and After

Prototyping

As I started wireframing 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. 

Brand Identity and Logo

There wasn’t 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.

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.

Organization Logo Before and After

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 their choices. The revisions I made 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

Metrics for success: Increase in conversion rates, qualitative satisfaction of experience

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. 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, it would be interesting 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.