Lucía Gómez

Summary

Complete redesign of one of the main Spain’s public universities website. Close collaboration with stakeholders and focus on the different users that access to it on a daily basis was key for the project success. We designed a new fully responsive visual based on the brand they had just launched.

Context

Universidad Autónoma de Madrid (UAM) is one of the largest public universities in Spain. In 2023 there were more than 30K students in some of the 248 programs they offered.

The website, that receives more than 15K views a day, hadn’t evolved since its creation and it had became a real problem. You can check and play with the old version here ↗

The main issues were:

• Navigation was complex and content was not easy to find, nor user-segmented. Also the search didn’t work. When analyzing the site we realized that the architecture mapped the university’s internal organization into departments and offices.
• There was no mobile design. Even without it, traffic was high (38% of the total). But the mobile was version was so unusable that the bounce rate was around 80%.
• Content was not always clear and there were a lot of small pages about the same topics created and maintained by different departments, sometimes with old or contradictory information.

Project goals

• Build a new site focusing on content and hierarchy.
• Build a system that allows the UAM team to add more pages and sections after the project to evolve the site based in new needs
• Update the visual design with the new UAM Brand and give the site a modern look
• Design for desktop (57%) and mobile devices (38%)

Key insights from research

We mapped the users and sorted them into two groups based on wether they have a relation with the university or not: internal (students, teachers and employees) and external (future students or researchers, foreign students, companies).

We detected a strong use difference between these two types; they need a complete different approach and narrative. This had a huge impact both on the information architecture and the navigation.

New information architecture

The architecture mapped the university’s internal organization into departments and offices. It was easier for them because each department owned a few pages to maintain and update, but it was a huge problem because users don’t know about who is in charge of a process or information so they didn’t know where to find it. The information architecture and navigation didn’t map users’ mental model.

The first and big division of all the content was oriented to users: internal (and for who) or external. Then we created categories and subcategories for external users and sorted by profile for internals.

We also realized that in addition to create a new IA, we needed to create some rules with the web team, to make sure it would escalate to new content in the future.

Design

At the moment of the project and coinciding with the 50th anniversary, the university had just redesigned the brand, changing icon and colors. After so many years with an iconic brand (designed by Alberto Corazón) it was difficult for the whole university to get used to a new identity, and the web was key to help spreading the new brand, both to the world and internally in the university.

We started by designing a new navigation with double purpose: give the external users a menu with categories and subcategories to explore the content, and grant quick access to internal profiles to pages with specific information for them.

In the design phase we worked in some initiatives. The most relevante were:

• New pages structure based on progressive disclosure: We divided the content into smaller pages with a sole purpose, avoiding duplicated content, easing its maintenance, and allowing the user to discover more detailed information when needed.
• Visual design: We created a new fully responsive web with new blocks to give more relevance to images and order the content in an easier way to consume it.
• Content redesign: Texts needed to be shorter and in a less academic tone, especially the ones that explains processes and documentation requirements. For example, students complained a lot during the research phase about the complexity in understanding what to do, when and where.
• Increase and update the media content: Videos are powerful and easy to consume when the user is exploring the university (specially future students or researchers). We worked with the team in charge of them to establish some guidelines to align media content with the rest of the web.

Making it scalable

One of the most important things in this project was to assure its continuity and scalability. The UAM’s digital ecosystem is not only the web, but smaller sites for each of the faculties, research groups, even some offices and departments have their own. Their idea with the project was to start a change across all webs, making them more modern and consistent.

We created a design system, documented it and helped UAM’s web team to learn how to use it, to implement in their tool, create all the pages in the web and new ones in the future.

We also tested how the system could be adapted for the rest of the webs and it would be necessary some work to check information architecture, ensure color palettes were accesible and so on, but some tests with the design system were a good start point for them to see its possibilities.

Check the design system and documentation ↗

Key learnings

The most important one was the importance to look beyond the digital product and get the full context, history, processes and organization to understand the decisions that have been taken. In their own words, the web had get out of hand, so we worked close to identify why and make sure it wouldn’t happen again in the future.

Knowing where they were and how they had reached that point eased a lot with the communication during the whole process and we saw clearly that having empathy is not only important with users but also with stakeholders and companies.

And finally, this project was a really good prioritization exercise. There was so much work to do that it was difficult to focus and identify the main problems to solve. Aligned and commit with stakeholders and engineering was key for the project success.