Effective, custom web design and development for nonprofits.
Effective, custom web design and development for nonprofits.
Updating the design on our flagship website—www.cps.ca—was not an easy task, given some of the parameters, but as usual Mike brought his keen sense of design and understanding of our target audience. Mike integrated current features and functionality, so our website feels current without being too "trendy". I look forward to working with Mike again, and would highly recommend him.
Elizabeth Moreau, Director, Communications & Knowledge Translation, Canadian Paediatric Society
I was honoured to be invited to work with the Canadian Paediatric Society once again, this time to redesign their main website, CPS.ca. The CPS hired me to create a visual concept for the homepage of CPS.ca. Once complete, I assisted their internal Web developer Rob Hallatt with extrapolating elements of that design and incorporating them to the rest of the site.
The main objective for this redesign was to give the organization a fresh new look on the Web and to improve the usability of the site.
To start off, I brought in my colleague Sean Walsh to perform a User Experience (UX) audit on the previous version of cps.ca and determine where improvements could be made to the design from a usability standpoint. Sean identified several opportunities for improvement that resonated with the CPS, including:
I started my design by developing a colour palette based on the navy blue colour in the CPS logo, which would not be changing.
Once we decided on a colour palette, I developed a set of style tiles. Style tiles are a collection of colours, fonts, and other elements that illustrate the visual identity that will eventually make up the webpage. These elements are placed together on the page fairly randomly and without any consideration for layout or content. This is a great way to allow the client to get a feel for the design at a glance, without getting distracted by content organization and messaging.
As I did for another project—Caring for Kids New to Canada—I incorporated aspects of the CPS logo into the design as a “flourish” element. The top-right and bottom-right corners of the hero image have a wide curve, reminiscent of the head, hands, and feet of the human figure in the logo.
As you scroll down the page, this is implied again on the "Three Pillar" components under What We Do: each component contains an icon to represent that pillar. Those icons are vertically offset such that they overlap the top edge of the box, surrounded by a rounded border the same size as the corners of the hero image.
All this is meant to make the design more cohesive and recognizable as the CPS, but without being too explicit about it.
Presenting important clinical information for medical professionals is always challenging, because the content needs to remain readable at length while still being presented in an engaging design. To help accomplish this, I added some subtle animation effects into the page. The navigation menu on smaller mobile devices collapses into an expandable accordion menu. The Three Pillar elements that show the main focuses of the CPS have a graceful floating focus effect when you mouse over them on a desktop.
I also wanted to simplify the login process to be more user-friendly: Clicking on the Log In button triggers an animated dropdown box containing the login fields, rather than sending the user to a new login page.
Good Web design is not only about providing an optimal experience for visitors, but also for administrators of the website. The team at the CPS need to manage content daily, so I wanted to make that experience as painless as possible.
Sometimes staff may choose a hero image with a light-coloured background. In this case, the heading overlaid on top of it needs to be dark enough to provide readable contrast against the image. But other hero images may call for a more light-coloured heading to maintain that readability.
To make this easy for them to maintain, I built a “smart” hero image: When uploading a hero image into the content management system, content managers can also indicate whether its heading, buttons, and copy should be light or dark coloured by ticking a checkbox, and the code does the rest.
The following are some comments about the CPS redesign submitted post-launch:
You all deserve praise! The interface is warmer, more aerated, clearer, and I love the color scheme and the fonts used…VERY user-friendly!
The new CPS website looks FANTASTIC! Thank you to the creators of this new, brilliant interface!
Looks great. Really like the way it's laid out and how to access the 3 major things that the CPS does. Awesome job. Kudos to the communications team and the web designer.
Like what I did with The Canadian Paediatric Society? Get in touch and let's talk about what I can do for you.
