Be Like Water

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

Case Study: Diabetes at School

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
Diabetes at School is the second website I was hired to build for the Canadian Paediatric Society (the first being Caring for Kids New to Canada). It's a fully bilingual resource allowing families and teachers to help kids with type 1 diabetes. 

Identifying the site's personality

The CPS had provided me with all the content for this site well in advance, as well as a logo and colour palette that their graphic designer had produced. The site was unique in that it was about kids, but for adults, so I wanted to include vibrant, positive imagery that would resonate with parents and teachers, but still portrayed a youthful feel. I also built in subtle animations throughout the design, allowing various elements to fade in gracefully to draw the eye when necessary.

 Bright and vibrant imagery reflects the site's brand identity and conveys a playful feel.
Bright and vibrant imagery reflects the site's brand identity and conveys a playful feel.

Maintaining theme and continuity

 A chalkboard background and chalk font-face emphasize the youthful site identity.
A chalkboard background and chalk font-face emphasize the youthful site identity.

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.
Repeating imagery helps to maintain a consistent theme throughout the site.


 Administrators can add category-specific modules in the sidebar. 
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.


I am very pleased with the results we were able to achieve in developing Diabetes at School, and the Canadian Paediatric Society continues to receive positive feedback about the site.

Like what I did with Diabetes at School? Get in touch and let's talk about what I can do for you.

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.


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 help everyone to focus on placement of content rather than visual design.


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.


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. 

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: "" for English and "" 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.

Case Study: HealthBridge

Though he developed a strong vision for the site after our initial discussions, Mike was more than willing to modify his ideas at all times during the process. I would be more than happy to recommend him.

Marty Logan, HealthBridge

HealthBridge has been working since 1982 in Asia, Africa and the Americas and aims to improve the health of vulnerable populations. They help local partners develop and implement appropriate solutions, apply innovative and sustainable practices, and promote effective policies. I was hired to completely redesign and rebuild the HealthBridge website,, which is now fully responsive and mobile-friendly.

I built a fully searchable database for HealthBridge’s extensive library of documents that lets the visitor filter the results by region, year, language and more. When a staff member uploads a new document to the library, a thumbnail image of that document is automatically created to make scanning the library more user-friendly for visitors.

On the homepage, I suggested we incorporate the organization’s impressive international humanitarian work, which led to the section labelled “Our Impact,” featuring imagery collected by staff in offices all over the world.

Like what I did with HealthBridge? Get in touch and let's talk about what I can do for you.

Case Study: moflow

Mike completely redesigned my website and I'm thrilled with the results in terms of both design and functionality. The best part of working with Mike is knowing my site is in good hands and that he won't miss a single detail.

Marlene Oliveira, moflow

Marlene Oliveira is nonprofit consultant and copywriter. In addition to her client work, she also runs the popular Nonprofit MarCommunity blog. Marlene hired me to redesign the website for her consulting business, She requested that the new be built on WordPress, which is not normally my CMS of choice, so it was a welcome challenge.

I'm a firm believer in the content first philosophy: that a website's content is the thing that gets designed. To that end, I never build websites with predesigned themes. No one should have to force their content into a design template that was made without any consideration for it. While WordPress does require you to start with a theme, since Marlene hired me to design the site as well as build it, I used a very stripped-down theme and customized it extensively. 

Marlene had worked with a graphic designer to develop a colour palette and some visual elements for her brand, and she asked me to work them into the site design. Among the elements I created were some textures incorporating the visual elements which Marlene could use as backgrounds for feature images on the moflow blog. Marlene also uses these to promote her articles in social media.

One of the textures that could be used as a feature image background on the moflow blog. 

It made sense to me to have different content areas set up to hold different types of content, so that Marlene could post blog entries in one place, testimonials in another, and portolio examples in another. Doing this in ExpressionEngine—my preferred CMS—is very simple, as EE has been storing content in Channels and Custom Fields since 2004. While it took some hacking, I was able to set up several Post Types to accomplish something similar in WordPress.

Custom Post Types to hold different kinds of content in WordPress.

Marlene had a MailChimp-powered enewsletter that she published regularly. Her primary call-to-action for was to get visitors to sign up for updates, so I made sure to add her enewsletter signup form in several places throughout the site, and of course make it mobile-friendly as well. The design of reflects Marlene's fun, lighthearted brand personality while maintaining her company's professional values, and the colourful module-based layout reflects the focused nature of her work.

Like what I did with moflow? Get in touch and let's talk about what I can do for you.