The municipal bodies of Vancouver's North Shore offer services addressing a variety of youth issues, from what to do on a Saturday to finding help in a crisis moment. We turned their directory into a fast mobile website that young people could understand.

Where We Started

The Community Development teams for Vancouver’s North Shore (City of North Vancouver, West Vancouver, and District of North Vancouver) have traditionally printed annual guides to their many youth-oriented programmes.

Print guides, however, quickly fall out of date, and feel out of sync for a demographic accustomed to finding what they need on their phones. So they asked us to create a mobile-focussed interactive guide as a resource not only to the region’s youth, but for the outreach workers and other municipal staff, as well.

What We Did

We developed our understanding of how youth and municiple services interact through content workshops, interviews, and surveys with front-line youth workers, administrative staff, and of course younger people.

Though the guide wasn’t strictly for crisis moments, one persona always stood at the front of our process: a vulnerable teen with no place to go. Finding ways to welcome, talk to, and connect a person in need with help guided everything we did. As an interface between youth and local government, the directory needed to be informative, but not so formal that it couldn’t feel relateable in potentially stressful situations for various age groups and needs.

Design testing involved several months of participation from staff throughout the three districts, and the most terrifying audience of all: a room full of youth armed with their own phones.

The Results

After several months of internal testing, the new online, mobile-focussed North Shore Youth Services Guide launched at NSYouth.ca (best viewed on phone and tablet, but serviceable on desktop).

The interface design creates scenario-driven pathways through nearly 200 services that guide youth based on their circumstances, while providing for casual exploration and simple look-up tasks with the speed of a native app. The directory’s interface features a somewhat casual, but rational design sensibility that is calm but not authoritative. The interface employs language that’s plain but resepectful of the lived youth experience.

Built for mobile, we provide flexible filters for age and location, speedy filtering, and connections to one-tap phone calls from service listings, as well as integration with maps.

Community Development staff can accept service changes from administrators of the various programmes across the three districts with an approval workflow. Events are coordinated through a shared calendar already in use, which could be switched to different calendar sources without redesign.

Services Used

Collaborators

Technology

Project Snapshots

NSYouth.ca homepage

The NSYouth.ca homepage aims to greet with a welcoming tone and clear options.

Main stage events

Pathways to services are found through through plain-language questions,
rather than a wide range or service categories and sometimes-obscure names.

Main stage events

Big Questions starts off with serious needs, coloured in more urgent tones.

The responsive lineup on desktop, tablet and smartphone

but the urgent tones give way to lighter ones as the questions become less serious.

The responsive lineup on desktop, tablet and smartphone

The instant search responds to every keystroke, while filters for locations,
age groups, and 24-hour availability can be mixed and matched freely.

The responsive lineup on desktop, tablet and smartphone

Service listings sandwich two map slices together: one showing general location,
and a second to show street-level location.

We can do this for you

What might have easily been a plain list of searchable services turned out as a service guide sensitive to and structured around the realities of youth. We’re proud of the design and technical aspects of this project, but most of all the approach that put young people in need at the front of our process.

What tricky situations and audiences are you trying to serve? Maybe we can help.

Say hello@denimandsteel.com