The previous Disability Partnerships site had grown organically through the non-profit's early period and needed improved navigability, a design refresh, and a clearer communication strategy.
The previous site did not fully communicate the range of capabilities and programs the non-profit was providing and the nonprofit wanted to use its site refresh to increase its efforts and expand its programs.
They needed a clearer path to donations in order to increase conversions. Visitors needed a clearer picture of their donation and volunteer options and the site needed improved call to actions to facilitate this.
Disability Partnerships is a small, established 501c3 Community Based Organization that was looking to expand its reach to a national level and increase donor funding to further fund their popular programs. They had previously used a website builder but had reached a point where their site was no longer aligning with their key objectives, which were to increase its reach and donations. They had independently done some research and identified that there were three key groups that were using their site but that these three groups were not being served by their current site as best as they could be.
When I came onto the project, I did a content analysis and audit of their current site and developed a site-map to help me breakdown and visualize where they were at this point in time. I wanted to identify any usability issues and opportunities to streamline the experience. There were three key user experience issues, and other smaller issues, that needed to be most immediately addressed alongside the website refresh.
The first key opportunity for improvement was something reinforced by the current users; there was not a complete picture of Disability Partnerships' core services. The main page was a missed opportunity to set the goals and brand of the nonprofit. Clicking on “What We Do” took users to the Founder's Story and "Projects" gave an incomplete view of all they did. The current projects and initiatives were broken up among three different tabs and that was hindering the communication of their story. Their amazing programs were not getting the attention that they needed and so users were missing out.
Second, it was not clear on the main page where people could donate. As converting users to donors was one of their key objectives, they needed this to be easier to find. When users clicked on “Contact Us” they were able to see a donation link to Givelify and another, unmarked link to donate through PayPal. There was another link on another page for donating through Amazon Smile that was easily missed since it was not grouped with the other donation methods. A user who saw one might think there were no other options and stop there.
Third, their brand was not clearly communicated throughout the site. They did not provide a clear user journey and missed opportunities to represent their programs and brand. Their color choices were sometimes low contrast which affected site accessibility and their site did not have alt image tags or other accessible features.
I diagrammed a new site structure and created wireframes to illustrate how these recommended changes would affect the information already on their site. I suggested moving all five programs that were previously located independently under the "projects," "events," and "equipment grant" tabs to one "programs" page. This also aligned with their objective to increase the number and diversity of their events further down the road and also to be able to link to partner events through the events tab. They had decided that they wanted to have an independent events page which made sense since more events meant that Adaptive Wellness Class marketing and PR information would no longer be relevant to the additional classes. The events page could highlight their Accessible Wellness Classes while still allowing this program its own page.
After the site was deployed, there was user feedback that users could no longer find the place to register for individual Adaptive Wellness classes. Despite the best of intentions, users were missing the new RSVP link on each class under the events tab and not finding the new Accessible Wellness page on its own. I quickly implemented a banner call to action above the hero to prevent users getting lost and moved the registration form to above the program information until we could get a better look at other possible solutions.
"Despite the best of intentions, users were missing the new RSVP link on each class under the events tab ... I quickly implemented a banner call to action above the hero to prevent users getting lost until we could get a better look at other possible solutions. "
After I mapped out a new information architecture, I developed low-fidelity design wireframes to help the client visualize where information would be presented on each page. I worked with stakeholders to adjust layout and content. From initial wireframes, we expanded the main page to include a summary of events, a featured partner section, and quotes from people who had participated in their programs. These quote sections were eventually implemented on other pages as appropriatte.
I then generated high-fidelity prototypes in Webflow, where the client was going to host their site. Call to actions were implemented as a button within the header links and on the main page header. The main menu button was then moved into the collapsed menu at smaller breakpoints. I did preference testing for key design elements, including the statistics graphics and made changes based on user feedback. I routinely switched between desktop and mobile versions to make sure that mobile and desktop experiences were maintained.
As part of the redesign, I took their jpg only logo and recreated it as a vector file to improve resolution. I also made an all white version of their logo to include in the footer and added another dark blue to their color pallet. The reason for the dark blue was that the current blue and red in their logo were perfect for highlighting links and headers but we could not use these colors for darker background sections. The current blue and red, when used with white text, was not AAA. They were A at best. Also, using these as background colors would have diluted their impact in other situations and the brightness of the colors in large sections would have been harder on the eyes. The blue in the logo was instead used for headers and calling out text while the red was used for links and call to actions.
I placed all means of donation and volunteering on a single page and made these available from a "Get Involved" Button in the header. The hero call to action also linked to this page. I centralized the preferred, digital giving methods under one section with equal weight given to each. I placed an invitation to donate by mail below these and without an image, since this was not the nonprofit's preferred donation method.
Improved accessibility and increased font sizes considerably in response to user needs.
Created links at the bottom of each “Program” page to the other programs to improve navigability, remove the need to use the back button, and ensure users who linked directly to the program page were aware that Disability Partnerships provided other programs.
Added back to top links for each page in order to reduce the need for additional scrolling.
Made it easy for users to see where they could donate from each page and centralized the donation information.
Moved the Content from “What We Do” to an “About” page that highlighted the founder's story and the overall mission of the non-profit.
Prioritized content on the main page based on what order users would want to know information and used the front page as a key branding opportunity.
Improved contrast and legibility to meet AAA standards, added alt images for every image, increased sizing on several items to make them more visible, deployed more consistent use of new tab links, and gave all sections descriptive names for screen readers.
Aside from the issues that I mentioned earlier about users having trouble locating the sign up page after the switch, there were also issues with time zones for all events. Disability Partnerships was trying to move from a locally focused nonprofit to one with more national reach. As I understood it, this was in part due to the increasing popularity of their Adaptive Wellness Classes. I neglected to notice that, at the time of this project, Webflow did not have a time zone feature on its CMS. Users reported their confusion and in response I was able to work around this by adding a time zone field in the events' CMS and float this next to the date in a time div to make sure these were always displayed in line. This way, their team could state the time zone in the CMS manager and have the option to change the time zone if they hosted events in different time zones.
I also needed to make considerable size adjustments to the text, especially that for the quotes, at lower breakpoints. Despite the need for larger text, things like quotes took up much larger vertical space than was appropriate when users had to scroll past them. I decreased the size of the quotes to ensure that each quote section could be fully visible on mobile devices and so users did not have to scroll in the middle of the quote. I made a special quote text class so that these quotes responded differently. I had initially made the choice to make them larger for legibility but I felt that it impacted the ability to enjoy the site. I just was not seeing the same thing on my much longer computer screen than users would see on an actual device. I think it works to shorten the design view from time to time when designing to make sure I am seeing things the same way end users are.
