MG

Michael Gallegly - Portfolio

Return to Portfolio >

Associations Now - Website Redesign

A full redesign of the Associations Now content hub that modernized their brand, and offered a wider variety of content formats to their audiences.

Overview

Associations Now is the primary content website for the American Society of Association Executives. They are the essential organization for association management, representing both organizations and individual association professionals.

ASAE were a long-time client of Manifest and had last redesigned their website around 2014. We had primarily published content for them on the AssociationsNow.com website, and in 2021 we worked with them to design a completely new website to take their brand and content forward in big ways.

What started as a simple facelift became a full-scale reorganization of the site, along with a complete redesign. For Manifest, this was the first full web design project that utilized Adobe XD and its collaborative editing capabilities, allowing me to work in real-time with a visual designer through all phases of the design process. It also offered opportunities to mentor a junior designer and help them grow their responsive web design skills.


Responsibilities & Tasks

  • Led project kickoff, discovery research, stakeholder interviews, and design strategy sessions
  • Conceptual UX and UI design
  • Site map and user flow development
  • Requirements definition
  • Collaboration with internal team including project managers, visual designer, SEO experts, and performance marketing colleagues
  • Developed a design system to be leveraged across the new site and allow for scaling new content initiatives in upcoming years

Previous Site

The previous site was plagued with a variety of issues, including narrow page width, an abundance of text with limited whitespace, an organizational taxonomy that did not support typical user flows, and an inability to scale in new page features. Additionally, the site was hosted on a WordPress platform in dire need of significant updates.

The website’s navigational structure didn’t properly support easy browsing of categories and prioritized lower priority categories at the parent-level, such as the Newsletter. Topics and Blogs were virtually the same content, causing confusion amongst visitors as to which path they should take to view relevant content.
The homepage was poorly organized and cluttered - content cards competed for priority amongst each other, with bold typography and limited whitespace making the reading experience frustrating.
Topic landing pages also suffered from the narrow page width, with content cards running together, and the inclusion of post excerpts making pages difficult to scan.
Article templates forced content into a 2/3 content column - within an already narrow page width, it created a sub-par reading experience with limited ability to add visually driven features such as carousels, video, etc.

Site Maps

Our first major exercise following discovery was to reorganize the site around a structure and taxonomy that prioritized topic categories across the primary navigation bar. We itemized all parent and child level categories in the current site, and set out to completely rethink how the new site would be structured.

Our first exercise found us reviewing the current site and identifying priorities for existing parent and child categories. We used Miro to quickly assemble the site map.
This represents our reworking of the navigaton and overall site structure. We simplified the site significantly, and focused it around topics.
The final site map that we built the site around. This particular diagram helped us communicate the volume of regularly published content that would now be much more discoverable since the primary navigation was focused on topic categories.

Wireframes

Our design process quickly evolved from low-fidelity wireframes to high-fidelity blends of wireframes and comps. We designed with an established styleguilde and new color palette, which helped us gain buy-in from our clients much faster and earlier in the process than if we had presented low-fidelity, box-based wireframes.

The new navigation structure showing how we prioritized topic categories across the primary navigation bar. This allows for an easier abilitiy to identify content of relevance to visitors.
Homepage wireframe showing wider layout, insertion of ad units
Deep Dives landing page supports a sponsored content category that Associations Now prioritizes over standard article content found on the site. Each section within the page directs to Deep Dives content landing pages.
Topic landing pages allow for a more refined layout of content cards mixed with ads than the previous site. We were able to use a variety of content card sizes to represent a hiearchy of importance and publish date.
Article detail pages saw a huge improvement over the previous layout, with a removal of the right rail and a wider page width allowing for a vareity of content layouts, callouts, features within the page, and video.

The New Site

Thanks to our use of Adobe XD, we were able to quickly shift to presenting fully-designed comps to our clients within the inclusion of imagery and final interactive elements. To view the full live site, visit www.associationsnow.com.

Homepage Comp
Deep Dives Landing Page Comp
Topic Landing Page