Improve the workflow between design and frontend team

Maintaining good communication and interaction across different team members can sometimes be hard, even more so when you are part of a remote team living in different time zones and locations. It’s important not only to establish a set of rules, but have a clear vision of the product, a company vision and principles. Being proactive it’s also an important part of the equation.

One of the most challenging aspects of the design process is how as designers we can communicate better our ideas to frontend developers, and get an accurate implementation of our designs. It’s not as simple as sending a Figma link with designs for the frontend team to start coding, but as a designer you need to provide guidance, support and feedback. These can be addressed on design reviews, by quick calls or simply by Slack messages.

Here at Codiga, we have established organically a workflow that has helped us to increase our productivity and iterate faster. At the end all this effort and fine tunes to the process is reflected in the product's constant improvement. Some of the solutions that have been helping us to design and build new features and improve the existing ones are:

Kickoff meetings

After the design phase, which is typically a conversation between product, design and development (this could be a good topic to talk about in another blogpost) We have a quick call from 30 minutes to 1 hour, depending on the feature, where design and product present the designs to the frontend team, including use cases and UI interactions on Figma. The goal is to identify more possible scenarios and edge cases, and bring questions from the frontend team. Also, it’s a good opportunity to find improvements for the design, get feedback and quickly update the UX.

Quick questions and feedback

During the development phase which typically starts the next sprint after the design phase is done, design supports the frontend team with possible questions and updates. Even during this phase we can identify more improvements and team-up to quickly design and implement a better solution. Often, the frontend team propose design solutions that we can quickly mock on Figma, and keep moving forward developing the feature or project. This iterative process is helped by quick communication and a constant collaboration in finding the best possible solution.

Use a shared component library

There’s no one-size-fits-all solution when it comes to process, since every team is different. In our case from a UI design perspective, we wanted to have our own design system that reflects the product brand and personality.

Designers and developers should work with the same components to ensure consistency and reduce the development time. We use Storybook as a single source of truth, to keep track of our UI elements and states. These elements are designed in Figma and connected as a shared library to all the designs, so we can easily update them on both sides. You can learn more about sharing libraries in organizations with Figma in the following article.

QA and reviews

QA is not an isolated step in the process performed by a specific team, instead We are constantly testing our platform no matter the step of the process that we currently are. Also, every week a full platform test is performed to a different team member with different roles and perspectives, to try to catch all the possible bugs and areas to improve. The importance of Design QA in digital product design is essential.

We have redesigned our Codiga Hub and we are currently working on the new Code Analysis where developers can define their own rules for their preferred languages. So far it has not been easy, but we trust the process to help us to get there.

Do you have any ideas or tips to share for designers and developers, and keep improving this iterative process? Contact us and let us know what are your ideas.