Collaborative Working: University of Sunderland & Roundhouse Digital

Collaborative WorkingUniversity of Sunderland and Roundhouse Digital19 November 2014

Introduction• Roundhouse Digital

– Part of The Roundhouse, a branding and design communications company formed 19 years ago

– Wealth of experience in HE sector – rebrands, prospectuses, annual reports etc.

– Roundhouse Digital can focus both design led technical expertise and consultancy

– Our team includes 12 front-end developers, back-end developers, designers, consultants and account managers

– Currently have a number of active HE projects including several using the T4 platform

• Who we are– Michael Armstrong – Director and lead HE consultant

– Tom Harnasz – Senior Developer (Research and Development)

• What we do– We design and develop innovative and market leading digital products for a range of companies,

organisations and institutions

Introduction• University of Sunderland

– Dean – web development manager, Adil, Scott – web developers (not just code), Daniel – web co-ordinator, Philip – web integration

– Specific job titles becoming irrelevant (within our team)

– integration specialist / co-ordination / cross skilled

• What we do

– TerminalFour (websites / courses)

– My Sunderland (intranet)

– Streaming service

– System integration (VLE / Assetbank, SOLAR)

– Online assignment submissions system* (30 partner colleges)

– WordPress sites

– wwwadmin

– news and events, library services, facilities*

– absence reporting*

– annual leave system*

– Class of 2014*

– OpenAthens

– SSO

– Computer availability*

– Performance

– Analytics

– Search (Funnelback)

– What’s on calendar

– Large file upload service

– Library services

– e:resources*

– Attendance monitoring system*

– Targeted survey season tool*

– JIRA and Confluence (projects)

– Staff development (record and reflect)*

Why we work together• We are busy, outside agencies can help with specific aspects

• Best of breed– Roundhouse Digital Identity, design and technical innovation

– NCC Performance and quality

– TerminalFour Content and features

– Funnelback Search and delivery

– Qualys Security

• Roundhouse Digital can work as a catalyst for change

• Roundhouse Digital bring external thinking and market experience to promote innovation

How we work together – process• Proven processes and live documentation

• Clear understanding of scope of project documented and agreed before start

• Dashboard including– Business requirements

– Technical specification

– Wireframes

• Design process– Style tiles

– Design in browser / prototype

– Explore complex pages deeper

• Iterative ‘sprint’ handover process for build

• In-depth handover documentation– Documentation tool

– Jira

– Confluence

How we work together – design

Who was involved

Uos Marketing TeamWhat customers want

What are the key messagesWhat are the business requirements

Roundhouse DigitalDesign and brand development

Consultancy and innovationFront end design and delivery

UoS Web TeamCode integration

CMS developmentMake it work!

Atlassian ToolsConfluenceBit Bucket

Jira

Working with the Web Team

How we collaborated – the process• 2 week sprints

– What must be done / what won't be done

• Identify a product owner– As the Product Owner you know what is required so it makes sense that you control the features to be

completed and the priority. You define the goal.

• Daily Meetings (web team)– What did you do yesterday?

– What do you intend on doing today?

– What impediments may prevent you from doing this?

• Reviews– Every 2nd Friday before the end of the sprint a review of work that has / has not been completed along

with a demonstration of completed work to both Roundhouse / Product Owner

– At the end of the sprint the web team / Roundhouse conduct a review of work that has / has not been completed along with a demonstration of completed work

– We are open. We share ‘live’ updates online so stakeholders can see progress via JIRA/Confluence/Service desk

The web team work on the concept of a minimal viable product (MVP). Rather than waiting weeks or months to receive the completed project we create a deliverable version during every sprint to test ideas as quickly and cheaply as possible, from this lessons are learned and change expected and is actually welcome.

How we collaborated – the tools

How we collaborated – the tools

What we did – alternate formats

What we did together – Assetbank• Central image repository

– Media library still used primarily as a doc store

• To enable this you must have CMS integration switched on by Assetbank – User clicks the AssetBank icon

– Users selects and image and size

– Image optimised / compressed via tinypng script

– Image is copied to the live server

• 4 files were edited or created on the server– editor_plugin.js

– plugin-config.xml

– en.js

– customise-tiny.js (to add insertImage function)

• Must be re-added after every upgrade

What we did together – Funnelback• Programme search sorted by subject area

• T4 xml output Funnelback to index and deliver the results and php to sort

Subject area listings

What we did together – glossary• Why? Students were all overseas and may not be familiar with common terms of the

University application process– Text file uploaded to the media library with glossary terms

– T4 template ‘is this a glossary page’

– Checkbox

– If ticked - glossary is enabled

– Mixture of simple nav object and JSON

Improving performance• How assets are served up

– Size of images and other content

– Use css through transition which are hardware accelerated on mobile devices

– YouTube savings

– JS / CSS tips

– <3 second rule

– <0.75 second rule

– Minimise objects <36

– Render

– Page size <500kB

– CDN

• Tools (free) – yslow – page speed

– http://www.webpagetest.org/

•

Security – vulnerability scanning

Documentation tool• Developed out of necessity to handover all code to institutions post development

– Large Faculty site – that consists of 23 sites with fully syndicated content

– Custom composer based PHP framework and methodologies

– Create lots of documentation

– 300 Site Manager assets

– Document in meticulous detail

– All to be recorded in Confluence

• To allow universities to maintain and develop on our code we needed an automated solution– Being Engineers (lazy) we decided that could automate the majority

– Developed a• Chrome Plugin

• Rails backend

– Produced an inventory of everything that we developed

– Exported to Confluence

Documentation tool• After the first use of the tool we looked to develop it further for Sunderland

– This just doesn’t need to apply to a handover scenario

– We did this with only just scraping and parsing a DOM.

– Imagine what we could do with access to the data source

– What if this could be a day-to-day tool for TerminalFour developers

• There could be a number of additional benefits– Reducing need for written documentation

– Mitigating the risk of knowledge loss

– Acting as a TerminalFour assistance tool

– Assisting with refactoring and removing unnecessary components

– Helping multiple stakeholders collaborate

– Ensuring that developers can implement faster

• We have plans for the future– Live and Structural Modes

– Differentials in Content Types + Navigation Objects setting

– Versioning + Diffs in Formatters + Layouts

– Detailed reports

– Code reviews