Designers + Frontends: let the battle begin!
The battle among UX/UI designers and Frontend developers will never end, and it’s a good thing! They all have their differences, and more often than not it will be hard to understand each other seamlessly. However, the battle I’m talking about is not on winning one over the other, but getting together to fight for the same objective: making great products 🚀!!
As a developer or designer, you might be working by yourself, whether it is as a freelancer or solo entrepreneur, or in a team with other Frontend developers and UX/UI designers. This is the case for us in Casavo, where our team started to grow, and we found the need to take the battle up a notch. That’s why the idea to hold weekly meetings came out from one of our developers during the COVID lockdown. Weekly meetings with Frontend developers and UX/UI designers? Sounds good! Let’s try it out!
So what is this meeting about? 🤔
If as a designer, you’re coming from a UX background, you know how important it is to gather feedback from your users, and the same holds true for another aspect: getting feedback from the people that you work with, your teammates! That will get your design/dev cooperation going in the same direction, learning from each other, and clearing doubts along the way. Either if you have a strong coding background as a designer or the opposite as a developer, each role has distinct strengths and mindsets, so it’s a good idea to combine forces on a regular basis (we want to win the battle right?).
Like many tech companies, the relationship between UX/UI designers and Frontend developers in Casavo is a close one, where the process of creating screens and assets is preceded with developers’ hand-offs. Working remotely, however, exposed the need to improve our communication and understand how each role was approaching their daily work. Additionally, at the time being, a new product was emerging, so we frequently talked about our visual communication, design systems, components, animations, and ways to improve our products. That’s why we started holding meetings every week to put our heads in the same direction.
Problems, tools, animations, you name it! 🍿
One of the things we do to kick-off each meeting is to bring out general issues anyone is facing. It might be a designed screen that isn’t easy to translate into code or a developed UI that doesn’t reflect the intended design. We might discuss how certain UI components don’t translate as expected from a UX perspective or how to improve our communication skills to make life easier for developers (like when elements in our designs need to be shown or behave in a certain way). The idea is to bring out topics based on real situations, aiding the learning process on both ends. One of the key points for this, and that we found valuable when holding remote meetings, was going over the files used in our daily work.
We’ve also learned our way into topics like text style naming conventions used in our designs, and how they sometimes did not correspond to their coded counterparts. As a team, you may decide to share conventions for things like color tokens, text styles, UI components, and screens, or make them distinct. The important thing is to share these choices with those involved in the process, and get everyone on the same page.
Another decision that came up while reviewing our UIs was the spacing system used to regulate our design elements. Although it’s a topic widely known, it can sometimes be overlooked if you don’t take the time to discuss it among your colleagues to reach a consensus. When approaching single independent projects this might seem small, but once your products start to evolve an interrelate, matters like these become essential for a consistent visual experience.
The same happens from a Design System perspective, so we regularly discuss ways to improve our base UI components and what products share them, aiming to improve along the way. In the end, a Design System is an evolving language that needs to adapt and reflect the best user experience for each product, so keeping it a regular topic is always welcomed. You’ll also find that treating this earlier in the development process it’s an opportunity to agree on how base elements will get constructed and behave, especially if you are planning on using tools like Storybook.
All in all, with each round, we find that our discussions get richer and diverse. This has given us the opportunity to discuss other aspects like UI animations, or to understand what technological advances developers can bring to our products, and how can we as designers improve the collaborative work. Realizing what’s behind each other’s daily activities it’s fundamental and will lead your team into trying processes and tools towards a consistent design/dev synergy.
Keep it regular, keep it simple, keep it going! 🏋️♂️
Whether it is today, tomorrow, or as soon as you can, there’s no perfect moment for your Design/Frontend battle to begin, and no place as well. Starting remotely, in fact, is a great initial battlefield that worked for us, and we took the opportunity as a team to try it out. That being said, it’s important to dedicate the time this activity deserves, as sharing a common knowledge holds great value. You may schedule it once every two weeks, every week, or do it more often, it all depends on your needs and the complexity of your team and projects.
As more information and topics get discussed each meeting will surely start to grow, so having an agenda with the main topics to discuss and those to leave for the next round it’s a good idea to keep things simple. Once your team starts to build up, you may want to implement documentation, track decisions, future implementations, and work your way up from there.
In the end, what really counts each time we meet, it’s the opportunity to talk openly and critique our own work. Doing it as an iterative process also means that we can identify problems quickly. Anyone is welcomed to share their thoughts and ideas, trying out a little empathy for the other side. That is what eventually brings out the best products and the great talks that come along!
So what are you waiting for? Let your Design + Frontend battle begin 💪 !!!!
