Supporting a redesign with a solid style guide and component library
September ‘24
scope
Secondary research * UI Design * Design system
date
Figma * FigJam * Notion
tools
Desktop * Mobile
device
Arts, Culture, and Entertainment
sector
🤔 picture this…
You’re the Head of Communication and Marketing at Casa da Música - the first building constructed in Portugal exclusively dedicated to music.
Casa da Música was established in 1999 through an international architectural competition, with Rem Koolhaas's Office for Metropolitan Architecture winning the commission.
Your team has identified a problem with the online presence of Casa da Música:
“The website feels out of date and doesn’t reflect the innovative, eclectic and artistic energy of the brand”
Looking for ways to solve this problem, you hire a 26B and their team of designers - that’s where I (and Cíntia) come into the scene.👋
challenge
Redesign the website to bring its visual design up to benchmarking standards and reflect the nature of the brand
goal
Create a minimal and eclectic visual identity that balanced creativity and functionality.
* On this case study I’ll focus on my role of creating and maintaining a component library and style guide. *
💭 understanding the problem
benchmarking and competitor analysis
Casa da Música’s contract documentation provided us with a comprehensive list of websites that they felt reflected the same image they were searching for.
Elbphilharmonie & Laeiszhalle
Southbank Central
New York Philharmonichigh contrast black&white color palette
Philharmonie de Paris
These websites were analysed to understand the common UI patterns and inform our direction in the design process.
research takeaways
La Philbig highlight to images
By analysing these different competitors a few insights we’re gathered that were then used to inform design decisions:
big impactful font
The Carnegie Hallplenty of white space to let the content shine
💡 designing a solution
Style guide
A style guide was designed to implement a consistent identity throughout the website.
Colour styles
A base palette of black and white was chosen. Additionally, some tones of grey were added to soften the contrast and allow the design to communicate more nuanced states like “hover” and “active”. Feedback colours were kept close to true tones to maintain a clean and undisruptive feel to the pages.
The brand already had a strong font used in its graphic communication so it was kept for the website and variants of the same base font were used to relay meaning and hierarchy.
HeadingsIconography
The website's content was the true star of this show ~pun intended~ so only straightforward and standard-use icons were used.
The first section included common components used across UIs like:
buttons;
checkboxes and radio buttons;
inputs and;
pagination among others.
Paragraph
Component library
Documentation
In parallel with the design of the pages, I was responsible for creating and documenting a library of the components used.
This library was separated into “Base components” and Casa da Música components.
Documentation of all components was made on Figma, alongside the component and later on a dedicated file to be shared with the client.
Because they would be able to edit the content and have some freedom in shaping how the components would be used on the website, via a CMS it was important to provide guidelines on how they were meant to the used.
Therefore a separate file was created with dedicated recommendations on how to use the main components.
Effects
Effects were kept to a minimum, mostly including overlays on images to maintain contrast between the picture and the text above it.
Casa da Música components included all the components designed specifically for this website:
cards;
content sections.
Pricing
Text styles
🖤 the end
not really…
Going back to the beginning
This case study explores my role in creating and maintaining a component library and style guide.
This project had a short timeline so this process helped streamline the design implementation while supporting the new visual design of the website. It reflected design choices made during the process and supported their sustainability after delivery to the client.
What I’ve learned and what I would do if we lived in a perfect world
This was my first project after my career change. I found myself balancing between applying everything I had learned and adapting to the reality of a fast-paced project with tight deadlines. It contrasted the structured, step-by-step process taught in training and the dynamic back-and-forth of real-world design work.
This experience proved invaluable, as it helped me appreciate the benefits of a well-documented design system. Creating a central repository where you document components, specifications, and usage guidelines as you design is crucial. It serves as a reference point for developers and stakeholders and helps preserve the reasoning behind design decisions long after memories fade.
With more projects under my belt, I continue to apply and refine these lessons. See you around✨