VicRoads website case study: Bigger, better and responsive

Interested in responsive design? This deck was presented at UX Australia 2014. Richard and Jolanda share their key insights in redesigning one of the most highly trafficked Victorian Government websites into a smart, engaging experience. Learn about the challenges of responsive design for large websites and how they resolved them. The VicRoads website went live one week before the conference.

Transcript

1. VicRoads case study Bigger, better and responsive Richard Perdriau UX Manager, Deloitte Digital Jolanda Zerbst Web Services Manager, VicRoads @zerbstj
2. VicRoads manages over 22,000 kilometres of roads, 3133 bridges and processes more than 22 million transactions each year for 3.7 million licensed drivers and 4.9 million registered vehicles.
3. The Project • Implementation of a new CMS • User-centred IA • The new website to be usable on any device Redesign and development of the VicRoads website
4. The Project Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Research Design Build Test Content Migration Go live 2013 2014 Fourteen month timeline
5. Percentage of users viewing the VicRoads website on mobile devices The trend towards mobile usage 2010 2012 2014 4% 15% 40%
6. 2012 and 2013 marked a big shift towards mobile responsive The decision to go responsive • More succinct, user-centred content • Don't have to manage two sites • More consistent experience across devices Benefits Responsive vs mobile
7. • User workshops • Card sorting • Stakeholder workshops & interviews Desktop research • Competitor analysis • Existing research • Website usage statistics Generative research Research
8. Research A survey was used to understand the preferred channels for a range of tasks across different user groups Channel survey
9. Research • Most users preferred the online channel • Most users expected to be able to complete most activities on different devices • Users became more task focussed on mobile Key take outs
10. Conceptual design • Collaborative design sessions included the UX design team, visual designer, front end developer, technical architect and content writer • Mobile and Desktop always designed together • Rapid iterations on whiteboard Collaborative design
11. Conceptual design • Whiteboard designs evolved into paper prototyping • Content written during design sessions. Refining the designs
12. Conceptual design • Collaborate with the whole project team early, particularly the FEDs! • The importance of lean content. Key take outs
13. The importance of lean content for mobile • VicRoads had not initially planned or budgeted for rewriting content • Initial resistance from content owners to condense information • Socialising an example of a page rewritten as “mobile first” got stakeholders on board to provide resources for rewriting content. • Content was rewritten to be task focused, action orientated, and in plain English for mobile delivery. Rewriting content
14. Responsive design patterns Header Navigation Content Sidebar Footer Header Navigation Content Sidebar Footer Optimising the web page for the device it is being viewed on
15. Responsive design patterns Optimising the web page for the device it is being viewed on
16. • Home page https://www.vicroads.vic.gov.au/ • Navigation and breadcrumb https://www.vicroads.vic.gov.au/safety-and-road-rules/vehicle-safety/child-restraints • Tabs to Accordians https://www.vicroads.vic.gov.au/about-vicroads/how-we-use-social-media • Scrollable table https://www.vicroads.vic.gov.au/registration/registration-fees/heavy-vehicle-fees • Stackable table https://www.vicroads.vic.gov.au/licences/your-ls/get-your-ls/lpt (table is on the results page for the test) • Stacking right column above middle column https://www.vicroads.vic.gov.au/publications-and-forms The responsive design patterns that were demonstrated during this part of the presentation were: Responsive design patterns
17. • Wireframes of desktop and mobile but not tablet • Decisions on tablet breakpoints were made during the build The functional specification Detailed design
18. Summary • Don’t under estimate content rewriting • Keep the client on the journey • Collaborate with your development team throughout the entire project Key take outs
19. Design responsively!!!