Founded in 1898, Mary Immaculate College (MIC) is a University level College of Education and the Liberal Arts, based in Limerick City Ireland. The College has a student population of over 5,000 enrolled in undergraduate programmes, and a range of postgraduate programmes at Diploma, MA and PhD level. MIC is currently undergoing one of the biggest phases of growth and development in its history, with the overall student population witnessing a tenfold increase since 1992. This expansion has brought with it a significant broadening of MIC’s academic provision, as well as a re-development of the campus which now offers teaching, learning and research facilities as well as events and conferencing facilities. MIC engaged Piquant to design and create a flexible website for a growing and changing institution.
What we did:
- Website Design & Development
- Information Architecture
- UX / UI Design
- Drupal Development
INFORMATION ARCHITECTURE —This project was a complete new build, which facilitated a new information architecture and strategy. We started off by researching the possible requirements of a contemporary, growing educational institution. We worked with the MIC team to carry out a requirement audit for the institution. We conducted a competitor and industry analysis, documenting and listing challenges and international best practice in the area of educational websites. We then created a series of website user personas to identify requirements for various user groups. We used these personas to test and define website information journeys on various iterations of the information architecture plans.
The vast size of the project and the number of department stakeholders within the college meant it was important to have a level of flexibility in how the information architecture would play out over the development of the project. We divided the wider information architecture into key sections that could be signed-off and delivered independently, but would have the ability to integrate into the wider overarching system. This process of iterative and incremental strategy planning and development benefited the final product, as emerging challenges and solutions were incorporated into later iterations of the website.
WEBSITE DESIGN & DEVELOPMENT — In designing the website, our goal was to create a rich and intuitive user experience platform for engaging prospective students, current students, academic staff and other interested stakeholders. Editorial page designs were created to provide the user with an accessible overview of life at MIC. We also developed a dynamic platform that allows for easy publishing of long and short form news and blog content specific to departments or areas of study.
It was important that course and campus information was accessible, digestible and comparable. It was also important that rolling dynamic news and blog content could be shared and cross-linked throughout the website depending on editorial and contextual relevance.
Following on from our previous brand iteration for MIC, we developed a hierarchical style guide for website content consisting of headings, typography, colour and module style sheets. We also created a photography procurement guideline document to iterate how the brand message could be delivered consistently through website imagery.
ATOMIC DESIGN & MODULE PAGE STRUCTURES — We designed a series of key content type page designs to test and define a layout system of typographic, colour, image and content layout hierarchies. Once these key pages were agreed and signed off from design, user interface and user experience perspective we deconstructed them into a matrix of deployable atomic modules or page sections that can be used across the website in multiple variations. This process of atomic module design and page building allows the MIC webmaster to deploy a large variety of functionalities and layouts within a single page without significant expertise.
This functionality offers a wide range of flexibility to the client in delivering creative content layouts with uniformity in structure and overarching styles. The atomic design process also allows for efficient site-wide deployment of new functionality that can be developed incrementally as requirements arise.
DRUPAL CMS MULTI-SITE FUNCTIONALITY — We used Drupal as the content management system. Drupal is an open source, scalable and flexible platform capable of handling very large amounts of content and hundreds of individual contributors. It can be configured to meet the needs of an entire institution, while also providing individual control to faculties and departments. MIC has many entities and sites such as departments, schools, colleges, research schools, etc. We developed Drupal to handle multiple sites and their tasks while allowing individual departments and members to have control. Drupal is an ideal platform for large organisational web projects that are likely to expand.
We provided Drupal training and documentation for MIC webmaster staff, to control, deploy and administer new website pages and sections as needed. The centralised information architecture, atomic design system templates and the clarity in design styles allow MIC webmaster staff to deploy web functionality effortlessly while ensuring consistency across the entire institution.
RE-DEPLOYABLE EVENT WEBSITE – As part of the website development, we also created a re-deployable flexible conference and event website. This conference/event website facilitates the efficient and inexpensive roll out of a comprehensive, quality website offering to short-term projects. Control over structure, branding and content can be controlled by the conference/event team or centrally by the MIC webmaster.
FORM COLLECTION AND PAYMENT FUNCTIONALITY — We developed a centralised data form collection system that allows for conference submissions, exam fee collection and course subscription through the Realex payment gateway. We also created a dynamic staff directory that gives each staff member control over their profile on the centralised system.
DEPLOYMENT— Working with the MIC IT team, the website was extensively tested and refined before successful deployment. Drupal allows for version control which facilitates stage deployments and updates without site interruption.
