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
Sports Technology
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 & Laeiszhallehttps://www.southbankcentre.co.uk/https://www.nyphil.org/https://philharmoniedeparis.fr/enhttps://www.laphil.com/https://www.carnegiehall.org/
user feedback
research takeaways
During this project, much information was gathered at different points, influencing the final design but the main guiding principles came from the initial survey mentioned above.
The most valuable information from the survey was that (despite the small sample) most of the users were members and not hosts.
This, as well as the understanding of the most wanted features, led me to refine the challenge that was given to me and also aim at:
Improve the experience of creating and managing sporting events.
Initial challengeImprove the product’s information architecture, making it easier for users to access the features they want and need the most.
Added challenge based on researchProvide an experience that is tailored to both hosts and members of Planamatch.
Added challenge based on researchThe Carnegie Hall💡 designing a solution
streamline the creation of events
Planamatch’s MVP is a platform that allows its users to organize sporting events. And that starts by creating them.
To streamline the process, making it as quick and intuitive as possible, a 3-step wizard was designed. By doing so users could focus on the core information related to the event, and only after adding accessory information, if they so desired.
As I could not reach users, the sections chosen for the wizard were selected in discussion with the PO and other stakeholders.
Based on my research I now knew what features were important to the users - both hosts and members.
This led me to arranged important features to users on a tab bar, so they could easily navigate between all of them.
Before this final version, other solutions were designed, for example having a floating button for the users to quickly create new events and groups.
helping hosts and members coexist
The main differences between hosts and members relate to their permissions on the group and event interfaces. Members have mostly viewing permissions while hosts can edit and delete content.
Keeping this in mind I focused on providing a solid UI tailored to both these roles. My solution was to keep the main pages the same for both users and concentrate the changes on each of the menus.
Groups page
Host
Can edit group;
Can manage group members:
send invites;
cancel invites sent;
accept or reject invites received.
Member
Can access all content with view-only permissions;
Can leave group.
Host view of a groups member page
Given the research findings, this solution was dropped as those actions, despite being important, are now always being done so they don't need to be so accessible, and they're also made by the smallest percentage of users - hosts.
Events page
Host
Can edit or duplicate the event;
Can manage event invites:
send invites;
cancel invites sent.
Member
Can access all content with view-only permissions;
Can reply to the event.
Member view of a groups member pagerethinking information architecture
Testing and iteration
A lot of changes were made to the core functioning of the product, as well as its visual identity (not covered in this case study) and it would’ve been ideal to test all iterations with users to understand the impact it would’ve had on them. My design choices were made based on the research I carried out throughout this project and on several discussions had with PO and other stakeholders.
Unfortunately, I wasn’t able to reach users and get their direct feedback which impacted the solutions I designed.
It would’ve also been important for me to have more access to data related to the users, so I could better measure the impact of my work. A lot of feedback was given qualitatively and informally making it hard to understand how these changes improved the product.
❤️ the end
not really…
Going back to the beginning
My challenges with this project were to:
Improve the experience of creating and managing sporting events.
Improve the product’s information architecture, making it easier for users to access the features they want and need the most.
Provide an experience that is tailored to both hosts and members of Planamatch.
One by one, throughout this project these issues were addressed in a way that improved the UX of the product, as relayed above.
The process of creating events was streamlined in a 3-step wizard.
The new tab bar now allows users to easily navigate through their most used features
Both event and group pages now cater to both types of users in seamless way.
The goal of my designs was to:
Increase user satisfaction and decrease the amount of issues reported.
Unfortunately, no data was collected to quantify this goal into tangible metrics.
Despite this, through research and collaboration, efforts were made in this direction, and informal feedback received from users was positive.
What I’ve learned and what I would do if we lived in a perfect world
I came across a lot of challenges in this project, mostly related to being a solo in-house designer as a junior coming out of a bootcamp which made this a great learning experience. This adds to the fact that I joined a small team, and therefore the product lacked broad input from business analysis and marketing positioning.
The importance of research was highlighted to me, as it allowed me to better define the scope of this project. On the opposite end, not being able to gather direct feedback from users was a big blocker, made me feel like I was navigating a bit in the dark and not tailoring the experience as much as I could.
All these learnings are being taken with me for future projects and are something I look forward to improving. See you around✨
👏 don’t just take my word for it
Rui Sardinha | PO @ Planamatch
“Marta joined our team as a designer with a fresh perspective and great enthusiasm. (…) she quickly became a valuable part of the team, bringing creativity and a willingness to learn on every project. Her collaborative spirit and positive attitude made working with her a pleasure....”