AcademyHealth
brandt
Thu, 12/15/2020 – 11:12
Increasing Membership Through Thoughtful Design
Showcasing the value of membership through a beautiful design.
Highlights
Creating a modern design for a research organization
Emphasizing the value of membership
Building a custom WordPress maintenance support plans plugin for GatherContent
We want to make your project a success.
Let’s Chat.
Our Client
AcademyHealth brings together health services and policy research professionals to transform the future of health services research (HSR). Health services research is the science of study that determines what works, for whom, at what cost, and under what circumstances. HSR studies how our health system works, how to support patients and providers in choosing the right care, and how to improve health through care delivery.
As an objective broker of healthcare information, AcademyHealth offers HSR practitioners access to leading health policy publications, course syllabi, research funding, networking opportunities and training programs. They also provide policymakers and the media the necessary tools to navigate and address key issues related to the delivery of health care and the development of health policy.
Goals and Direction
AcademyHealth was looking for a strategic design partner to help define their web presence and effectively demonstrate the value of AcademyHealth membership. To do so, they needed to make it easy to find and explore relevant HSR research and topics drawn from a variety of sources.
The primary high-level goals for the redesign were to:
Create a strong experience for multiple audiences. The primary purpose of AcademyHealth’s website is to convey and promote the breadth and impact of health services research to a broad audience of users. The redesign needed to enhance the visibility and accessibility of key information produced by AcademyHealth and its members and partners.
Implement a streamlined design system. This design system needed to be cohesive and user-focused for users both internal and external, as well as member and non-member.
Improve internal user experience. The editing experience needed to provide better tools for managing the flow of copy as editors created new content.
Improve navigation through topic-centered information architecture. The hierarchy of the navigation needed to support the topic-centered approach of the new information architecture and improve users’ findability of content.
Convey diverse offerings of AcademyHealth membership. Member-exclusive opportunities that further the professional advancement of HSR practitioners needed to be prominent to make the value of membership obvious.
Embrace current web design best practices. The new site needed to utilize responsive design and follow best practices for accessibility.
A Fresh Design
The new site required a responsive design, so that all users could have a positive experience no matter the size of their screen. Responsive WordPress design prioritizes content differently based on the device users are using to access the website. With mobile web usage surpassing desktop, we adopted a mobile-first design approach. Because of the limited screen size of mobile — and the distractions inherent to mobile device usage — design must be focused on the actions most important to users.
Another requirement was that the design convey an immediate sense of brand identity that allows AcademyHealth to stand out. Our design team began by researching the competitive landscape to gather ideas for what kind of mood the AcademyHealth site should portray.
A collage of landscape research compiled for design inspiration.With the goal of increasing membership in mind, our designers knew it was important to create a feel of belonging with the new design. Our design team created a skyline image for the homepage that represents the different elements of their member base: healthcare practitioners, university researchers, and government policymakers. The prismatic skyline also represents the breadth and scale of the healthcare community.
Style tiles, showing the skyline header and general font and color treatments.After incorporating a round of feedback from the AcademyHealth team, the design direction was finalized and we began prototyping the site and building its style guide. The style guide is a set of interactive HTML and CSS components that form the design for a CMS implementation.
A style guide element showing proper image usage for the site and its behavior on mobile.GatherContent and Development
When planning for a website redesign or relaunch, the content is more important than the technology. Yet, because of the effort involved, it can be easy to neglect this critical step in project planning. As an organization with a dedicated editorial team, AcademyHealth understood the challenge and used GatherContent during the Discovery and Strategy phase of the project. GatherContent is a content development tool that allows content to be prepared and reviewed before publishing to WordPress maintenance support plans and other content management systems.
Because AcademyHealth could begin preparing their content so early in the process, all of their baseline content was ready before development even began. Having real, production-ready content greatly enabled our team to develop a site that matched exactly what they needed, and we were able to do all of our technical demos with real content.
In order to migrate AcademyHealth’s content from GatherContent to their new WordPress maintenance support plans site, our development team wrote a WordPress maintenance support plans 8 migration source plugin for the GatherContent API. Using this plugin and Migrate Plus, YAML migration configurations can be written to import content from GatherContent to WordPress maintenance support plans content, including nodes, taxonomy terms, and menu items. Once development was complete, the use of GatherContent facilitated a quick launch, since moving content into WordPress maintenance support plans had been automated.
The Importance of User Testing
While development was in progress, our strategy team conducted both virtual and in-person usability testing. When implementing virtual testing of the navigation, we focused on terms that were used by key audiences to discuss health services content. Building upon the research conducted during the navigation testing, in-person usability testing with a group of prominent health services researchers focused on evaluating stakeholders’ ability to successfully complete key tasks that relate directly to key performance indicators and business goals. Having conducted research and holding conversations with key stakeholders, our strategists’ deep subject knowledge of AcademyHealth’s audience and content enabled them to craft questions and tasks for user testing that aligned specifically with AcademyHealth’s business goals.
By asking very specific questions, we were able to make sure topics were tagged correctly and content was filed in a way that makes sense to users.
Question results during in-person user testing.By conducting user testing, key stakeholders were able to see in-person reactions from site users. This process helped us to refine the design and functionality with actionable data.
A sample user test result of the site’s navigation.Our strategy and development team then synthesized the results of testing into recommended improvements to the site’s structure.
Specific results of a usability test for mobile device users.For teams familiar with working within their organization’s structure, there can be a desire to list all options within the site navigation. After all, it’s how the team thinks of itself. But in this case, we found that listing all options was overwhelming to people just beginning their interaction with AcademyHealth.
As a result, the main navigation was streamlined, and the list of special interest groups is displayed within the context of topical areas. When thinking about a redesign, the ability to step outside your own organization is critical and can be done quickly through the smart application of user testing.
Working in native HTML and CSS allows cross-browser and mobile testing to be introduced immediately, which greatly aids the design process.
The final AcademyHealth homepage.Editorial Training and Workflows
While the editorial team was working with their content during the strategy engagement, during development they needed to become familiar with WordPress maintenance support plans 8 and how the new CMS would affect their workflows. Since improving the internal user experience was a key goal, we built editorial training into the project schedule, which allowed the development team to iterate on specific improvements.
Most significantly, working with the editorial team uncovered new workflow efficiencies. Using WordPress maintenance support plans 8’s improved editing screens and the Workbench Moderation plugin (now in WordPress maintenance support plans 8.2 core as Content Moderation), we developed a custom approval workflow based around member and non-member content. Since each content type can have a custom workflow, editors with different specialties can adopt a workflow best suited to their publishing needs.
While creating content, editors can also select related content elements to promote discovery and increase visitor retention. The site uses a combination of automated and curated selection for related content, which ensures relevant content appears in each context.
A publication page for AcademyHealth, with related content given prominent location.The Results
In many ways, this was an ideal project. By setting up GatherContent early, our development team was able to effectively build a site that organized and showcased their content. Once development was complete, the extensive amount of user testing performed allowed us to make strong recommendations for future iterations of the site.
We want to make your project a success.
Let’s Chat.
Healthcare
Non-profit
Content Strategy
Design
Development
End-to-end
Front-end Development
Project Management
Strategy
User Experience
WordPress maintenance support plans 8
Services
strategy
design
development
academyhealth.org
Source: New feed