The University of Sunderland & Roundhouse Digital outline the best approach for collaborative working between universities and agencies. Using the new University of Sunderland in London Microsite as a case-study they will showcase the innovative developments that resulted out of working in partnership and the tools and processes involved in multi-team production. Click here to view the video of this presentation on YouTube: http://bit.ly/15ODFN9

1. Collaborative Working
University of Sunderland and Roundhouse Digital
19 November 2014

2. 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

3. 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)*

4. 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

5. 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

6. How we work together – design

7. Who was involved
Uos Marketing Team
What customers want
What are the key messages
What are the business requirements
Roundhouse Digital
Design and brand development
Consultancy and innovation
Front end design and delivery
Atlassian Tools
Confluence
Bit Bucket
Jira
UoS Web Team
Code integration
CMS development
Make it work!

8. Working with the Web Team

9. 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.

10. How we collaborated – the tools

11. How we collaborated – the tools

12. What we did – alternate formats

13. 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

14. 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

15. 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

16. 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/
•

17. Security – vulnerability scanning

18. 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

19. 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