Title

Inclusive Childcare

Project Summary

Helping childcare providers statewide

Project Image
screenshots from Inclusive Childhood website across different size monitors
Project Image Mobile
screenshot of Inclusive Childhood site on mobile and tablet
Project description

The Center for Inclusive Childhood (CICC) is statewide resource network, supporting inclusive childcare practices throughout Minnesota through training, education, and resources.

They came to use with a decade-old website, in need of a design refresh and migration to an editor-friendly content management system. The website interface looked dated and was not optimized for mobile devices. The navigation and pages had become cluttered with additional content and calls to action, while old, unattended content still was visible to users.

Paragraphs
Why EC Was Chosen

CICC had a technical consultant who they charged with finding a new team to help with a redesign, preferably someone in the Twin Cities. He reached out our Electric Citizen, based on both our years of experience in large scale website redesigns and success working with nonprofit clients.

After talking with their technical consultant, we had additional conversations with the CICC team to identify any challenges or concerns with the redesign, and to learn more about their most important project goals. We then crafted a proposal for the project, and were selected to lead the redesign.

Technical Planning

While every project presents challenges, this project began with some significant technical issues to resolve.

Study Courses

First, CICC has an online, self-study program for their clients. The content was designed in the e-learning software Captivate, and exported as Flash files to the website.

Flash as a technology has many inherent issues, from performance and accessibility to SEO and mobile compatibility. While once dominant across the Web, Flash has been deprecated for some time, and replaced by better options. 

What our team needed to do was devise a method for non-technical editors to share lesson files online, in a modern format (HTML5) and through a content management system (Drupal).

We developed a custom technique to allow editors to share the HTML5 files in Drupal, via a simple upload form, which is then processed and served on the site in a series of pop-up windows (to registered users).

Migration

Other site content needed to be migrated as well, so migration planning was essential. The site contained an entire library of helpful resources (podcast links, documents, links, etc.) that needed to be moved a CMS, where it could be more easily managed by staff editors.

Through technical discovery, our team came up with a plan for handling the technical issues and migrating content from the old site and into their new CMS.

User Experience and Content Strategy

Beside technical challenges, the CICC website had a user problem. Content was scattered across a confusing array of pages and sections, with seemingly redundant titles and menus. 

One of our first recommendations was to combine existing Resources, Tip Sheets, Podcasts, Info Modules, and Self-Study Courses content into a single library. We determined that users were more concerned about specific topics and subject areas, and less concerned about the category or technical terms for what “type” of content they were. 

The new “Resource Library” became the only link you needed to know, where childcare professionals could not only access all the valuable content CICC provided, but find what they were looking for quickly. A series of powerful page filters and search fields made finding content less of a chore, with options to sort by topic, language, keywords and more. Resource types were clearly identified in the design. 

screenshot of resource library, with listing of various resource links

Reducing visual overload is also a goal for most websites. For the new Resource Library, we advocated for a simpler table, with just the name, a brief description and resource type listed. If a user wants to read more, they can expose more text in the description with a click, or choose to view the entire page.

The site navigation was also greatly simplified, reducing the main navigation to four items–Resource Library, Ask An Expert, About Inclusive Child Care, and Shop Marketplace. This replaced a much longer navigation from the previous site and made it easier for users to get started. Secondary navigation and a clear hierarchy of user priorities also made a difference in improving UX.

sample of new CICC menu
Visual Updates

Once our technical and content strategies were in place, it was time to find a visual design that matched our new priorities. Users needed to know what CICC was about, where to find the content they needed, and feel confident in the organization.

The previous design was lacking warmth and a personal touch, something important to every user, but especially those whose daily lives deal with children. Our first recommendation was to include a series of childcare images, showing the teachers and children who were behind the reason for the site itself. Each main landing page now lead with carefully selected photos of childcare professionals. 

screenshot of website homepage, with large image banner, and many links

CICC as an organization lacked a brand identity. Our team consulted on design decisions, helping review and refine logo designs coming from a third party. Ultimately we settled on a friendly yet professional color palette for the site, using white, sage, orange and charcoal, which in turn influenced the logo design.

Visual clues, such as arrows or plus signs, are used to help guide users along in the site, while keeping the initial content overload to a minimum. Clean, clear and friendly leads the design direction.

The goal is to first welcome users in and orient them to the site. Once comfortable, we then provide the expansive content available as needed by the user. A series of easily understandable icons also are part of the new design language, to help users quickly locate the content they need and differentiate between the many options available.

homepage banner for CICC website

You and your staff are more communicative and helpful than ever and we couldn't be happier to partner with you

Kimberly Harmon, Outreach and Engagement Manager
Podcasts and Ecommerce

While much of the attention was spent on the Resource Library and Self-Study programs, additional technical requirements included an ongoing library of CICC podcast episodes and a need for an ecommerce store.

Podcasts

For Podcasts, we created a content type where editors can upload audio files, along with a title, description, topic “tags”, and keywords for the iTunes library. These are then rendered on the page, where users can listen to an episode in their web browser with a single click. Users also have the option to download, subscribe to the Podcast, or subscribe via iTunes. 

A series of filters are also available, allowing users to quickly find episodes by topic, keyword or language. 

screenshot of page listing available podcasts

Ecommerce

At time of project launch, CICC also wanted a small ecommerce store to sell products. We determined the best option was to move this to the 3rd party, Shopify, rather than build a custom store within Drupal.

For minimal cost, they could continue to sell products online, in an easy to manage platform. We were able to apply the new site branding and design to the store, and customize their Shopify account to match the new look and feel of the website. 

Shopify page for CICC
Outcomes

We continue to work with the CICC team to support and improve the site. The site is now responsive across multiple devices, and accessibility has been greatly improved towards WCAG standards.

Project URL