Anatomy of a Site Re-Design
Designing for a fundraising platform can be challenging because of the delicate balance between the needs of the business (as the business I need to make money to stay afloat) and the user (don’t oversell to me or I won’t open my pocketbook due to lack of trust). There is a pervasive thought in traditional non-profit thinking that the user should be prompted with multiple non-initiated requests to donate.
My overall approach to this was different, and one of trust building between the user and the business. Including more immediate info about why someone should trust this company with their funds and moving social links to a more prominent position helps ease concern that this may be an illegitimate business.
Both direct and indirect user feedback through site heatmapping, passive popups, user session recordings, and Google Analytics, helped identify several problems including:
The design guardrails for this project were defined by a branding guideline and a need for backwards compatibility for older browsers like IE 11. Action Against Hunger’s brand identity had recently undergone a major refresh which was largely based on it’s print design, with little detail about translating it to a digital platform.
This posed a unique design challenge for browsers that have little support for transparency overlays, which make up so much of this updated brand. In order to provide a similar experience on older browsers I created CSS that will work for most major browsers including fallbacks to IE 11 (after reviewing the data it was determined to drop full support for IE 10 and below).
Left: Overlay as it appears in Safari, Chrome and Firefox.
Right: Overlay fallback for IE 11.
To create a more modern look and to keep users engaged, subtle animations were added.
The footer animation plays only on HD device widths, and only when the user scrolls to the content, reducing page load time. To avoid causing unwanted visual distraction the animation stops after one cycle.
Hover interactivity was added as a way to expose details without overloading the user with information. On mobile devices the user will see this after tapping once.
The design went through several iterations of feedback from stakeholders and development teams. While some enhancements were scaled back due to technical overhead, the overall concept of the re-design was successful in delivering a fresh look for a diverse audience.
Homepage
Blog
