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
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Percentage of users viewing the VicRoads
   website on mobile devices
   The trend towards mobile usage
   2010 2012 2014
   4%
   15%
   40%
   

   View Slide

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
   

   View Slide

7. • User workshops
   • Card sorting
   • Stakeholder workshops & interviews
   Desktop research
   • Competitor analysis
   • Existing research
   • Website usage statistics
   Generative research
   Research
   

   View Slide

8. Research
   A survey was used to understand the preferred channels for a range of tasks
   across different user groups
   Channel survey
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. Conceptual design
    • Whiteboard designs evolved
    into paper prototyping
    • Content written during design
    sessions.
    Refining the designs
    

    View Slide

12. Conceptual design
    • Collaborate with the whole
    project team early,
    particularly the FEDs!
    • The importance of lean
    content.
    Key take outs
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. Responsive design patterns
    Optimising the web page for the device it is being viewed on
    

    View Slide

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
    

    View Slide

17. • Wireframes of desktop and mobile but not
    tablet
    • Decisions on tablet breakpoints were made
    during the build
    The functional specification
    Detailed design
    

    View Slide

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
    

    View Slide

19. Design responsively!!!
    

    View Slide

20. View Slide