Designers and Developers Working Together – A Collaborative Love Story

How designer and developer collaboration can generate successful software development projects

Women having a meeting.

Have you ever thought that the collaboration between designers and developers on a software development team can be similar to a relationship? The other day we were preparing a presentation for our colleagues in Octobot and our goal was to talk about how we, designers, collaborate with the development team on our projects. As you might imagine, designers and developers have very different backgrounds and skill sets, which often challenges us to defend our points of view, as well as to understand and listen to one other. Sound like any couples you know?

This could be our soap opera fans’ hearts talking out loud, but the more we talked about it, the more our metaphor grew. We think there’s a lot of parallels between a romantic relationship and the chemistry between team members on a digital product project. In both, we are talking about diverse individuals who decide to create something together; it’s not easy and both sides have to compromise to make things work, but, in the end, they can come up with amazing outcomes. With this metaphor in mind, we delivered our presentation and now offer this blog post sharing our perspective as designers routinely working with developers in order to make the project (and the relationship) thrive.

This is how the process goes:

  • Empathize (the first date)
  • Define (establish the relationship)
  • Ideate (the proposal!)
  • Prototype (move in)
  • Test (live together)
  • Implement (have children – or a dog!)

Our product development process follows the Design Thinking steps, and you can read more about those here. Nevertheless, it’s important to clarify that even though we’re writing this post following the steps in order, in real life it’s not always a linear process. As in any good love story, software development team members can go back and forth on the journey, making adjustments on the go and re-defining things for the sake of the happy ending. In fact, it’s more like:

Design Thinking process.

Empathize, or the first date

Here in Octobot, our very first step when starting a new development project is to gather information to make sure we understand the product we’re going to build. Therefore, we have an inception phase in which we research and develop a broad understanding of the client’s business and its users. Our goal is to align expectations among stakeholders and make sure we understand the problem users are facing and that our product will solve.

We talk a lot about users in this stage, but it doesn’t mean it’s a responsibility of the Design team only. It’s vital to have our dev colleagues on board from day 1 since together we’ll plan and conduct activities to learn about the users and the business. By interacting with the client and their consumers, we determine their needs and establish empathy with them. Tools such as the Value Proposition Canvas and Empathy Maps are really useful so everyone on the project can acquire information and generate insights.

Similar to a first date, in which people are getting acquainted and checking if there’s good chemistry between them, we view this step as an opportunity to know the product and to get to know our fellow team members better. A positive first step is really important for the project’s success, so we enjoy setting a strong foundation, really connecting with our colleagues and learning from their experiences and opinions.

UX/UI design tools.

Define, or establish the relationship

After gathering all the user and business information, our next step is to come up with hypotheses around the problems users face. Our end goal here is to define the issues we’re going to focus on for building the product. Soon, we start visualizing potential solutions that could be translated into a solid, scalable app.

This is the time we start asking ourselves: how should the user behave inside the product? What path could they take in the app? While we designers are focusing on the information architecture, developers are discussing the right technologies to establish the software foundation. It’s important to communicate constantly at this stage, to make sure we’re all on the same page. Some of the tools we rely on are users flows, navigation trees, Customer Journey Map, among others.

As we see it, this is a key moment for establishing our relationship together: the best communication channels, the right methodology, the technology, everything we need to agree upon to make sure we’re good to go! Therefore, everyone must feel heard and part of the decision making process. As a result, we get comfortable with each other and confident that the relationship is promising.

Ideate, or the proposal

During this step, the project is all about brainstorming. As we now have clarity regarding the user needs and how our solution can be there for them, we get creative and imagine all the ways our product can look and behave to truly meet our users’ demands.

Everyone is invited to the brainstorming sessions, and there are no bad ideas. Based on all the information we collected before, we consider all of the possibilities for the project, even the craziest ones. Having established a positive start for our relationship matters here, since we foster an environment where everyone, regardless of their background, should feel comfortable sharing their ideas. The very fact that we have different experiences and capabilities is extremely valuable to stimulate our creativity and consider different perspectives.

