designer
Squarespace site-02.png

Nonprofit Website Redesign

Deloitte Digital | Nonprofit Website Redesign

  • Timeframe: 3 months

  • UX Design Team: Myself as a UX designer + senior UX designer + UX designer

  • Industry: Nonprofit federal healthcare

    Over the course of three months, I redesigned an experience for site visitors that brought to the forefront the content users were looking for. The nonprofit’s website faced problems with information overload, lack of engagement and personalization strategy, unclear information architecture, and access barriers. The redesigned website aims to address these issues by delivering consistent branding, relevant content, and a modern, mobile-first user experience.

    I worked with the three-person UX design team through information architecture restructuring, wireframing and prototyping of 9 templated pages, usability testing and affinity mapping/synthesis. We worked in an agile environment alongside visual designers, content strategists, product managers and developers.

*This nonprofit is a client within in the Government and Public Services practice at Deloitte, and their name may be changed or referenced differently to anonymize this project. If you have any questions, please send me an email!


Discovery Research Informing Design:

Discovery Research: Our UX Research Report and Content Audit from the Discovery phase served as the cornerstone for our design activities. Insights about our users and their needs informed information architecture, page structure, tone of voice, and other design decisions.​

Page Templates: A set of key templates were identified through the early parts of our Design phase. These templates are flexible component-based designs to accommodate a wide range of content needs across the site. ​We created 9 custom page templates that have defined use cases to help content authors and owners understand when to use each page template. Each page has a combination of static and dynamic components to ensure consistency across the site and flexibility for content authors and owners to update page layouts based on their content needs. ​

  1. Homepage

  2. Landing Page - Generic

  3. Landing Page - News & Stories

  4. Child Page - Generic

  5. Form Template

  6. On-Page Search - Simple

  7. On-Page Search - Complex

  8. Search Result Details

  9. Search Result Details - Local Foundation

Wireframes: Initial design concepts and functionalities were created through wireframes, adhering to the set of 9 key templates above. Through all our templates, we wanted to lean heavier towards white space to allow ample room for content without overwhelming the user.

Example for Form Template wireframes

Usability Testing: Qualitative testing was conducted with 5 end users on prototypes to evaluate the designs of several designed templates. This revealed insights into the design’s intuitiveness, functionality, content structure, information architecture (IA) content, and enjoyability of use. These insights were then used to drive consequent design recommendations and solutions to resolve any usability challenges that were identified during testing.​

Affinity Mapping: Following usability testing, a process of affinity mapping diagramming was completed to organize testing notes into high-level and low-level user sentiments. Sentiments that were expressed by a majority of the test group, or sentiments that revolve around a key UI component were highlighted and shared. Each usability challenge that was identified was accompanied with a design solution or recommendation intended to mitigate the pain point​.

Handoff: Following wireframing the 9 page templates above, the UX team worked with the visual design team to translate our low-fidelity comps into high-fidelity comps with the brand identity tied in. Throughout all our sprints, we also met consistently with the development team to ensure dev feasibility and a smooth waterfall-style handoff.

Example for Form Template high-fidelity comps