CCCB.org web redesign.
CCCB.org is the digital extension of the Center for Contemporary Culture of Barcelona. The redesign aimed to transform a complex, information-heavy website into a clear and concept-driven platform. The process focused on reorganizing content, refining navigation, and enhancing the storytelling of the Center’s exhibitions and activities.
Project
Client: CCCB.org
Duration: 1 year
Date: 2021-2022
Role: UX/UI Designer y Scrum master
Software: Figma
Goals
After several meetings and collaborative sessions with the client, we identified two key challenges that shaped the direction of the redesign:
Users had difficulty finding information about activities.
The site’s structure and complexity did not effectively highlight the Center’s main themes and narratives.
These insights guided the project’s main objectives:
Reorganize and structure the activity information under conceptual umbrellas to create a more coherent and meaningful navigation experience.
Synthesize and present concise information within activity and article summaries, improving readability and engagement.
Centralize all video and publication content to keep users within the platform and enhance content discoverability.
Usability Analysis
For the usability study of the CCCB website, five use cases were defined as the basis for the evaluation using Jakob Nielsen’s 10 usability heuristics.
The results confirmed:
A lack of consistency across the different sections of the website.
Users constantly rely on memory to locate information.
Some sections present a high cognitive load.
Results of Heuristic Evaluations to determine priorities
Accessibility Analysis
The accessibility analysis revealed that the portal did not comply with European regulations. The most affected group was users with audiovisual impairments, followed by elderly users.
The decision was made to address the issue from a strategic perspective, as accessibility enhances search engine optimization (SEO) and provides a competitive advantage.
User evaluation
Nine moderated user tests were conducted remotely on the desktop version to validate the findings from the usability analysis.
The tests involved performing information search tasks, along with a qualitative survey and a satisfaction survey (SUS).
In addition to uncovering new insights, the results reinforced the previously identified issues:
search difficulties, poor hierarchy, navigation problems, and excessive content.
Product Conceptualization
A benchmarking analysis was conducted to identify the strengths and weaknesses of both direct and indirect competitors.
To better understand our audience and how they interact with the product, three User Personas were defined — each with a real scenario, Journey Map, and User Story.
A closed Card Sorting exercise was carried out with new users to validate whether the nomenclature and conceptual groupings were appropriate.
Based on the results, a new architecture proposal was defined.
User Interface Design
Using all gathered insights, we began defining the final solution. The process started with paper sketches and iterative refinements until reaching low-fidelity wireframes.
Next, a style guide and component system were established, followed by the creation of a high-fidelity interactive prototype.
Final solution delivered
The prototype was developed using Figma, and a comprehensive style guide and component library were defined to support its creation and ensure consistency in future developments. It was designed and optimized for both mobile and desktop experiences to ensure a seamless and responsive interface.
Some of the most significant changes included:
Unified navigation across the entire website.
Implementation of a search function and filters to enhance information retrieval.
Use of sections and dropdowns to hide contextually irrelevant information.
Dedicated areas that allow the client to highlight key content.
Creation of a new “Articles and Publications” section.
