Summary  

A redesign, restructuring, and upgrade of dStigmatize.org to improve the needs of the site visitors and authors and create a robust resource library to assist healthcare professionals in discovering information about diabetes stigma quickly.

Overview

The dStigmatize.org website improvement project is an extension of the work completed by Brooks Digital in February 2022, when we launched the first iteration of a website that addresses some of the issues surrounding diabetes stigma. 

The two primary goals and deliverables for the project included:

1. Update the user experience to target a new audience for those working in healthcare while upgrading the brand, design, and authoring methods
2. Create a new “Toolkit” or “Resource Library” that is easy to find, use, search, and filter.

Following a detailed discovery phase, the BD recommended a modified site navigation, relocating some site content, creating new page layouts, and implementing the Gutenberg editor to allow the client to create compelling and flexible pages in the future.

Along with the sitewide improvements, we created and assisted in building the “Resource Library,” including content pages to give site visitors a streamlined and improved experience to learn and share information about diabetes and stigma.

The updated site is more engaging, better reflects the diaTribe brand, and encourages site visitors to visit more pages and stay on the site longer.

About the Client

diaTribe aims to reduce the impact of diabetes on society and improve the lives of people with diabetes by fostering an understanding of the disease, eliminating misplaced blame, and ensuring access to care. 

Their health communications professionals leverage the power of media and events to share their visionary ideas. With diaTribe.org and its news channels as their primary vehicle, dStigmatize.org is one of their secondary sites targeting important topics related to the disease.

Goals

Where the first iteration of the dStigmatize website was designed for communicators and people with diabetes, our investigation showed that advocacy groups were increasingly important site visitors, and healthcare professionals became the primary audience. 

This information, along with the client’s experience using the site, gave us ample information to define the two main goals and deliverables clearly.

1. Make general site improvements to increase engagement, upgrade the branding and visual design, improve user flows, and create a better overall experience for site visitors and authors.

    

2. Create and build a Resource Library or “Toolkit” that provides site visitors with a streamlined, informative, and powerful method for locating resources to help them understand, reduce, and provide guidance about the effects of stigma. The Resource Library landing page needed to be friendly and informative for digesting and scanning content. The content pages needed to be simple to configure with the ability to add visuals easily, format, add functionality, and share.

Methodology

The design and technical teams at Brooks Digital reviewed the requirements and the legacy site to determine the best plan of action. Along with the Project Manager, they agreed that a phased approach to the development and launch would benefit the client’s workload, clearly meet their external deadlines, and allow dedicated time for content entry while the BD team focused on the second key deliverable. 

The Brooks Digital design team began by performing an in-depth analysis of the previous dStigmatize.org site before setting to work on design and usability tasks. The technical team began by evaluating the legacy site and the value of adding the Gutenberg editor for the authors. 

Our methodology includes the following tasks: 

• Infrastructure and technical planning
• Client needs, user experience, and technical survey
• Content mapping, analysis, and information architecture planning and recommendations
• Wireframing the homepage, landing pages, and general content page 
• Brand analysis and benchmarking 
• Graphic and interface design
• Content creation (graphics and principle messaging)
• Custom website development and programming
• Retheming
• Gutenberg editor integration and site enhancements
• Accessibility, GDPR compliance, and tracking tasks
• Site building and content entry
• Documentation and training
• QA and launch
• Post-launch support and continuous improvement

Solution

General site improvements

With the first phase of the site launched in February 2022, diaTribe felt it was time to thoroughly audit the dStigmatize website to assess what improvements and functionalities should be made. 

Our discovery exercises, site analysis to evaluate content and functionality, and listening to client input via a questionnaire and their documentation indicated three areas for improvement:

1. With more content added since the initial launch, and without the ability to categorize for multiple scenarios, specific types of content were difficult to quickly find and differentiate for the three types of site visitors.
2. The information architecture now needed to prioritize healthcare professionals.
3. With the addition of new content, pages had become text-heavy, and visuals were not used consistently to their advantage. Basic components such as accordions were underutilized, making the pages difficult to digest. 

Using our content mapping techniques, our strategist evaluated and categorized each piece of content. We discovered that some general information located on landing pages would best be relocated to the “Resource Libary” and that many of the landing pages were complex, with too much information, text-heavy pages, and places where the content blended together. Readability was a concern.

We redesigned each landing page to reflect their purpose better and modified the top-level navigation to ensure that the new “Resource Libary” would be quick and easy to find. We created and suggested new content pages where required.

The overall design was improved, now showing the relationship of this initiative with their parent diaTribe organization, allowing for more white space, streamlining the color palette, and allowing for more compelling site visitor interactions.

In the backend, our developer installed the Gutenberg editor to provide the required flexibility for the pages and client, along with coding the general design improvements.

