Strengthening the culture of collaboration between Design and Engineering
This is a translated version requested by the Chromatic team. The original article Fortalecendo a cultura de colaboração entre Design e Engenharia was written in partnership with Adria Meira, current Product Designer at Cobli’s Field Ops team.
Last week, a development process training took place as an initiative to present our knowledge about how our meeting, pull requests, bugs in production, and application monitoring work to the new Coblers of the technology team. This onboarding is essential to show how the Design and Engineering teams bring projects together to build even more elegant solutions.
We wanted to explore the general idea: how might we collaborate to deliver new features that solve customers’ problems?
Collaborative solutions
Typically, at Cobli, the initial dive into a new project is driven by Design and Product. Together, these teams go through the discovery and exploration phases to understand and define the problem statement from a compilation of methodologies — for example, interviewing potential users and stakeholders, marking market analysis, writing job stories, and so on.
(To learn more about UX research, we recommend our article about user research)
Once the problem has been defined, it is time to think about how to solve it — and it is only possible to come up with the best solution with the participation of everyone on the team. With the alignment of technical feasibility, user experience, and product needs, we can reach a satisfactory project scope, understanding its requirements and constraints. Some tools that help us at this stage are:
Building user flows
Drawing the user’s journey to solve a specific task within the product or feature helps us understand everything that needs to be developed from both the Design and the Engineering perspectives. The draft also provides prioritization of which use cases will be dealt with now and which ones will be left for the future, besides showing front and back-end requirements.
(Want to know more about the importance of these flows? Check out our article about the subject)
Proof of concept (POC) development
Creating a practical model to prove the theoretical concept established by the project or even developing a partial implementation allows identifying bottlenecks in the feature’s technical functioning, enhancing impact on results. Besides that, a POC can raise awareness of usability and use case points that are not as tangible in a prototype.
Yes, a POC takes time, and that is precisely why it can be interesting to implement. It can optimize time and increase team productivity by demonstrating, for example, that certain features could not be implementable. After all, the less time spent on tasks that won’t yield results, the better.
About Design Systems…
Another essential point of Design and Engineering collaboration is the Design System (DS). Remember, the DS is a library created by designers and developers containing reusable styles and components and documentation on how and why to use each of them.
It’s important to emphasize that, even though there is “design” in the name, this is a shared responsibility with the Engineering team since the standardization brought by the DS boosts the development process for both teams, increasing their productivity.
Furthermore, the DS reduces conflicts between designers and developers as it is considered the single source of truth. In other words, if there’s a difference between the designed and the implemented interface, the DS must be verified to check which one is correct.
At Cobli, to strengthen the collaboration on the DS, we make fortnightly alignments with Engineering and Design teams members to discuss this specific theme. Also, engineers can always report and discuss any inconsistency or lack of documentation to the Design team.
…and Storybook
This is the tool we use at Cobli to help the development of UI components isolated from the business logic and our dashboard. In the Storybook, we can map the implemented elements with an individual story for each one.
These components usually receive mocked data, simplifying a series of tests without the need for external system integrations. Moreover, it is possible to test edge cases and other interactions without creating or changing the final screen where this component will be placed. The advantage of this type of test is that the larger the application, the more these components are related. If there is any modification, it can create side effects on others that are related.
In addition to the advantages of unit testing, this tool also brings practicality for reviews made by the Design and Product teams. How does the use of this tool make this practicality possible? Through the integration between Storybook and GitHub. When a pull request is created, there is a verification on packages with new or modified components. Based on this check, a preview link with these changes is generated and shared within this same PR, which can be accessed by any member of the Cobli GitHub team!
So, Storybook is a powerful tool to help with front-end development flows, assist developers, and facilitate design reviews. Thus, both teams can be aligned as new implementations or changes in our systems are carried out.
Collaboration leads to success
At Cobli, we understand collaboration as a fundamental pillar for the team’s health. Bringing different perspectives of the same project, sharing knowledge, and joining efforts to solve complex problems makes our daily lives more productive and, why not, fun and creative. Instead of waiting for geniuses with ready-made solutions, we prefer to bet on the contribution of each team member to build an even more incredible product.
We hope this article helps to create more collaborative environments! Are you interested in joining our Design or Engineering team? Check out our open positions!
