WEBSITE DESIGN
CP-NET Website
DURATION: 3 MONTHS
ROLE: PROJECT MANAGEMENT, ART DIRECTION, COPYWRITING, CONTENT PRODUCTION AND MIGRATION, USER TESTING
Introduction
CP-NET is a partnership program among Ontario-based researchers, clinicians and stakeholders to transform the lives of individuals with, or at risk, for cerebral palsy (CP) and their families by accelerating the development of new neuroscience discoveries.
As the Knowledge Translation Coordinator for CP-NET, I worked with a stakeholder group of young people with CP, family members of children with CP and researchers to direct the development of a brand new CP-NET website. The purpose of this site was to bring together evidence-based health resources aimed at both families and professionals.
The site was designed using a proprietary CMS designed by Parallel Made.
Research
Extensive meetings were held with community stakeholders about how they wanted this website to look and feel.
KEY INSIGHTS
- The website was intended to be used by both health professionals and family members of children and youth with CP. It was important to maintain a single experience that would serve the needs of both audiences.
- The experience of having a child diagnosed with CP is extremely stressful. Family members mentioned the importance of a welcoming website that didn’t feel too clinical.
- It was important to family stakeholders to emphasize fun, family and friendships in the imagery, rather than a focus on scenes of medical intervention.
- The website will eventually hold a large library of resources, so it was important to include a robust and filterable database that will make them easy to find.
Branding
COLOURS
Green is the official colour of Cerebral Palsy awareness and was used extensively. A series of complimentary colours were used to differentiate various areas of the website.
IMAGES
Stakeholders requested that the website feel “welcoming” and “hopeful”. As CP-NET is a local network specific to the GTA, I thought it would be impactful to feature photos of children and youth from the local CP community rather than stock images. All photos were collected by a community photo contest. The feedback on this was very positive – parents looking for information about their child’s health were greeted with real children that they might know from school or clinic, while the kids enjoyed being “famous”. It required extra editing in Photoshop but the result was well worth it.
Accessibility
Accessibility was an important consideration. The website has options to adjust contrast and text size, and all colours were selected to adhere to AODA contrast guidelines. In addition, a large number of PDF resources were converted to live text to ensure they were accessible for screenreaders.
User Testing
The look and feel of the CP-NET website was very well received. However, user testing with both health professionals and community stakeholders revealed several improvements in function.
HOME PAGE
The initial version of the site featured a full-page splash image, with individual sections accessed by scrolling “below the fold”. During testing, I found that users were missing this content completely. In response, we decreased the height of the header to reveal part of the section below, to encourage users to continue scrolling.
NAVIGATION
Users were having a difficult time finding particular resources and content. In response, we made the following changes:
- Restructured the navigation to better feature the resource section and added specific “call-outs” to the home page.
- Reworked the filter functionality on the Resource page to fit how users were used to using other products. For example, we added “pills” to the top of the results page to remind users what filter had been applied.
Impact
The CP-NET website registered 20,000 unique visitors from around the world it’s first year. It continues to be refined and populated with health resources.