World Hunger Initiative Site Redesign

Redesigning the information architecture of the website to better facilitate organizational missions and user goals.

Overview

I joined the nonprofit after meeting the founder in one of my classes I was attending at UT Dallas. Around the same time I had begun reading about UX Design and the benefits, it could provide for both the organization and the user. I was interested in the idea of information architecture and user research. This would be my first UX related project for an organization.

Through user research methods such as card sorting, user interviews, and user testing I was able to redesign the site to better accommodate users to understand the mission of 100% pass-through and to achieve their goals of signing up, getting connected, and ultimately, helping their local communities.

Context

The World Hunger Initiative is a nonprofit that prides itself on having a 100% pass-through rate - meaning 100% of every dollar is used to support the mission of providing food, water, and medical supplies to the homeless. With support from donors and volunteers, the World Hunger Initiative was able to provide 37,000+ food items and 20,000+ medical items.

This emphasizes the importance of communicating with visitors the importance of their contributions and service towards helping their community. 

The original site was created by its founder 2 years ago on Squarespace. The site had confusing navigation and copy which impeded visitors to understand and achieve their goals. My goal with this project was to understand what underlying structural issues were confusing, what our visitors' goals when accessing the site, and maintaining a design that could be implemented with Squarespace's website builder.

Discovery

At the beginning of the process, I was interested in understanding the current information architecture. Using a SEO scraper, I was able to collect pages, headlines, and links. 

This allowed me to create a visual sitemap and made it easier to spot inconsistencies within the site. The visual sitemap helped explain to leadership what the current problems were.

Next, I decided to run an open card sort to determine if the headlines, mission statement, and categories used made sense for the users. After running the sort with 6 participants, I found that major headlines and even the mission statement were either being confused or not being understood at all. 

This led me to diagnose the need for the copy to be reworked to become clearer and friendlier to those who were not familiar with the terminology used.

Empathy

First, the big question was “Who are we reworking the site for?”. To find this answer, I conducted user interviews to better understand the type of people who were attracted to the organization’s mission and were interested in volunteering and donating.

With the insights received, I was able to create personas and their respective user journeys. These were used for a dual purpose: to allow me to constantly keep the user and their goals in mind and to keep leadership informed with the type of users and flows that we were hoping to accommodate.

Low Fidelity

First, I wanted to test out multiple layouts that aim towards simplifying the site navigation while keeping the overall site feel familiar to returning visitors. Because the design had to be able to be recreated in Squarespace, I had to get familiar with Squarespace’s website builder before beginning designing low fidelity wireframes.

Through user interviews, it became apparent that the general layout of the site was acceptable to many interviewed but it was the confusing copy, photography, and amount of links that were on each page. Users were confused by the term 100% passthrough and what the difference was between the organization’s “mission” and “initiatives”. The full-screen splash images had misleading photography that did not accurately describe the nonprofit’s mission and caused some issues about not knowing they could scroll. Lastly, the amount of differently named links that led to the same page caused confusion.

This steered me to the conclusion that the general design could be recreated but the copy, photography layout, and links had to be made clearer. This was done by using the updated navigational terms determined by the card sort, minimizing the full-screen images to allow for text to be shown without scrolling, and correctly naming links based on the redesigned information architecture.

High Fidelity

Because familiarity with past visitors was an important aspect to the organization, I reused the general color scheme from the past site but added a couple of highlighting shades for parts we wanted to emphasize. The new color scheme connected the redesign with the past design while improving visibility for important aspects such as statistics and goals.

The use of cartoons was a placeholder for when the organization had professional photos and videos done of the activities, founder explaining the mission, and of leadership. These will be replaced during the final implementation of this design.

The use of basic iconography was meant to allow easier “scannability” of topics while scrolling.

The final screens were decided based on fulfilling the following criteria.

1. Simplify the navigation

2. Improve clarity of key organizational points

3. Improve speed and ease of volunteering sign up

4. Maintain a familiar feel to the original design

Evaluation

To determine whether the redesign was a success, I asked the nonprofit’s volunteers if they were willing to test the user experience.

The way I conducted the user testing was by having participants achieve the user flows determined in the Empathy section for both the current site and the redesign.

I measured both quantitative and qualitative data to measure success. I found that users were both able to have a greater understanding of the nonprofit’s mission and sped up form fill outs on average by 500%.

(Prior design: 1 minute 34 seconds | Redesign: 22 seconds)

Conclusion

Finding what visitors found nonuser-friendly allowed me to prioritize changes to the previous design.

1. Confusing navigational titles

2. Lengthy sign up process

3. Unorganized page layouts

Unlike the previous design, the new design promotes simplistic navigation, reduced friction for volunteers, and straight-forward messaging.

Reflection

If I had a chance for a do-over, I would have opted for a closed cart sort over an open one. Although I was able to gain a lot of insight from the variety of user-made categories, I found it difficult to compare the categories of different users. I believe if I used a closed sort I would have had a more accurate sense of what pieces should be placed where.

I would have included more members of the organization to help me earlier in the process. It would have been useful to understand leadership’s current and future goals. It was late in the low fidelity process when I was notified that the design of the site would have to be compatible with Squarespace’s site builder. If I had asked for more details regarding the implementation earlier in the process, I would have been able to design with that constraint in mind.

As this was my first time evaluating a design with user testing, I didn’t have a good grasp on what I had to prepare before testing. Next time, I would like to prepare a set of topics I would like to cover that were relevant to understanding how the typical user browses the site.

Supplementary Files

WHI_Research_Excel

Balsamiq_Lofi_Mockups

Sketch_Hifi_Mockups