However, at some point we need to make a hard stop, and, with all the ideas on the table, decide which one is the one. Our system for converging ideas and discarding others involves asking ourselves these questions:

  • Will this idea bring a solution to our users? Will it provide value to them?
  • Is it technologically feasible? Can we build it?
  • Is it viable for the business? Does it attend a market opportunity

When an idea checks these three requirements, we know we should go for it. In our experience, we end up with 2 or 3 great ideas that will guide our UI/UX design process and the development phase as well.

As you can sense, things are getting serious! At the same time we are getting married with an idea, we’re also agreeing to marry our skills inside the team to build it. As with any wedding, it should be a happy moment, where everyone feels proud of the path we’re choosing, and hopeful that we are going to be very happy together. To get here, we made sure all of the right conversations took place and everyone on the team felt valued and in synergy.

Back to the Future gif

Prototype, or move in together

As confident as we feel with our chosen ideas, we do want to validate them as quickly as possible to be sure we picked the right ones. To be able to do that, we utilize different prototyping techniques to get a sense of the product and reach out to users for early feedback. This is golden input for us to evolve the design and get closer to a more finalized product idea.

Based on initial wireframes, we build an interactive prototype, usually in Figma, where stakeholders can interact with it similarly as they would with the final product. We particularly appreciate including devs in the prototyping process, so they can check if users flows are correct or if things are getting too complex for implementation.

Going back to our metaphor, after the wedding it’s time to build a home together. To make sure everyone feels at home, the team must share in the responsibility of testing and checking if their ideas make sense in practice.

Test, or live together

When everything was more in the imagined world, things seemed easier. Now that we’re getting down to a final product idea and the development process is on the horizon, it can be stressful. The routine and mundane daily chores in a relationship aren’t easy and couples must navigate these to make it work.

The same goes for us, designers and developers, when our prototype starts getting tested by real users. With their feedback we can detect errors and iterate. However, it’s not easy to have your idea fireproofed and negative critique can be hard to take. That’s why we rely a lot on ourselves to keep a positive attitude and a constructive mindset.

While conducting usability testing and interviewing users in order to interpret the pros and cons of the product idea, we keep conversations flowing inside the team and make all the necessary adjustments. As mentioned earlier, we can move back and forth during the whole process, and the prototyping and testing phases are key to be sure we can go ahead with the official product development, or go back a few steps and pivot.

Evolution of an agtech software wireframe into a mockup.

Implement, or have children or a dog 😛

Settling down and starting a family is the idea of perfect happiness for many couples, but feel free to insert here the relationship goal you may have. For us, this step is all about enjoying the fruits of a solid and positive relationship. Talking about software, this means building and launching a product that is in many aspects like a child to us!

The implementation phase is the largest because it’s where the magic happens. After validating ideas, visual aspects, user experience, technology, you name it, this is when the real software development project begins. At Octobot, devs and designers collaborate under the Scrum umbrella on weekly iterations: we design the components and share them with the dev team through a collaborative Design System, so they can work on the front and back end development and give birth to the product. Also, while developers are building the software, we’re constantly checking it out to make sure it’s accurate according to the designs we envisioned.

And they lived and tested happily ever after!

Or, at least, until the next project 😜 At the end of the development process, we organize a Retrospective meeting with the whole team where designers and devs can discuss the positive aspects of the project and what we need to improve for the next one.

In order to make sure all of our projects and relationships are always as positive as possible, we created a marriage certificate that every designer and developer in Octobot is invited to sign. Take a look:

We will make decisions together for the sake of our relationship;
We will be together despite server errors and Figma misunderstandings;
We will have the confidence to tell each other everything and improve our design systems;
Designers promise to think about development to make their job easier, and developers will think about design to prioritize a good user experience;
We promise to reach agreements and consensus that benefit both parties;
We will always be available to understand each other, help each other and resolve conflicts;
We promise to love each other in prosperity and adversity, in sickness and in health, and to face all clients together until the end of our days.
Sign here: __________

Jokes aside, we believe in the importance of creating stable, friendly and productive relationships in order to build amazing products and have fun while doing it. While we learn from each other and elevate ourselves to think differently, we grow together with our clients and Octobot, always providing users with an experience that transforms their lives for the better.

What about you? What are your tips for tying the knot with your fellow devs or designers? Leave us a comment with your recommendations!

See related posts