BC Government Responsive

While working with a local software company here in Victoria, I was given the task of wireframing the responsive design efforts of the BC government website in 2012. Responsive design at the time was really beginning to take shape around the world, and this meant the task of reverse engineering the current government site structure to be more user friendly around the province on mobile devices.

The navigation used within the Education Department for example, dropped as many as 5 levels deep -- this created 150 character breadcrumbs lines, as well as dozens of supplementary navigation links that required design solutions that could degrade well on a multitude of screen sizes.

Wireframing helped offer solutions for navigation, search display, workflow and what page elements should be hidden from view and when. Countless screen sizes exist, however 5 of the most popular break points were used to highlight the degradation steps for the main website templates: 

  • Large Screen: (1085) 
  • Below Standard Screen: (960)
  • Tablet Vertical: (712)
  • iPhone Horizontal: (480)
  • iPhone Vertical: (320)

Each one of the sizes listed were wireframed for the sub-sub page template, sub page template, parent page template and home page template. The 712 screen offered the most challenges since it wasn't a size that necessarily fit all the page elements inline or evenly. This would mean making design choices on either staggering supplementary call-outs, or hiding less relevant information to improve scroll and usability on tablets.

Weighing design solutions for smaller devices is really about two things: user experience and maximizing load performance against the existing device hardware. For example the home page had many pre-existing content features. To better improve the overall usability experience for visitors, notable gains could be made by hiding the use of client-side multi-tabbing features found in the header of the page. The decision to hide this tab feature on screen sizes smaller than the typical tablet improved the amount of user scrolling, content flow and load performance for those older devices at the time.