Be Like Water

Effective, custom Web design and development for non-profits.

Case Study: Caring for Kids New to Canada

Mike's technical expertise, design acumen and insights for how to optimize the user experience are superb. We received an enthusiastic response from users of the site in our post-launch surveys. Mike would be the first person I'd call for another project.

Barbara Szijarto, Canadian Paediatric Society
Caring for Kids New to Canada

The Canadian Paediatric Society hired me to design and build the website Caring for Kids New to Canada, a site that helps health professionals provide quality care to immigrant and refugee children, youth and families. The site was a Web-version of a book that the Canadian Paediatric Society had published, and involved many editors and contributors. The site was to run on an existing install of the CMS ExpressionEngine, which powered other Canadian Paediatric Society Web properties.

Mood Boards

For the Caring for Kids New to Canada project, I put together some mood boards to establish a direction for the personality of the site. In the discovery phase of the project, we came up with a list of adjectives that should describe the site to visitors. The most important were friendly, helpful, professional, and authoritative. I then created a collage of screenshots of other websites from around the Web that also exhibit those characteristics, focusing on the design elements that accomplished this. 

Mood boards
Mood boards helped us establish a personality for the site.

Wireframes

The next step in the process was to create some wireframes: simple, gray-box layouts that show where on the screen the content might go. This exercise helps everyone to focus on placement of content without being distracted by the visual design. There were several elements that needed to appear on the homepage, so I created wireframes to represent various layout options. 

Wireframes
Wireframes help everyone to focus on placement of content rather than visual design.

Branding

Once a personality was established for the site, we needed to create its brand identity. I subcontracted a graphic designer colleague of mine to design some logo concepts, and once we settled on one, I developed a colour palette and various design elements based on the logo.

Attention to detail is very important to me, and I wanted to illustrate this on the Caring for Kids New to Canada project. To mirror the three circle "heads" in the site logo, I used three coloured ellipses as the control buttons for the sliding image carousel. I added some coloured flourishes to the corners of the carousel images as well. In the "Featured Content" sidebar, the heading of each entry is indented slightly, and I added partial circle cut-outs in the surrounding frame, again reinforcing the ellipses from the logo. The end result is a cohesive brand that is recognizable throughout the site.

Elements throughout the design reinforce the logo
The slide carousel controls and the circular cut-outs in the sidebar frame reinforce the site's logo.

Powerful Search

Caring for Kids New to Canada contains a powerful search feature
The Signs and Symptoms tool is a powerful search function.

As part of the Caring or Kids New to Canada project, the Canadian Paediatric Society asked me to build a Signs and Symptoms search feature that would allow medical professionals to identify their patients' symptoms and find a list of possible diseases and conditions that match them. 

Content authors can add the details about each disease into the CMS and tag them with the appropriate symptoms by assigning categories. Visitors to the site can select symptoms from the list, hit Seach, and get a list of matching diseases and conditions. The search tool allows the user to indicate whether he wants results that match all symptoms or any, and groups results by severity. 

Rather than use simple checkboxes for the symptoms list, I wanted to present the visitor with large target areas to make them easy to select, especially on mobile devices. When a symptom is selected, the entire box surrounding it turns green and stays that way even after the results are shown to remind the user which ones were selected when the search was performed.

Mega-Menus

The Caring for Kids New to Canada site is content-rich, and since its target audience is medical professionals with busy schedules, pages need to be accessible quickly. To this end, I built "mega-menus" to house the navigation. Hovering over each primary navigation item causes a fly-out submenu to display showing a list of pages in that section, along with an image to help with visual recognition. 

Mega-menus!
All content is quickly accessible with mega-menus.

Fully Bilingual

Caring for Kids New to Canada is built with responsive design and is optimized for desktops, tablets and smartphones. The site is available in English and French using a page-sensitive language selector so that when switching languages, the user sees the translated version of the current page rather than being sent back to the Home page. The domain also responds to the language preference: "KidsNewToCanada.ca" for English and "EnfantsNeoCanadiens.ca" for French.

After its launch, the Caring for Kids New to Canada website was featured on the Canadian television program CTV News.

User Feedback

The following are some comments about Caring for Kids New to Canada submitted by members of the target audience post-launch:

I am just writing to tell you how absolutely thrilled I am to have been forwarded your new website. You have done a beautiful job of presenting information in useable format and language. Thank you so much for putting together such an incredible resource.

I LOVE it!!! I will insist that all medical students and residents who complete electives at our clinic use this website.

Very beautiful, easy to use, inviting to use. Great links. Working really well and easy. Great job.

Excellent. Extremely clear. A great addition to the CPS tools. Very good for residents, sufficiently in depth but with additional resources available. More clear than many online tools I have used before. I will use it to teach students.

Excellent resource which I will definitely access in my day to day practice.

 

Screenshots of Caring for Kids New to Canada
Screenshots of Caring for Kids New to Canada on desktop and mobile devices.

Like what I did with Caring for Kids New to Canada? Get in touch and let's talk about what I can do for you.