Responsive Web Design

On the road to RWDOn the road to RWD

David Shipley and Trevor ThomasUniversity of New Brunswick

www.unb.ca/its

About DavidAbout David• BA in Information and Communications Studies (‘05),

working on MBA (‘15)

• Started at UNB in 2008 in Communications and Marketing, moved to Information Technology Services (ITS) in 2012

• Former business reporter for the provincial newspaper

• Served in Canadian Army from 1997 to 2002

• Born on Canada’s west coast in beautiful British Columbia

www.unb.ca/its

About TrevorAbout Trevor• Programmer / Analyst Diploma from College of

Business Technology

• Web Developer at University of New Brunswick

• Lead Developer for the RWD project

• NBA and NFL fan. Don’t call on Sundays. Or Tuesday, Wednesday or Thursday nights. Unless it’s about sports.

• Also from British Columbia

www.unb.ca/its

AgendaAgenda• About UNB• Overview of UNB.ca• Web Strategy & Governance• Why RWD• Site Demo• Measuring Success• Lessons Learned

www.unb.ca/its

About UNBAbout UNB• Founded in 1785 and is the

oldest public, English-language university in North America

• Two main campuses in Fredericton and Saint John, New Brunswick

• Approximately 11,000 students, 3,000 faculty and staff.

www.unb.ca/its

About UNB.caAbout UNB.ca• Among the first Canadian universities to

launch a comprehensive website in the early 1990s

• Site grew to more than 200,000 pages by 2008.

• Four-year project begun in 2008 to overhaul entire site including all faculties, schools and departments.

www.unb.ca/its

Web Governance @ UNBWeb Governance @ UNB• Following initial 2008 project, efforts were made to

formalize web governance at UNB, resulting in our first web strategy in 2010.

• Web Strategy Group consisting of four members (AVP IT, Director C&M, Director Solutions and Web Strategist).

• Web Strategy Group’s mandate included implementation of senior university management-approved two-year plan and oversight over the UNB common look and feel.

• Site owners (content creators) responsible for leveraging university tools (Cascade Server) within university-approved brand (Common Look and Feel).

www.unb.ca/its

UNB Web StrategyUNB Web Strategy

The web environment at UNB is all external and internal infrastructure that delivers content as well as application functionality to end users.

It includes services built, maintained or delivered by UNB or third-party services such as asocial network sites that are used by UNB as ways of delivering information or engaging with end-users.

www.unb.ca/its

UNB Web EnvironmentUNB Web Environment

www.unb.ca/its

•UNB.ca – externally orientated, revenue generation and reputation building

•InsideUNB – internally orientated, transaction-focus “get stuff done”

•MyUNB – personal information and electronic services (Portal)

Why RWD? Why RWD? • External mobile traffic had grown from 1%

in 2010 to 5% in 2012 and 14% in 2013

• Avoid content duplication (no m.unb.ca) and benefit SEO

• Easier to maintain

www.unb.ca/its

By the numbersBy the numbers• 48% of American teens own an iPhone

• 43% use their smartphone for all of their web surfing

• School website trumps all other online resources in influence (e-mail, third-party websites, social)

• 70% say the website affected their perception of the school

• Students prefer to browse on a laptop/desktop, but still visit on mobile. (70% visited a school website on a mobile device)

• 50% want the site to adapt to their device

Source: Noel Levitz, E-Expectations 2013

www.unb.ca/its

The site circa July 2013The site circa July 2013

www.unb.ca/its

Web Design Refresh ObjectivesWeb Design Refresh Objectives• Provide web content in the best possible format for

desktops, laptops, tablets, smartphones and other handheld devices

• Reduce overall web page clutter, lighten overall look

• Improve campus-level recognition

• Improve audience-based navigation on homepage

• Integrate social media

• Improve accessibility

www.unb.ca/its

Who did we learn from?Who did we learn from?• University of Notre Dame• Boston Globe• University of Western Ontario• College of William and Mary• Ball State University• Boston University• And many more

www.unb.ca/its

How was the project structured?How was the project structured?

• Research Phase – Late 2011

• Goal Setting – Summer 2012

• Wireframes – Fall 2012

• Design Mock-ups – Winter 2013

• Implementation – Spring & Summer 2013

www.unb.ca/its

www.unb.ca/its

Project ManagementProject Management• ITS has a project management office

(PMO)

• An experienced, senior project manager was assigned to this effort

• We used the Agile project management approach.

www.unb.ca/its

DemoDemo

www.unb.ca/its

Key elements in project successKey elements in project success• University leadership-approved web strategy

• Concise governance model for the web

• Data-driven decision model (Analytics and Usability Testing)

• Project Management Methodology throughout (Agile)

• Focus on improvement, not perfectionwww.unb.ca/its

Project success measurementsProject success measurements• Development work completed in four months duration

with small project team at a 92% reduction in cost from ‘08 effort and 78% reduction in duration.

• More than 200 sites and 28,000 pages converted in 10 days.

• Average increase of approximately 70% in visitors to prospective student content in the first 30 days, year over year. 10% improvement in smartphone user time on site in the past 30 days, YoY.

• General satisfaction amongst university community.

www.unb.ca/its

Lessons learnedLessons learned• Improved inventory of sites would have eased

migration efforts

• Use of the RACI model externally to the project, along with clear expectations for what consultation means with some stakeholders would have eased internal, pre-launch issues.

• Include freshness of content as a key testing criteria for dynamic elements

www.unb.ca/its

Technical Walk ThroughTechnical Walk Through

www.unb.ca/its