Documentation, site and page building, and general support tasks followed the backend work to ensure a successful relaunch and a happy, self-sufficient client. We continue to provide support post-launch, adding functionality, making incremental improvements, and performing security updates.

Creation of a “Resource Library” or “Toolkit” 

During our first discussions with the client, they talked about how they were impressed with the “Resources & Research” page we created for the “Time in Range” website, their sister organization. They saw the value of that solution and asked us to create a similar solution but one that reflected their needs and site visitors. The goal for their Toolkit was to create a quick, helpful, and informative repository of information to help their audiences understand, reduce, and provide guidance about the effects of stigma on their patients. 

The toolkit needed to be prioritized as its own item in the top-level navigation to quickly and easily access its functionality and content. It also needed:

1. Solid search capabilities
2. Advanced filtering
3. A friendly and informative method for digesting and scanning content 
4. New, easy-to-configure content pages with the ability to add visuals easily, format, add functionality, and share

In collaboration with the client, we categorized the types of content in the Toolkit to include guides & tools, videos, research, partner resources, personal stories, press releases, and other potential resource types. Much of the legacy content is comprised of PDF documents and short external YouTube or Vimeo-hosted videos run on the site. 

Quickly accessed through the “Resources” link on the site-wide navigation, the toolkit provides a smooth and powerful user experience.  Solid search capabilities are delivered by entering the topic in the keyword search. 

Advanced filtering for Topic, Type of Resource, and type of website visitor streamlines the results. Large graphic “cards” engage site visitors, displaying an image, title, and tags reflecting the topics that apply to the resource. A “Read More” button allows quick access to the content page. The addition of a stethoscope icon on the card and the content page indicates pages intended for healthcare professionals.

As SEO is an ongoing concern at diaTribe, materials containing content that cannot be easily scanned and indexed by search engines, such as videos and infographics, now have a dedicated page for indexing. These pages include a summary of the document or video, an identifiable image, and a link for downloading the full PDF document or viewing the video. The pages have improved and increased visuals, format, functionality and ability to ease of sharing.

Design

The redesigned site leverages and improves the work completed on the legacy site and ensures the diaTribe brand is respected. The new design simplifies pages, improves engagement, emphasizes calls-to-action, and makes it easier for site visitors to read, understand, and take action when possible. A redefined site architecture ensures that healthcare professionals can quickly access their information.

The pages use a variety of predetermined components, some with rich images, and ample use of white space to help segment the information, thereby improving page readability. A refined palette of cool blue tones ensures that the rich imagery and graphics “pop” visually, giving the site much-needed contrast. Buttons are now more interactive, and linked text is used less.

The bold graphic design for the hero images incorporates circular cutouts, some housing images of individual people, representing the loneliness that can result from being stigmatized. As an homage to the diaTribe brand, the footer largely leverages the footer design on the new diatribe.org website.

Challenges

The legacy site was configured so that each page used fixed fields for authors to fill in with either text or an image. The new dStigmatize.org introduced the client to the Gutenberg editor — allowing authors to configure pages by using a list of standard components, and then arranging them into their preferred order. After setting up their pages, authors add appropriate content, save it as a draft, and then review the page before publishing. 

This new approach required training and, at times, assistance from Brooks Digital to create the initial layouts that best express the page content in a web-friendly manner. As the client’s skill set focuses on writing and research, it was understandable that assistance from our design and strategy team was needed.

Results

As part of the wider diaTribe corporate brand, the updated website leverages design elements from the redesigned diatribe.org, inclusive imagery and writing, and a clean, cool color palette that engages site visitors and evokes the professionalism required from this type of website.

The new architecture gives site visitors a clear path to their interests. The “Toolkit” provides healthcare professionals and other site visitors with a streamlined method for locating information with robust filtering for their interests, the type of resource, and their role.

The redesigned site continues to use WordPress as a content management system and is compliant with accessibility and other standards such as GDPR. The detailed Authoring Guide assists and answers questions, providing details for new and existing administrators

The improvements and additions render the site more engaging, reflect the diaTribe brand, and encourage site visitors to visit more pages and stay on the site longer. It works harder to be a primary source of information for Healthcare Professionals needing information about diabetes stigma. 

From the Client

“The team at Brooks Digital was a pleasure to work with and were extremely professional and attentive to our needs and requests. Brooks Digital aligns closely with our mission, which we value greatly and their team is extremely accommodating and easy to communicate with. Their professionalism, attentiveness, and accommodating attitude were key elements of their work.”

Matthew Garza
Senior Program Manager, The diaTribe Foundation

Interested in working with Brooks Digital?

Fill out the form below to get in touch with us. We look forward to hearing from you!