Facebook Pixel

Website Redesign for the Mental Health Services Oversight & Accountability Commission (MHSOAC)

Before Screenshot of MHSOAC website redesign After Screenshot of MHSOAC website redesign

Website Redesign Project & Client Details

  • Client: Mental health Services Oversight & Accountability Commission
  • Date: September 2021
  • Website: MHSOAC
  • Technologies:
    • HTML5
    • CSS3
    • jQuery jQuery
    • Secure Socket Layer (SSL) Secure Socket Layer (SSL)
    • Wordpress Logo WordPress
  • Devices:
    • Smartphones: iPhone, Android
    • iPads & Tablets
    • Laptop
    • Desktop
  • Compatible Browsers:
    • Google Chrome
    • Mozilla Firefox
    • Safari
    • Microsoft Edge
    • IE 9+
    • Opera
iMac Device Macbook Device iPad Device iPhone Device MHSOAC on iMac MHSOAC on Macbook MHSOAC on iPad MHSOAC on iPhone

Award-Winning Government Web Design & Accessibility

Proposition 63, approved by California voters in 2004, created the Mental Health Services Oversight & Accountability Commission (MHSOAC) to drive transformational change across the state’s mental health system.

In 2020, MHSOAC leaders realized they needed to enhance the agency’s ability to self-manage a high-quality, responsive and informative website that also complied with state-mandated ADA website compliance. The Commission solicited Capitol Tech Solutions to enhance the agency’s website and improve communications with the general public.

MHSOAC identified community engagement and public outreach as critical outcomes for a website assessment and development project. With this information, the CTS Team recognized the necessity and opportunity to create a logical, intuitive customer journey path for content.

We provided expertise in project management techniques, including strategy, planning, and implementation components, to ensure that the deliverables were clearly defined and implemented based on scope, schedule, and budget.

Project Start – Research & Discovery

First, the CTS Team conducted focus group sessions and one-one interviews with internal and external stakeholders to better understand each department’s critical communication aspects and pain points.

We then generated a list of all site content and information architecture using the automated tool DYNO Mapper, which gave us a couple of outputs, including an interactive web output of the sitemap and a Microsoft Excel export.

Content types varied based on the page but typically included written content, links to documents, videos, images, and infographics. During the discovery phase, we documented the expected content types in each section. For example, we consider press releases as written content.

We worked with MHSOAC to further identify the content types within each section and design new templates around those types. We then set those templates as standards that content creators must adhere to as they develop content, which helps maintain consistency in design as the site evolves.

We identified each content section’s subject matter expert (SME) with the Excel export from DYNO Mapper. We then provided a URL list of each page SME for content review, along with the ability to mark the content “for approval,” “for removal,” or “in need of modification.”

CTS and MHSOAC discussed items marked as “in need of modification” in meetings and deleted items marked “for removal.” In addition to the existing content inventory, we asked the SMEs if there was desired content not currently on the website and discussed those items during working sessions.

Contact our web design team to improve your business’s web presence today!

Get Started

Project Phase 1 – Web Design & Content Optimization

Web Design

The CTS Web Development Team provided lead graphic and web design services for MHSOAC, including creating templates for page design and content layouts to optimize the engagement of the audiences and graphic material that enhanced user experience.

We developed the site framework and provided modern ADA-compliant templates within WordPress to meet the needs of each MHSOAC department using the Adobe Creative Suite.

We reviewed all existing site data, including Google Analytics data, Hotjar, or other available usability data, to learn how existing visitors use the site. This data provided the basis for future facilitation sessions with MHSOAC and allowed our team to use the session to clarify points in the data.

The previous MHSOAC site had different content sections for various initiatives. We identified each section, consolidated where we could, and designed a single page with those sections, but to present well, we pared down some of the content. Creating the template with the diverse sections allowed us to build a clean page and allowed MHSOAC to maintain the site consistently.

Our team designed templates for each of the core pages of the website with a relatively small finite set of content templates to provide consistency aid to site visitors, but it also reduces issues down the road for maintenance.

Content Optimization

After the CTS Web Development Team completed the initial content template design work, we managed content requirements gathered from MHSOAC department leads and staff members.

Our team worked with the predetermined SMEs to update web content, making it more readable for users by distilling advanced or complex topics into easy-to-grasp information. The goal was that the average user could take positive action for their mental health and well-being.

In addition to SMEs, we have found through previous projects the need to confer with an agency’s legal team to verify if any statutes require specific content to remain on a website for a certain amount of time or if there are other legal reasons to save content. We merged the legal requirements with the information from the SMEs to produce a final content list reviewed by the core project team.

We evaluated current imagery against styling guidelines to determine if icons, stock images, graphics, etc., continued to meet the agency’s evolving vision, mission, and brand consistency.

Lastly, the CTS Team reviewed all the content and related materials with the communications chief and placed the content onto the new templates.

Project Phase 2 – Migration

MHSOAC was a Drupal to WordPress migration project. Drupal is an open-source web content management system written in PHP and geared more toward developers rather than SMEs seeking to update content or make minor website changes as necessary. CTS recommended migrating the site to the more user-friendly WordPress.

We adhere to the latest World Wide Web Consortium (W3C) web development and coding standards during template design. During the template development, we run tools to ensure our code meets the standards. In addition to the W3C coding standards, we ensure ADA compliance for the templates by running ADA tools, such as Siteimprove or DYNO Mapper. Having the templates meet the criteria is critical and streamlines development during the migration phase.

To ensure sites meet ADA compliance, we include several ADA checkpoints throughout development and migration. First, the current site is analyzed for ADA compliance, and we document any existing issues. Often, noncompliance stems from PDF documents.

Once the content is migrated, we review each page for ADA compliance through automated tools and a manual inspection. If the page contains documents identified as not ADA compliant, we work with the organization on a remediation plan before that content is posted to the new template.

Convert your website traffic into paying clients with a brand new website

Get Started

Conclusion

With the help of Capitol Tech Solutions, MHSOAC migrated and optimized its website and now offers an informative, user-friendly experience for stakeholders spanning public and private mental health agencies at every level.

After launch, the website has garnered recognition, being named Best Government Website in the 2021 Mobile Web Awards, earning a 2021 Gold MarCom Award for Redesign, and a 2021 Gold MarCom Award for Government Website.

MHSOAC Website Homepage Screenshot
MHSOAC Website Design Screenshot 1
MHSOAC Website Design Screenshot 2
MHSOAC Website Design Screenshot 3

Other WordPress Projects by Capitol Tech Solutions

Contact us to get started with your own WordPress website

    Pin It on Pinterest