Case Study: Website reorg & redesign

A nonprofit that offers support services to active troops, veterans and their families was struggling to maintain an effective website that enabled their supporters, volunteers and beneficiaries to understand how they could get involved given the vast array of programs and services offered. My firm was hired to overhaul the information architecture, give the site a visual facelift, and transition the site’s CRM to WordPress.

Initial Research & sitemap

The first stage of the project involved an extensive discovery process where members of my team interviewed internal stakeholders and reviewed Google Analytics data to understand what content the organization had to offer and how users were currently navigating the site. After reviewing this information I used Slickplan to propose a new information architecture for the site that was then workshopped and revised internally:

This sitemap represented a significant departure from the site’s existing structure and we weren’t sure how well it would perform for the client’s many audiences. We therefore leveraged Optimal Workshop to test this sitemap with 150 potential users. We posed 11 questions, based on what we understood were the highest priorities for the client and their users, including:

  • You want to volunteer and send care packages for Soldiers’ Angels. Where do you click to sign up for this volunteer option?
  • You work for a company that is looking to partner with Soldiers’ Angels on a Home of the Brave event. Where do you click?
  • You want to volunteer with Soldiers’ Angels, but you’re looking for activities that you can do from home during COVID. Where do you click to find these virtual volunteer activities?

The full results of this tree test revealed significant success compared with the existing site, but there was still opportunity for improvement. Based on the results of the testing along with additional conversations, we continued to revise the IA until a final solution was reached:

Wireframing

I did extensive wireframing in Whimsical to illustrate to the client how key landing pages would be organized to provide appropriate funnels for users of different types. As we also proposed implementing “megamenus” to facilitate navigability, my wireframes included how these dropdown menus might work. After three rounds of revisions we had approved wires:

Visual Design

The client lacked a strong visual identity, so significant work was put into developing a brand identity that would express the qualities the client was looking for (“patriotic with a nod toward the military, but in a neutral sort of way.”). Eventually I arrived at the following approved framework:

This initial style tile — which was also used to showcase how I envisioned a video occupying the hero region of the homepage — was then used as the foundation for designs of the rest of the site. Several key pages were mocked up early in the process while the sitemap was still under development:

As the sitemap was refined, more mockups were produced and some elements of the design were refined:

Final Implementation

Once designs were approved, I personally led development of the WordPress theme and functionality for the site. I also personally took footage the client provided and used it to create the video that plays on the site homepage. The final site, which has of course evolved since it was launched, can be viewed at SoldiersAngels.org. Since launch, the overall bounce rate for the site has decreased by over five percentage points.