In the fast-paced world of product development, the concept of "shifting left" has gained significant traction. Traditionally associated with software development and testing, shifting left refers to the practice of addressing potential issues earlier in the development cycle rather than later. However, shifting left is not limited to coding and testing (which I already wrote about here); it is equally applicable to the design phase. Organizations can mitigate risks, enhance user experience, and ultimately save time and resources by fostering early collaboration between developers and designers.
As part of a co-development project with Newforma, I had the opportunity to collaborate with Yannick, whose expertise in design and collaboration was invaluable. He kindly agreed to share his insights for this article, bringing a valuable perspective on the collaboration between developers and designers.
“Every company runs on its unique blend of processes and strategies, which are routinely reevaluated and updated for the pursuit of efficiency and productivity. Our company, housing multiple squads comprising UX/UI designers, QA analysts, product owners, and developers, had previously adopted a feature- or story-based work approach. This involved peer reviews, QA reviews, and design reviews for each feature, which, though well-intentioned, presented challenges.
Developers often found themselves in a state of limbo, juggling multiple tasks due to asynchronous reviews, which in turn, kept stories or tasks open for longer. Consequently, code modifications were often necessary, sometimes weeks or even months after the initial writing. This posed a significant source of frustration for developers, who had to repeat the process for every QA or design alteration, thereby increasing the time to completion and leaving some bugs unresolved due to the laborious cycle of fixing post-merge code.”
— Yannick Prévost, UX/UI Designer at Newforma
“Shifting left” is often associated with development moving closer to testing or security. Still, in the context of software development and design collaboration, it means breaking the traditional handoff model and integrating developers into design discussions earlier while keeping designers engaged throughout development. Instead of a sequential workflow where design is completed before development begins, shifting left encourages continuous alignment between both teams.
A strong focus on collaboration between developers and designers, mainly through pair sessions, offers several advantages:
Early Alignment: Regular dev-design pair sessions ensure that both teams are aligned on goals, constraints, and user needs from the start, reducing the likelihood of misinterpretations later.
Cost and Time Savings: Addressing design and technical feasibility issues early is far more cost-effective than fixing them after development has started. Pair sessions enable rapid iteration and immediate feedback.
Improved Communication: Encouraging continuous, structured collaboration between developers and designers fosters a shared understanding, leading to more cohesive product development.
Enhanced User Experience: Prioritizing joint efforts early helps create intuitive and technically feasible products that meet customer expectations, leading to higher satisfaction and retention rates.
“To further enhance the process, we introduced two distinct meetings involving product owners, QAs, and designers. The goal was to monitor open bugs, identify potential improvements, and address any roadblocks. This was supplemented by weekly group testing to catch minor bugs, fixes, or edge cases that might have been overlooked in the previous process. This approach ensured the seamless integration of all code sections, reducing bug generation during merging.”
— Yannick Prévost, UX/UI Designer at Newforma
To improve efficiency and ensure early validation of design decisions, we implemented several initiatives to shift left on design. Integrating validation earlier in the development cycle reduced rework, improved collaboration, and streamlined the overall process.
To simplify and accelerate design validation, we leveraged several tools that streamlined the process and improved efficiency:
Storybook: Exposing our component library in Storybook provided an interactive and centralized environment where designers and developers could view and test UI components in isolation. This allowed for faster iteration and validation of design elements without needing full application deployment.
Automated Merge Request Deployment: This tool enabled the automatic deployment of merge request branches to dedicated environments, allowing designers and stakeholders to validate changes quickly without manual intervention. This significantly reduced turnaround time and ensured feedback loops remained short and efficient.
Playwright: Our end-to-end automated testing solution, Playwright, was introduced to empower QAs to build easy-to-maintain E2E tests. It allowed them to validate critical user flows efficiently without relying on developers, ensuring faster feedback and improved test coverage.
DSM (Design System Manager): DSM empowered developers to build solutions without needing exact mockups by providing a structured design system with reusable components and guidelines. This allowed for more autonomy and consistency in design implementation.
Slack: As our centralized communication hub, Slack facilitated instant feedback, collaboration, and problem-solving between teams. It became instrumental in reducing silos and ensuring alignment across all stakeholders.
These tools contributed to:
Faster Iterations: Automated design validation tools reduced the time needed for manual checks, enabling designers to focus on refining the user experience.
Improved Accuracy: Custom-built testing solutions ensured that design elements met technical requirements and accessibility standards early in the process.
Reduced Costs: Investing in validation tools upfront minimized the risk of expensive rework and redesigns later in the development cycle.
Streamlined Collaboration: Design validation tools helped developers clearly understand design requirements, reducing back-and-forth communication and potential misunderstandings.
By adopting these tools, our team was able to streamline the design validation process, reduce bottlenecks, and foster better collaboration between developers and designers. This approach enabled us to deliver higher quality products more efficiently while ensuring alignment with design expectations.
In our journey to enhance design collaboration, we initially utilized centralized mockup platforms such as InVision, which provided an efficient way to share, review, and comment on designs in real time. However, as our needs evolved, we later migrated to Figma, which offered a more dynamic and collaborative environment with real-time editing capabilities, version control, and better integration with development workflows. This transition allowed for improved collaboration and faster iterations, ultimately making the design validation process more efficient. As a result, InVision was gradually sunset in favor of Figma's all-in-one capabilities.
We adopted a structured approach to writing design stories to ensure a smooth development process. Our stories followed the classic format of including context, acceptance criteria (ACs), mockup screenshots, inclusions, and exclusions. Initially, screenshots were heavily used to provide visual references. However, we discovered that screenshots were static snapshots in time, often leading to outdated or deprecated design elements being implemented if the story was picked up later.
To address this, we transitioned to using Figma links instead of static screenshots. Figma links ensure the most up-to-date mockups are always accessible, eliminating the risk of implementing outdated designs. Additionally, suppose a story becomes deprecated due to evolving design needs. In that case, the link can be reviewed, and the story can be deleted immediately, rather than inconsistencies being discovered later in the validation process. This shift has resulted in more accurate implementation and improved efficiency in design validation.
Deploying a branch manually to test UI and UX elements was a tedious process that consumed valuable time and resources. To streamline this, we developed tools that automatically deploy the software to its dedicated environment whenever a merge request (MR) is opened. This automation allows designers to validate their work effortlessly by opening the MR and accessing the deployed environment via a link. With just a click, they can rapidly test everything without the hassle of manual deployment. This automation has significantly improved the efficiency of the design validation process and reduced turnaround time.
Shifting left is an investment. Developing tools to help develop software faster inherently leads to delivering software quality more efficiently. Companies should not hesitate to invest in such practices. As seen with the continuous delivery example, without investment, teams can become trapped in inefficient cycles that hinder progress and slow down innovation. Proactive investments in automation and validation ensure that software is built right from the start, minimizing costly errors and increasing overall productivity.
To foster better collaboration, we encouraged designers to engage with developers' merge requests (MRs), ensuring that design intent is maintained throughout development. Similarly, developers learned to leave valuable feedback within Figma mockups, enabling a more iterative and cohesive design process. This cross-functional feedback loop helps catch potential issues early, align expectations, and ensure a shared vision between teams.
“Recognizing these pain points, our team embarked on a journey to redefine the process. The key objective was to “move left” with the involvement of QA and designers, integrating them into the pull request stage. This led to a radical transformation, streamlining the process and drastically reducing delays.
This new approach made it obligatory for the QA to be part of every pull request. Designers, too, were included based on the requirement for UI or UX testing. This strategy led to a significant surge in performance, marked by a decrease in time spent in process loops, a drop in frustration levels, and a notable rise in bug detection and resolution.”
— Yannick Prévost, UX/UI Designer at Newforma
A key principle in fostering effective collaboration is the One Team approach, which emphasizes that a role is a set of responsibilities, not a single person. Design responsibilities can and should be distributed across multiple team members, rather than being solely placed on a single designer. This shared engagement fosters collective ownership and accountability for delivering high-quality UI and UX. By embracing this mindset, the entire team becomes responsible for the product's success, creating a more dynamic and resilient development process.
These efforts ultimately led to the realization that pair sessions between developers and designers are invaluable. Instead of working in silos, we brought both disciplines together to collaborate on real features in real-time.
For example, while developing a critical feature, we noticed that developers and designers often had different interpretations of the user experience. Rather than going back and forth asynchronously—leading to misaligned expectations and rework—we tackled the problem head-on with a live pair session.
During the session:
The designer guided the developers on layout, spacing, and interaction patterns.
The developers tested feasibility and adjusted the design in real-time based on technical constraints.
The product owner clarified the business needs and ensured alignment with user goals.
This hands-on approach helped us eliminate ambiguities immediately—issues that might have taken days or weeks to resolve asynchronously. Instead of waiting for feedback loops, we iterated live, tested interactions instantly, and walked away with a validated, developer-ready solution.
Beyond solving immediate design challenges, pair sessions encouraged a shared responsibility for UI/UX quality. They also enabled exploratory design, allowing us to test new ideas quickly without the rigid processes that can slow down innovation. By focusing on what adds the most value first (e.g., user interactions rather than perfect backend logic), we delivered better solutions faster and with fewer iterations.
“When our existing process started causing friction between development, design, and QA teams, we knew we needed a change. Our first solution was implementing a weekly alignment meeting with product owners, QA specialists, designers, and team leads, which helped establish better communication channels.
We then moved all interactions to DevOps, believing this would streamline the process. However, we discovered a key issue: designers weren't consistently being included in the right stories, as there was no clear trigger for design involvement.
The solution emerged when we created a dedicated UI/UX validation channel in Slack. This became our central starting point for design discussions, where simple queries could be resolved via chat while complex issues would prompt a live meeting. This flexible approach finally gave us the efficient, clear-cut process we needed.”
— Yannick Prévost, UX/UI Designer at Newforma
The benefits of pair sessions aren’t limited to our experience at Newforma. Another great example comes from Axify’s development, where the team used a highly collaborative approach to tackle uncertainty around a new feature.
A quick note for context: Nexapp developed Axify to help engineering leaders quickly gain visibility into their teams' productivity and transform bottlenecks into efficiency optimization initiatives.
During Axify’s development, the team wanted to provide users with better visibility into the lifecycle of their tasks. To achieve this, they explored the Value Stream Mapping (VSM) strategy. While promising in theory, they had no confirmation that it would truly meet users’ needs. At this stage, their idea was only a hypothesis.
To validate this hypothesis, they could have taken a conventional approach: designing mockups, consulting users, gathering feedback, iterating, and eventually developing the feature (or not). Instead, they chose a more collaborative and team-oriented approach: developing a prototype together. Over half a day, four developers, one designer, one project manager, and a coach worked on a single screen to implement the feature.
Each person had a clear role during the session:
The manager and coach ensured the design aligned with users’ needs and the VSM concept.
The developers built the technical foundation of the feature.
The designer guided them to create a visually appealing and intuitive interface.
By the end of this collaborative session, the first version of the Value Stream Mapping feature had already been deployed to production.
This way of working provided a significant advantage: it enabled the team to deliver value to users much earlier in the task lifecycle. The key difference was synchronous and simultaneous collaboration rather than a sequential, staged workflow.
Hint: During this type of activity, developers should put aside implementation details and focus on what adds the most value for other stakeholders. For example, when working on pair programming and design, prioritize the visual and interactive aspects of the code rather than where the data comes from. Use mocked data when necessary to validate visual components and design elements effectively.
Shifting left on design is more than just an approach; it is a mindset that fosters collaboration, efficiency, and innovation. Organizations can create high-quality products that meet business and user needs by integrating design earlier in the development cycle, investing in automation, and promoting shared ownership. The key to success lies in continuous improvement, cross-functional collaboration, and a commitment to delivering the best possible user experience.
“The team’s new process has been a groundbreaking success, transforming the way we work by redefining collaboration, reducing frustration, and enhancing efficiency. This success story serves as a testament to our commitment to continual improvement and innovation. As we move forward, we remain dedicated to refining our processes, fostering a culture of teamwork, and delivering the best possible outcomes.”
— Yannick Prévost, UX/UI Designer at Newforma
Vincent “Rocko” Bernier, Senior Developer and Scrum Master at Nexapp
Yannick Prévost, UX/UI Designer at Newforma