London South Bank University

Intranet design and front end development

London South Bank University wanted to redesign and redevelop their intranet to make it cleaner, less cluttered and more modern. LSBU's aim with the new intranet is to help colleagues easily find the information they need and help them carry out their work. Cameron & Wilding helped design and theme the new intranet, which now enables colleagues to collaborate with one another and external partners much more quickly and easily.

Challenge

The aim was to deliver a simple, fast, social and intelligent intranet platform in cooperation with the LSBU development team to enable greater staff engagement with the organisation and optimise internal staff communication and collaboration.

LSBU wanted to give the new intranet a clean, simple, but visually appealing layout. It needed to be fully responsive and adhere to the LSBU brand guidelines.

The project budget and timelines were very tight so we had to make sure we made quick decisions and minimise unnecessary feedback loops in order to be as effective as possible. That approach kept the project on track in terms of time, scope and budget.

Solution

We started the project with a UX workshop where all the stakeholders, team members and decision-makers were invited. We mapped out the project goals, business requirements and target audiences. We also developed a design matrix with the desired look and feel of the future intranet, which enabled us to create wireframes and designs with improved user experience in a time and cost efficient way.

When the project started, the back end technologies and approach hadn’t been finalised by the internal LSBU development team so it was important that we were able to develop the theme independently, whilst keeping each other informed of the solutions and progress. We had to make sure the teams were working towards the same goals despite being distributed.

We took a component driven approach to design and theming, following the principles of atomic design, which meant creating small, very reusable components that could be built into larger structures. Once we had a design in place, we began to build a ‘living styleguide’ - an HTML and CSS prototype of the intranet, displaying responsiveness and any necessary Javascript. We opted for a tool called Patternlab, that was built with atomic design in mind, which is able to drill down and display individual components (for example, it could display a single component such as a search box). This means easier inspection of the required markup, which makes the integration with the back end easier. An added benefit of this was that the components can quickly and easily be reassembled in new templates, allowing very rapid prototyping of new functionality and layouts in future.


We introduced a fully Agile workflow with LSBU, which they had never implemented before.  This involved getting the stakeholders committed and aligning Agile methodologies with institutional decision making processes to make the project delivery smooth and predictable.

Read our technical blog post about LSBU styleguide-driven development.

Key Benefits

We have delivered a fresh and engaging design with a fully responsive theme, built with reusable components that are easy to integrate by the LSBU internal development team. The key benefits are:

  • A modern, clean design that follows LSBU guidelines and provides better user experience

  • An easy to integrate theme with reusable components

  • A rapid prototyping tool

  • Cost and time efficient project delivery following agile methodologies

  • Accessibility meets WCAG 2.0 standards

Services Provided

 
Agile Methodology & Project Delivery
 
Website Design
 
Strategy & Consultancy