Designing a scalable website kit for Aix-Marseille University's interdisciplinary institutes
A website kit designed for Aix-Marseille University's 21 interdisciplinary institutes: page templates, a shared component library and clear usage rules, giving every institute a modern, consistent website aligned with the university's new brand guidelines. The kit now powers institute websites such as ARKAIA and ICI.
The Challenge
Aix-Marseille University brings together 21 interdisciplinary institutes, each connecting research, training and partners around a strategic theme. Over the years, every institute had built its own website independently, resulting in dated interfaces, complex navigation and content organised differently from one site to another.
As the university introduced a new visual identity, the goal was not to redesign one website, but to design a shared kit that every institute could use to build its own.
Project goals:
- Modernise the institutes' websites in line with the new brand guidelines
- Simplify navigation and access to key information
- Address three audiences: researchers and staff, master's and PhD students, and partners
- Ensure consistency across the entire institute network
- Create a scalable foundation compatible with Drupal
The core challenge was to give each institute enough flexibility to present its own activity, without recreating the fragmentation the project was meant to solve.
My Approach
Designing a template is fundamentally different from designing a website: every decision has to work for institutes with different disciplines, content and needs. I approached the project as a system rather than a set of pages.
1. Research & Benchmark
I analysed the websites of comparable research and higher education institutions, including Institut Polytechnique de Paris, which faces a similar challenge: presenting several member schools under one shared identity.
Key insights:
- Dedicated entry points per audience shorten the path to relevant content
- Key figures quickly communicate the scale and activity of an institution
- A shared structure across entities makes content easier to navigate and maintain
- Too much freedom given to content editors quickly erodes visual consistency
That last point became the guiding principle of the project.
2. Information Architecture & Page Templates
Instead of designing pages one by one, I defined the page templates every institute would need to present its activity.
Page templates:
- Home
- About the institute
- Research axes
- Training
- Partnerships
- Calls for projects
- Laureates
- News
- Contact
This shared architecture gave every institute the same clear structure, while leaving room for its own content.
3. A Component Library With Clear Rules
The main risk of a template is giving each institute too much freedom when building its site, which leads back to inconsistent, hard-to-maintain websites. To prevent this, the component library was designed first, then each page template was restricted to a specific set of components.
System rules:
- A shared library of nearly 30 components
- Each page template allows only the components relevant to its purpose
- Institutes can compose and customise their pages within that selection
- Colours follow the brand guidelines, with a single accent colour chosen from the official palette
- Each institute's identity comes from its logo, photography and content
This “freedom within a framework” approach gave institutes real ownership of their pages while guaranteeing consistency across the network.
4. Wireframes & UI Design
Wireframes defined the structure and user journey of each page template, and were reviewed and validated with the pilot institute before moving to UI design.
Design principles:
- Clear navigation and content hierarchy on every template
- Audience entry points for researchers, students and partners
- Strict application of the new brand colours and typography
- Responsive layouts designed for desktop and mobile
(Wireframes of the Homepage (top), Research (left) and Training (right) pages.)
The UI then brought the new university identity to life, giving the whole network a modern and coherent look.
5. Stakeholder Alignment & Drupal Constraints
Throughout the project, I worked closely with the project manager, the Drupal developers, a pilot institute acting as the client, and a communication officer responsible for the future content of the sites.
Key considerations:
- Components had to map to reusable Drupal blocks
- Page rules had to be enforceable within the CMS
- Content had to remain easy to manage for non-technical editors
- The kit had to accommodate content inherited from very different legacy sites
This collaboration kept the kit realistic to build, deploy and maintain across institutes.
Prototype & Testing
An interactive prototype linking the key page templates was used to present the user journeys and gather feedback from stakeholders.
The kit was then extensively tested with the pilot institute during development, helping to identify and fix issues before rollout to other institutes.
Outcome
The kit gave Aix-Marseille University a common foundation for its interdisciplinary institutes: a modern, consistent website system, aligned with the new brand guidelines and flexible enough for each institute to present its own activity. It now powers institute websites such as ARKAIA and ICI.
Key improvements
- Consistent visual identity across the institute network
- Clear entry points for researchers, students and partners
- Nine page templates covering every key need
- A library of nearly 30 reusable components
- Clear rules balancing flexibility and consistency
- A scalable foundation for new institutes
1 / 8
Key Learnings
This project taught me to think in systems rather than screens. Designing a kit means anticipating needs that cannot all be known in advance — and deciding not only what the system offers, but also what it deliberately prevents.
Restricting each page template to a defined set of components was a key decision: in a multi-site context, well-designed constraints are what make freedom sustainable.
It also reinforced the importance of designing with the people who will implement and use the system. A component library is only valuable if developers can build it and editors can use it confidently.