The Canadian Paediatric Society, in partnership with Diabetes Canada and the Canadian Paediatric Endocrine Group, needed a new website to support their Diabetes@School initiative, a resource for families, schools and caregivers to help school-aged children with diabetes. With a growing collection of videos, templates, and training tools, the organizations required a modern, accessible platform that could present these resources clearly and make them easy to find, understand, and share.
Solution
I designed and built a brand new website from the ground up, with a clear focus on user experience, accessibility, and multilingual support. The site architecture was tailored to reflect the distinct needs of each user group, and the navigation system was carefully structured to surface the most important content quickly. The visual design strikes a balance between professionalism and approachability, reinforcing the initiative’s focus on student well-being. I also made the site fully bilingual and responsive, and ensured it met current WCAG accessibility standards.
Results
The new Diabetes@School website launched successfully, offering a vastly improved user experience and a stronger digital foundation for the initiative. Resources are now easier to locate and use, whether accessed by parents preparing their child for school or teachers looking for guidance. Stakeholders praised the clarity, tone, and accessibility of the site, which now serves as a trusted national hub for diabetes information in school settings.
What we appreciate most about Mike is his ability to understand an audience’s needs, and use the latest technology and functionality to meet those needs.
-
Elizabeth Moreau, Canadian Paediatric Society
A chalkboard background and chalk font-face emphasize the youthful site identity.
Maintaining theme and continuity
For campaign websites it's especially important to maintain a unified theme throughout. For Diabetes at School, I developed several elements to achieve this.
Near the bottom of the homepage, there's an area where the CPS staff could add content that they wanted visitors to notice and access quickly. To contain this content, I designed a full-width row with a green "chalkboard" background and a photo of a student overlaid in front of it, holding chalk in her hand.
The headings in this section are displayed in a chalk-like typography, as if the student had written them on the board at school. I created this feature using an actual chalk font-face rather than an image, so that the CPS could edit the text at any time.
To help maintain continuity, I repeated the chalkboard element on all other pages as a separator above the footer. The model in the photo also appears throughout the site engaged in other student activities, such as working at a computer and carrying school books. These repeating elements help to make the site a more cohesive entity.
Repeating imagery helps to maintain a consistent theme throughout the site.Administrators can add category-specific modules in the sidebar.
Handling unique content
As I worked through the content, it became clear that most pages included short blurbs of text that referenced the content in various ways. Sometimes the page was available as a downloadable PDF, and that needed to be clearly identified. In other cases, there were brief reminders about diabetes that the visitor needed to be aware of.
I decided to create a sidebar to contain these elements in small modules that reflected the site's colour palette. Each module included an icon that indicated the type of content it contained. For example, a heart icon represents the "remember" module, as in: "You should know this by heart."
Like the CPS's other sites, Diabetes at School runs on the extremely flexible CMS ExpressionEngine, so I was able to code the site so that administrators could add a sidebar module on any page, and even indicate which module type it should be with the tick of a checkbox.
Accommodating complex navigation
Diabetes at School contains a wealth of information for families and caregivers to help kids living with diabetes, so we needed a very robust navigation menu that would be easy to use on a mobile device as well as on a desktop. The menu needed to be clear and intuitive, but also encompass all the site content and reflect its architectural hierarchy in the site accurately. To accomplish this, I installed a powerful navigation menu that lets the visitor drill down into sub-pages, even on a smartphone.
Post-Project
Client Feedback
Mike took our one-dimensional content and brought it to life. His clean and thoughtful design enhances the text without competing with it. What we appreciate most about Mike is his ability to understand an audience’s needs, and use the latest technology and functionality to meet those needs.
-
Elizabeth Moreau, Canadian Paediatric Society
Like what I did with
Diabetes at School?
Get in touch and let's talk about what I can do for you.
