Defining the challenge

AMSA’s project goal was to present a more unified digital voice that could echo the authority they have built within the community they serve. In partnership with AMSA staff, we defined our effort around a fully rebuilt website, an improved content management experience, and a more cohesive brand that better represented their increasing influence.

PROJECT GOALS

Outlining the plan

To begin, our team audited AMSA’s existing content management approach, site architecture, and dependencies, looking for opportunities to improve content categorization and discoverability. These activities expose essential user flows and experience enhancements that can simplify and reduce the cognitive burden on users while accelerating conversion to membership and making it easier for the staff to achieve their objectives. Findings from this work help to define the scope and how to proceed.

Discovery

  • Kick-off and goal alignment
  • Audience archetypes
  • Branding and 
infrastructure audit
  • Performance benchmarking

Design

  • Content modeling and navigation restructure
  • Wireframes, visual synchronization
  • Rapid prototyping

Development

  • Form centralization (LGL)
  • Setup dedicated staging environment
  • Theme, pattern and template updates
  • WordPress and plugin configuration and optimization

Launch

  • Platform migration to provide improved performance, smaller footprint
  • Final alignment checks, documentation and knowledge transfer

Assembling the blocks

With alignment among the stakeholders, we initiated the next phase to define AMSA’s site architecture and navigation using modern page templates that reflected AMSA’s goals and underscored the existing semantics and hierarchy in their content. This work is centered on creating predictable patterns and approachable language that establish clear user paths through the content, using progressive disclosure to deliver the right information at the right time. We understand that for task oriented users of informational sites, simplicity is absolutely paramount, as users depend on the familiar to help them make quick, confident decisions.

Isometric grid layout of medium-fidelity wireframes for the AMSA website, showing page designs for programs, staff, and joining.

Applying brand styles

Our stylistic goal for AMSA was to help them build brand mass, emphasizing their impact and underscoring the importance of their work at the epicenter of the field. To achieve this we used a clean, authoritative type style, with professional and social proof in testimonials and partner branding. Layouts were heavy and solid with large readable text, and WCAG accessible styling and interaction. Photos and color were used sparingly to act as support to the copy, and not distract from CTAs and important text. An exception to this was the About AMSA page where it was useful that photos, stories, and color emphasize the human side of the AMSA team. These brand updates were deployed across the various channels by way of Canva kit updates and a social media asset pack.

Brand guidelines for the AMSA project, featuring Roboto typography, a heading hierarchy from level 1 to 6, paragraph scales, and a color palette with hex codes including purple, green, and a set of neutrals.

Site build and deployment

The development phase began with the creation of a proper staging environment and a backup of their existing site. We followed this with updates to the administrative experience through a refreshed dashboard theme, optimized security, intentional content categorization, removal of redundant assets, and updated tech dependencies. Integrations were also remapped to leaner, more modern implementations with embedded forms transitioned to a single vendor (LGL) and member directories migrated from static HTML lists to easily maintained Google Sheets connected via API.

The results

While the legacy site averaged about 4.5 seconds to load most pages, our new implementation loads in under 0.5 seconds. As AMSA adjusts to the new platform, Design Allies continues to offer support and coaching when it is helpful. We know their board and staff are enjoying the benefits of their revised platform, and we look forward to reviewing metrics with them as they arrive.

Brand style guide for AMSA featuring Roboto typography scales from Headline 1 to Paragraph small and a color palette of purples, greens, and grays with hex codes.