4W4G Website

According to Statistics Canada, more than 300,000 women are faced with serious life-altering decisions every year. Violence against women is a complex social issue with many faces — child abuse, domestic violence, sexual assault, trafficking and exploitation, elder abuse — complex, but in the midst of a crisis, when the window to make a move is now — the answer is simple — help must be available — now.

Persons who have been assaulted can quickly get help - hospitals, shelters, women's centres, support agencies and police.

Surrey Women’s Centre has partnered with key community agencies across the Fraser Valley to help improve the safety of women and girls. “Seeking Safety: Coordinating Care for Women and Girls” is a two year initiative to identify barriers women and girls face accessing key medical, legal and social services, and pilot or enhance existing responses to keep women and girls safer in communities across the Fraser Valley of British Columbia.

For Women, For Girls is the outward name of the program. As their communications partner, Tugboat developed the look and the fully responsive website that is being rolled out in phases. The Drupal site is weighted to the mobile environment as that is how most users will access it. Assault or abuse victims must be able to get the help they need as directly as possible. Responders and medical professionals must be able to serve victims with the most up-to-date information possible.

In the current phase, persons who have been assaulted can quickly identify hospitals, shelters, womens’ centres, support agencies and police operations. These can be contacted easily and the map on the site spawns directional maps to get the user to where they need to go. These are the highlights:

  • Toggling groups of map pins
  • The ability to link to a pre-selected group of pins from the homepage
  • Custom content in map pin tooltips (pop-up instruction bubbles)
  • Multi-page surveys
  • Multi-breakpoint adaptive design, in that it attempts to accommodate desktop, tablet and mobile sizing

For the nerds: there were a few small challenges which we steam-rolled - the Devil is in the details

  • Presenting a spreadsheet of transition houses in a useful way, that would also work on mobile
  • Accommodating multiple navigational elements that display differently depending on context: e.g. on mobile, the subnav appears on the homepage but collapsible elsewhere; the Get Help Now button expands upwards on desktop, downwards on mobile, acts as a basic link on internal pages on the desktop but a full menu on mobile; etc.
  • Presenting a map on a mobile device without trapping the user in its frame
  • Limiting the bounds of a map so that users don’t scroll off to Iceland and get lost, yet allowing all the pop-up content to display.
  • Data collation/manipulation and automated import (this is often an unmentioned challenge but was the underpinning of this site)

Visit For Women For Girls here.