South Island Child is an Early Years Centre provincial initiative website which connects child caregivers— parents, grandparents, doctors, social workers, foster parents, and other care providers— to services and events throughout Southern Vancouver Island.
We were led by the proverb, “It takes a village to raise a child.” The unusual animated logo symbolizes a child with parents, teachers, and care providers moving toward and around the child. The logo remains subtly animated throughout the user’s visit, symbolizing the constant shift and movement between roles of care providers and the relentless attention we pay to children within our care.
Discovering our users
Through a discovery process with community stakeholders, we learned that some users of the website might have low literacy skills. They might be elderly, new to the English language, or they might just be young or new parents who aren’t familiar with certain vocabulary. It was extremely important that the language used on the website would be easy to understand.
We also learned that the website wasn’t intended only for parents or grandparents. Other community social and service workers commonly act as shepherds for parents they see in their offices. South Island Child wanted the website to work well for them. These users are typically extremely educated in the field of community support. The challenge was to create a website which wasn’t facile and cumbersome to sophisticated users, giving them unnecessary steps to make things “easy”; and to create a website which had a good chance of helping even the most overwhelmed and taxed user.
Challenge #1: Literacy
We provided two ways for users to learn how to use the website. First, after 30 seconds, a new user will see a video pop-up asking them if they want to watch a 2-minute video on how to use the website.
Next, we created an extremely simple user journey for readers:
The one button grabs the attention with its size and little hand-drawn arrow. Once the user clicks on it, they are taken to the next fold. Of course, they could get there by scrolling down, but we didn’t want to assume that users would think to immediately scroll down. They might first try to navigate the website by clicking on the links in the navigation bar. We wanted to tempt them away from the navigation menu so that we could have a chance to explain how to best use the site, after which they’d naturally navigate using the menu.
The buttons here are redundant. The drop-in calendar, the search field, and the resource catalog can all be found in the navigation bars. But if we tried to show users how to use the website by using anchor links that take them back up to the top of the page, that would be disorienting for some users. If we used screenshot images to show them what to click on, this would be confusing and ugly. The most straightforward way to explain how to use the website was to contain all the information to one area, with as few words as possible, taking them directly to results. If users never click on the links in the navigation bar and keep returning to this navy instructional fold, they will have all the information they need to know.
The buttons they find on the home page are designed to capture the most common questions people have in their minds when they visit the website:
They’re tempting to click on, easy to read, and they will immediately direct users to useful information that is filtered by relevance to their question or need. The language used is straightforward and avoids lingo that pervades social welfare community websites, lingo that only industry workers use.
The website also doesn’t assume too much about the users’ internet and technology literacy. We tried to be as explicit as possible in places, combining icons with text directing users to “Email for help,” “Search website” and “Save favourite resources to one single page to print.”
Conventions for navigation bars on websites include multiple pages housed within one-word links, with drop-down menus. (See for example the Revelstoke Early Years Centre navigation link “Information.”) We opted instead for explicitly worded links like, “List of community resources” rather than simply “Resources.” The latter would not make clear to the user who the resources are for and what kind they are. Even specifying that there’s a list suggests to the user that the information will be categorized, easy to find, and easy to understand.
Because of the tagging system we employed, we were able to eliminate pages, reducing the navigation down to just three items and employing a dynamic filtering system that allows the user to find resources by:
Challenge #2: Community representation
We also deliberately refrained from any photography. Community information websites nearly always use photography as a design tool to break up content and provide relief for the eye, or to emphasize a message. The content of this website would vary widely, with the only common link being the people using the content. We didn’t feel that photos of pregnant women or children at a playgroup would add much to the website to justify the problem it created of representation and exclusion. A government website meant to work for a diverse community should also reflect the entire community— people of different races, genders, ages, abilities, family structures. It would have been impossible to do this through photography without eventually leaving someone out. And in our efforts to show a wide range of representation, we would be using photography less as a tool of communication as a tool of tokenization.
We solved the problem by using blobby illustrations that are vague enough to symbolize different genders, ages and abilities.
Because the explicit language we wanted to use on the website created atypical clunkiness, we deliberately kept the design pared down. Using illustrations instead of photography also allowed us to control the colours put before the user. Six colours in a palette might seem like a lot to some people, but colour photography would have introduced many more colours and textures when we didn’t want to overwhelm any users.
Throughout the website we emphasize the functionality, but the cheery palette keeps the website from being too cold or boring. The palette communicates childishness, but the navy also communicates sophistication.
Only one font is used throughout the website— a friendly, childish take on a classic default font. All of the text remains high contrast and (aside from some a couple of headlines) either all navy or all white.
As you can see, a lot was taken into consideration with this simple website! Where themes can work beautifully for many clients, this was a website that really demanded a custom solution, which is typically out of budget for government initiatives like these. A couple of other Early Years Centre websites to compare are: