SlideShare a Scribd company logo
Title Text
Going Responsive: Making Your Desktop
Site Mobile
A Case Study
Tadhg Healy - City of Vancouver
Responsive Web design is the
approach that suggests that design and
development should respond to the
user’s behavior and environment based
on screen size, platform and
orientation.
- Smashing Magazine
• Approved by Mayor and
Council in April 2013
• Digital services
organisation
Digital Strategy
Challenges
• CoV website launched
late 2012 (fully
functional on mobile)
• Digital vs Government
Stakeholders
Resources
Usability testing
Frank - Frustrated
Lisa – Local minded Nahm – Newcomer
Connie –
Content citizen
Bahri – New
business owner
Aaron – Efficient
professional
Steve – Student
Content strategy
Content strategy
Content strategy
• Mobile users may have
different priorities
• Same content
• CTAs & PDFs
Content strategy
Content elements
Content elements
Content elements
Content elements
Navigation
Navigation
Sketch
Navigation
Sketch Design
Navigation
Sketch Design Prototype
Navigation
Sketch Design Prototype Test
Navigation
Sketch Design Prototype Test
Technical
Launch
Post launch
• Beware of going into the area of diminishing returns…done
is better than perfect
• Question the experts
• Ensure you can do rapid prototyping: test and then iterate
• Use what you have – focus on MVP as early as possible
• CoV mobile traffic increased from 22% in early 2012 to 32%
in December (launch)
Top 5 takeaways
Partners
vancouver.ca/digitalstrategy
domain7.com/work/city-vancouver
@tadhgrrr | linkedin.com/in/tadhghealy

More Related Content

Viewers also liked

Façade pattern
Façade patternFaçade pattern
Façade pattern
mentallog
 
Webaula 2
Webaula 2Webaula 2
Webaula 2
daniela oliveira
 
Fleetmanagementbasics 12884529466649-phpapp01
Fleetmanagementbasics 12884529466649-phpapp01Fleetmanagementbasics 12884529466649-phpapp01
Fleetmanagementbasics 12884529466649-phpapp01Deuce Condenuevo
 
Programa concejal lista
Programa concejal listaPrograma concejal lista
Programa concejal lista
Jesus Aponte
 
Establishing Rapport
 Establishing Rapport    Establishing Rapport
Establishing Rapport
Simone Becker
 
Composite pattern
Composite patternComposite pattern
Composite patternmentallog
 
Nosql
NosqlNosql
Nosql
mentallog
 
3. transpo system overview
3. transpo system overview3. transpo system overview
3. transpo system overview
Deuce Condenuevo
 
Mentallog12 10
Mentallog12 10Mentallog12 10
Mentallog12 10mentallog
 
Agile software development
Agile software developmentAgile software development
Agile software development
mentallog
 
Builder pattern
Builder pattern Builder pattern
Builder pattern
mentallog
 
Modelo para elaboração do portfolio individual unopar 2015
Modelo para elaboração do portfolio individual unopar 2015Modelo para elaboração do portfolio individual unopar 2015
Modelo para elaboração do portfolio individual unopar 2015
daniela oliveira
 
Universal design of learning
Universal design of learningUniversal design of learning
Universal design of learningbeccastrauss
 
Little red ridinghood
Little red ridinghoodLittle red ridinghood
Little red ridinghoodSimone Becker
 
The dimension of meaning
The dimension of meaningThe dimension of meaning
The dimension of meaning
Ihsan Pratama
 
Mix Me
Mix MeMix Me
Insight-DigitalStrategy-Presentation
Insight-DigitalStrategy-PresentationInsight-DigitalStrategy-Presentation
Insight-DigitalStrategy-PresentationMarwan Mousfi
 
English essay
English essayEnglish essay
English essay
orderyouressays
 
Uk essays
Uk essaysUk essays
Uk essays
orderyouressays
 
Research papers
Research papersResearch papers
Research papers
orderyouressays
 

Viewers also liked (20)

Façade pattern
Façade patternFaçade pattern
Façade pattern
 
Webaula 2
Webaula 2Webaula 2
Webaula 2
 
Fleetmanagementbasics 12884529466649-phpapp01
Fleetmanagementbasics 12884529466649-phpapp01Fleetmanagementbasics 12884529466649-phpapp01
Fleetmanagementbasics 12884529466649-phpapp01
 
Programa concejal lista
Programa concejal listaPrograma concejal lista
Programa concejal lista
 
Establishing Rapport
 Establishing Rapport    Establishing Rapport
Establishing Rapport
 
Composite pattern
Composite patternComposite pattern
Composite pattern
 
Nosql
NosqlNosql
Nosql
 
3. transpo system overview
3. transpo system overview3. transpo system overview
3. transpo system overview
 
Mentallog12 10
Mentallog12 10Mentallog12 10
Mentallog12 10
 
Agile software development
Agile software developmentAgile software development
Agile software development
 
Builder pattern
Builder pattern Builder pattern
Builder pattern
 
Modelo para elaboração do portfolio individual unopar 2015
Modelo para elaboração do portfolio individual unopar 2015Modelo para elaboração do portfolio individual unopar 2015
Modelo para elaboração do portfolio individual unopar 2015
 
Universal design of learning
Universal design of learningUniversal design of learning
Universal design of learning
 
Little red ridinghood
Little red ridinghoodLittle red ridinghood
Little red ridinghood
 
The dimension of meaning
The dimension of meaningThe dimension of meaning
The dimension of meaning
 
Mix Me
Mix MeMix Me
Mix Me
 
Insight-DigitalStrategy-Presentation
Insight-DigitalStrategy-PresentationInsight-DigitalStrategy-Presentation
Insight-DigitalStrategy-Presentation
 
English essay
English essayEnglish essay
English essay
 
Uk essays
Uk essaysUk essays
Uk essays
 
Research papers
Research papersResearch papers
Research papers
 

Similar to Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)

Digital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital AssetsDigital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital Assets
Ayca Turhan
 
Effective course design
Effective course designEffective course design
Effective course designWCET
 
Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...
Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...
Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...
Steve Greenley
 
#1NLab14: Responsive Design
#1NLab14: Responsive Design#1NLab14: Responsive Design
#1NLab14: Responsive Design
One North
 
HueyLe-Resume2014
HueyLe-Resume2014HueyLe-Resume2014
HueyLe-Resume2014Huey Le
 
Intranet trends to watch
Intranet trends to watchIntranet trends to watch
Intranet trends to watch
nonlinear creations
 
Unveiling the World of Web App Development.pptx
Unveiling the World of Web App Development.pptxUnveiling the World of Web App Development.pptx
Unveiling the World of Web App Development.pptx
PriyankShah174006
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Randstad USA
 
Sourabh ui
Sourabh uiSourabh ui
Sourabh ui
Sourabh sen
 
Sourabh ui
Sourabh uiSourabh ui
Sourabh ui
Sourabh sen
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Designmartinridgway
 
A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio
Tina Lee
 
HueyLe-Resume2015
HueyLe-Resume2015HueyLe-Resume2015
HueyLe-Resume2015Huey Le
 
Responsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllResponsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits All
Perficient, Inc.
 
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-022230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
Natalia Fomina
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens
 
Responsive design SharePoint
Responsive design SharePointResponsive design SharePoint
Responsive design SharePointspdlabs
 
Vatsal_Resume
Vatsal_ResumeVatsal_Resume
Vatsal_Resume
Vatsal Shah
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingAtwix
 

Similar to Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study) (20)

Digital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital AssetsDigital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital Assets
 
Effective course design
Effective course designEffective course design
Effective course design
 
Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...
Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...
Steve Greenley July 2015 - Enterprise Architecture and True Agility - lessons...
 
#1NLab14: Responsive Design
#1NLab14: Responsive Design#1NLab14: Responsive Design
#1NLab14: Responsive Design
 
HueyLe-Resume2014
HueyLe-Resume2014HueyLe-Resume2014
HueyLe-Resume2014
 
Intranet trends to watch
Intranet trends to watchIntranet trends to watch
Intranet trends to watch
 
Unveiling the World of Web App Development.pptx
Unveiling the World of Web App Development.pptxUnveiling the World of Web App Development.pptx
Unveiling the World of Web App Development.pptx
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
 
Sourabh ui
Sourabh uiSourabh ui
Sourabh ui
 
Sourabh ui
Sourabh uiSourabh ui
Sourabh ui
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Design
 
A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio
 
HueyLe-Resume2015
HueyLe-Resume2015HueyLe-Resume2015
HueyLe-Resume2015
 
Responsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllResponsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits All
 
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-022230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
 
Resume
ResumeResume
Resume
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Responsive design SharePoint
Responsive design SharePointResponsive design SharePoint
Responsive design SharePoint
 
Vatsal_Resume
Vatsal_ResumeVatsal_Resume
Vatsal_Resume
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
 

Recently uploaded

一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单
一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单
一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单
ehbuaw
 
2024: The FAR - Federal Acquisition Regulations, Part 36
2024: The FAR - Federal Acquisition Regulations, Part 362024: The FAR - Federal Acquisition Regulations, Part 36
2024: The FAR - Federal Acquisition Regulations, Part 36
JSchaus & Associates
 
PPT Item # 8 - Tuxedo Columbine 3way Stop
PPT Item # 8 - Tuxedo Columbine 3way StopPPT Item # 8 - Tuxedo Columbine 3way Stop
PPT Item # 8 - Tuxedo Columbine 3way Stop
ahcitycouncil
 
Opinions on EVs: Metro Atlanta Speaks 2023
Opinions on EVs: Metro Atlanta Speaks 2023Opinions on EVs: Metro Atlanta Speaks 2023
Opinions on EVs: Metro Atlanta Speaks 2023
ARCResearch
 
NHAI_Under_Implementation_01-05-2024.pdf
NHAI_Under_Implementation_01-05-2024.pdfNHAI_Under_Implementation_01-05-2024.pdf
NHAI_Under_Implementation_01-05-2024.pdf
AjayVejendla3
 
Get Government Grants and Assistance Program
Get Government Grants and Assistance ProgramGet Government Grants and Assistance Program
Get Government Grants and Assistance Program
Get Government Grants
 
一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单
一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单
一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单
ehbuaw
 
PPT Item # 6 - 7001 Broadway ARB Case # 933F
PPT Item # 6 - 7001 Broadway ARB Case # 933FPPT Item # 6 - 7001 Broadway ARB Case # 933F
PPT Item # 6 - 7001 Broadway ARB Case # 933F
ahcitycouncil
 
Russian anarchist and anti-war movement in the third year of full-scale war
Russian anarchist and anti-war movement in the third year of full-scale warRussian anarchist and anti-war movement in the third year of full-scale war
Russian anarchist and anti-war movement in the third year of full-scale war
Antti Rautiainen
 
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单
ukyewh
 
PPT Item # 5 - 5330 Broadway ARB Case # 930F
PPT Item # 5 - 5330 Broadway ARB Case # 930FPPT Item # 5 - 5330 Broadway ARB Case # 930F
PPT Item # 5 - 5330 Broadway ARB Case # 930F
ahcitycouncil
 
快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样
快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样
快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样
850fcj96
 
What is the point of small housing associations.pptx
What is the point of small housing associations.pptxWhat is the point of small housing associations.pptx
What is the point of small housing associations.pptx
Paul Smith
 
MHM Roundtable Slide Deck WHA Side-event May 28 2024.pptx
MHM Roundtable Slide Deck WHA Side-event May 28 2024.pptxMHM Roundtable Slide Deck WHA Side-event May 28 2024.pptx
MHM Roundtable Slide Deck WHA Side-event May 28 2024.pptx
ILC- UK
 
The Role of a Process Server in real estate
The Role of a Process Server in real estateThe Role of a Process Server in real estate
The Role of a Process Server in real estate
oklahomajudicialproc1
 
ZGB - The Role of Generative AI in Government transformation.pdf
ZGB - The Role of Generative AI in Government transformation.pdfZGB - The Role of Generative AI in Government transformation.pdf
ZGB - The Role of Generative AI in Government transformation.pdf
Saeed Al Dhaheri
 
PNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdf
PNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdfPNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdf
PNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdf
ClaudioTebaldi2
 
Understanding the Challenges of Street Children
Understanding the Challenges of Street ChildrenUnderstanding the Challenges of Street Children
Understanding the Challenges of Street Children
SERUDS INDIA
 
PPT Item # 7 - BB Inspection Services Agmt
PPT Item # 7 - BB Inspection Services AgmtPPT Item # 7 - BB Inspection Services Agmt
PPT Item # 7 - BB Inspection Services Agmt
ahcitycouncil
 
一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单
一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单
一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单
ehbuaw
 

Recently uploaded (20)

一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单
一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单
一比一原版(UOW毕业证)伍伦贡大学毕业证成绩单
 
2024: The FAR - Federal Acquisition Regulations, Part 36
2024: The FAR - Federal Acquisition Regulations, Part 362024: The FAR - Federal Acquisition Regulations, Part 36
2024: The FAR - Federal Acquisition Regulations, Part 36
 
PPT Item # 8 - Tuxedo Columbine 3way Stop
PPT Item # 8 - Tuxedo Columbine 3way StopPPT Item # 8 - Tuxedo Columbine 3way Stop
PPT Item # 8 - Tuxedo Columbine 3way Stop
 
Opinions on EVs: Metro Atlanta Speaks 2023
Opinions on EVs: Metro Atlanta Speaks 2023Opinions on EVs: Metro Atlanta Speaks 2023
Opinions on EVs: Metro Atlanta Speaks 2023
 
NHAI_Under_Implementation_01-05-2024.pdf
NHAI_Under_Implementation_01-05-2024.pdfNHAI_Under_Implementation_01-05-2024.pdf
NHAI_Under_Implementation_01-05-2024.pdf
 
Get Government Grants and Assistance Program
Get Government Grants and Assistance ProgramGet Government Grants and Assistance Program
Get Government Grants and Assistance Program
 
一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单
一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单
一比一原版(Adelaide毕业证)阿德莱德大学毕业证成绩单
 
PPT Item # 6 - 7001 Broadway ARB Case # 933F
PPT Item # 6 - 7001 Broadway ARB Case # 933FPPT Item # 6 - 7001 Broadway ARB Case # 933F
PPT Item # 6 - 7001 Broadway ARB Case # 933F
 
Russian anarchist and anti-war movement in the third year of full-scale war
Russian anarchist and anti-war movement in the third year of full-scale warRussian anarchist and anti-war movement in the third year of full-scale war
Russian anarchist and anti-war movement in the third year of full-scale war
 
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单
一比一原版(QUT毕业证)昆士兰科技大学毕业证成绩单
 
PPT Item # 5 - 5330 Broadway ARB Case # 930F
PPT Item # 5 - 5330 Broadway ARB Case # 930FPPT Item # 5 - 5330 Broadway ARB Case # 930F
PPT Item # 5 - 5330 Broadway ARB Case # 930F
 
快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样
快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样
快速制作(ocad毕业证书)加拿大安大略艺术设计学院毕业证本科学历雅思成绩单原版一模一样
 
What is the point of small housing associations.pptx
What is the point of small housing associations.pptxWhat is the point of small housing associations.pptx
What is the point of small housing associations.pptx
 
MHM Roundtable Slide Deck WHA Side-event May 28 2024.pptx
MHM Roundtable Slide Deck WHA Side-event May 28 2024.pptxMHM Roundtable Slide Deck WHA Side-event May 28 2024.pptx
MHM Roundtable Slide Deck WHA Side-event May 28 2024.pptx
 
The Role of a Process Server in real estate
The Role of a Process Server in real estateThe Role of a Process Server in real estate
The Role of a Process Server in real estate
 
ZGB - The Role of Generative AI in Government transformation.pdf
ZGB - The Role of Generative AI in Government transformation.pdfZGB - The Role of Generative AI in Government transformation.pdf
ZGB - The Role of Generative AI in Government transformation.pdf
 
PNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdf
PNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdfPNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdf
PNRR MADRID GREENTECH FOR BROWN NETWORKS NETWORKS MUR_MUSA_TEBALDI.pdf
 
Understanding the Challenges of Street Children
Understanding the Challenges of Street ChildrenUnderstanding the Challenges of Street Children
Understanding the Challenges of Street Children
 
PPT Item # 7 - BB Inspection Services Agmt
PPT Item # 7 - BB Inspection Services AgmtPPT Item # 7 - BB Inspection Services Agmt
PPT Item # 7 - BB Inspection Services Agmt
 
一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单
一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单
一比一原版(ANU毕业证)澳大利亚国立大学毕业证成绩单
 

Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)

Editor's Notes

  1. Going Responsive: Making Your Desktop Site Mobile– A City of Vancouver Case Study, presented by Tadhg Healy, Web Operations Manager for the City of Vancouver.
  2. “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. “ - Smashing Magazine
  3. Thedigital strategy was approved by mayor and council in 2013. It had four pillars of activity, and mobile was called out specifically. The digital strategy allowed for the creation of a center of excellence ‘Digital Services Organisation’ -- a strategic future proofing decision to go with responsive design rather than just ticking a box. The organizational environment created allowed the project to succeed: the mandate came from the senior political level and was endorsed by senior management.
  4. The City launched its new website in 2012. It was a large undertaking spanning 2.5 years, which served to highlight the slow pace of government vs the fast pace of digital. The project was bureaucratic and had multiple approval points.
  5. Let’s discuss the challenge, the approach, and the outcome.
  6. CHALLENGE:Large number/range of stakeholders, and knowledge of responsive was varied. >>>APPROACH:Socialise concept often and early – formal and informal channels.Identify champions within stakeholder groups and give them sneak previews. Downplay level of impact to functional performance of applications.Focus on benefits.Single source for content.Cross device compatibility. >>> OUTCOME: Champions voiced support of responsive approach during high level steering meetings. Increased confidence in approach amongst internal technical stakeholders.
  7. CHALLENGE:Digital strategy published in April 2013. The responsive site needed to be designed, developed, and launched in just 12 weeks!Operations team did not have the capacity to take on a major project.Not all required skill sets were represented in-house as we were still in hiring mode.Needed to go to an external agency.However, team still wanted to shape and influence the project, and it was imperative that we owned the outcome. >>> APPROACH:Used collaborative tools to work in partnership with the agency.Developed clear lines of communication.Took an active role in making recommendations and improvements based on our own knowledge of the site. Course-corrected where necessary. >>> OUTCOME: Responsive site reflects our extensive knowledge of user goals and objectives.Comprehensive knowledge transfer to internal team.Project was completed on time and budget
  8. CHALLENGE: Broad persona range.Where to focus testing efforts? Time / Resource availability. >>> APPROACH:Individual user testing: 1 hour sessions. Initial focus on navigation interaction design.High volume tasks.Incentives and follow up. >>> OUTCOME:Critical part of the proposal/project.Informed front end / back end decisions during technical development.Identified other areas that we need to work on ... specifically IA overhaul.
  9. CHALLENGE: The desktop site was not developed with an eye to future conversion to mobile.Hundreds of large documents, significant chunks of text on each page, lots of unrelated items in the right rail, etc., presented barriers to a good mobile experience. >>> OUTCOME: Web pages become more useful for mobile visitors – particularly for transactions and wayfinding. Content remains consistent between desktop and mobile site.Content strategists now thinking mobile first.
  10. CHALLENGE: Digital strategy published in April 2013.Procurement cycle – delay. The responsive site needed to be designed, developed, and launched in just 12 weeks! >>> APPROACH:Audited entire site at the page level.Triaged all content: must fix, nice to fix, can wait.Focused team on addressing all of the “must fix” pages by launch.>>> OUTCOME: Able to launch an MVP within the tight timelines.100% of the pages in the site were fully functional at launch. We continue to address the ‘nice to fix’ issues as time permits.
  11. CHALLENGE: The desktop site was not developed with an eye to future conversion to mobile.Hundreds of large documents, significant chunks of text on each page, lots of unrelated items in the right rail, etc., presented barriers to a good mobile experience >>> APPROACH: Mobile content strategy: Which elements on this page will be most relevant to mobile users?Developed “folding,” which allows certain page elements to take a higher/lower position on the mobile page. Same content - continuity of experience.>>> OUTCOME: Web pages become more useful for mobile visitors – particularly for transactions and wayfinding.Content remains consistent between desktop and mobile site. Content strategists now thinking mobile first.
  12. CHALLENGE:The desktop site was not developed with an eye to future conversion to mobile.Hundreds of large documents, significant chunks of text on each page, lots of unrelated items in the right rail, etc., presented barriers to a good mobile experience. >>> APPROACH: Mobile content strategy: Which elements on this page will be most relevant to mobile users?.Developed “folding,” which allows certain page elements to take a higher/lower position on the mobile page. >>> OUTCOME: Web pages become more useful for mobile visitors – particularly for transactions and wayfinding.Content remains consistent between desktop and mobile site.Content strategists now thinking mobile first.
  13. CHALLENGE: Many strategies used to display complex information on the desktop were not mobile friendly. >>> Tables became truncated, tabs didn’t open, etc. >>> OUTCOME: Content elements change form depending on resolution allowing for better user experience.
  14. APPROACH: Worked with D7 to design and test alternate solutions that would present differently depending on the visitor’s screen resolution.
  15. APPROACH: Worked with D7 to design and test alternate solutions that would present differently depending on the visitor’s screen resolution.
  16. APPROACH: Worked with D7 to design and test alternate solutions that would present differently depending on the visitor’s screen resolution.
  17. CHALLENGE:Complex IA. 9 levels deep, 8 primary buckets,48 secondary buckets,254 tertiary buckets= 310 menu links in mega nav alone! >>> OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
  18. OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
  19. OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
  20. OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
  21. OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
  22. OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
  23. CHALLENGE: Folding not possible until fully deployed because changes to back end controls were the same.Changing a live site.Publishing system vs DB driven.Template changes don’t apply immediately.Not able to test live end to end. We hadn’t done this before! >>> APPROACH: Phased approach with checkpoints and fully tested rollback. Reviewed on staging. Decoupled navigation from templates and applications. 10 leaf pages, individual buckets, homepage last.Standby support from partners (D7 and OT).Dry runs in devprojects. >>> OUTCOME.Smooth launch.Low stress levels because of rollback option.High level of confidence amongst team and with partners
  24. CHALLENGE: Life goes on – competing priorities.Out of scope items – web applications.Continued adherence to mobile content strategy.Implications of being responsive. >>>APPROACH: Reduced focus on native applications.All integrated web applications soon to be responsive.Embedding 3rd party apps becomes more challenging – scrolling within scrolling.iFramesbecome more of an issue.Focus on high traffic existing applications.Content strategists now use responsive site.Allow people to give us feedback. >>> OUTCOME:Reduced focus on native applications.All integrated web applications soon to be responsive. Embedding 3rd party apps becomes more challenging – scrolling within scrolling.iFramesbecome more of an issue
  25. Top five takeaways. 1 - Beware of going into the area of diminishing returns…it’s OK to let go. 2 - Don’t be afraid to question the ‘experts’…if it seems weird it probably is. Relationship-trust is tantamount to success. Both partners need to be open and transparent. 3 - Ensure you can do rapid prototyping (even on a subset of your content – HTML + JSON - fake backend), test and then iterate. 4. Use what you have – focus on MVP as early as possible! 5.CoV mobile traffic increased from 22% in early 2012 to 32% in December (launch).
  26. Thank you to all our partners involved in this project!