Bridging the gap between design and engineering
Bringing design close to code!
As a design leader passionate about improving cross-functional collaboration and processes, I often find myself navigating the fine balance between design and engineering—two disciplines that share the same goal of delivering exceptional user experiences but operate with different mindsets, tools, and processes. While both teams are equally invested in building great products, the challenge often lies in communication, collaboration, and alignment.
In this portfolio case study, I want to share how I tackled these challenges head-on by bridging the gap between design and engineering. Rather than treating design and development as separate phases, I focused on building trust, fostering open conversations, and creating a collaborative process that worked for both teams. Through this approach, we not only met our deadline but also established a workflow that improved efficiency, alignment, and product quality in the long run.
By sharing this story, I hope to demonstrate the critical role of UX leadership in fostering cross-functional partnerships, ensuring that design and engineering speak the same language, work towards the same goals, and build products that truly meet user needs.
Lets bring design close to code!
Background
At Autodesk, I had the opportunity to work with one of the talented and equally passionate engineering teams on a project with a tight timeline and high expectations. As we dove into execution, I quickly realized that the disconnect between design and engineering was creating friction—delays in handoffs, misinterpretations of design intent, and last-minute changes that impacted both usability and development effort.
Key challenges
When working with an engineering team under a tight timeline, I noticed that the typical gaps in collaboration between design and development were causing inefficiencies. While both teams shared the same goal—delivering a high-quality product—several challenges were making it difficult to stay aligned, move quickly, and iterate effectively.
1. Back and forth between design and development
One of the biggest challenges was the constant back-and-forth between design and development. Small misinterpretations of design specs or missing details led to frequent clarification requests, rework, and delays.
2. Documentation and document revisions
Design specs, interaction details, and usability guidelines are crucial for ensuring a seamless handoff. However, as the project evolved, design decisions changed frequently, and updating documentation became a tedious task.
3. Communication barriers
The design team worked in design tools such as Figma, Sketch etc., while engineers coded using frameworks or languages such React, Javascript, HTML, CSS etc. This gap in tools can lead to misunderstandings when handing off designs.
4. Iterations speed, feedback loops and development time
With a tight timeline, both teams needed to iterate quickly. However, design changes often impacted development work, requiring engineers to refactor code, sometimes multiple times.
5. Work relationship and trust
Trust between design and engineering is essential for collaboration. However, when teams primarily interact through handoffs and requests, it can create a transactional relationship rather than a true partnership.
Solution to these challenges
Speaking the same language and leveraging the same tools, aligning design and development through shared knowledge
One of the key factors in bridging the gap between design and engineering was ensuring both teams spoke the same language—not just in terms of communication but also in understanding each other’s tools, constraints, and workflows. Designers and engineers often approach problems differently, and when they don’t share a common technical foundation, misalignment and inefficiencies arise.
To address this, I focused on building a shared understanding of front-end technologies and adopting tools that both teams could use seamlessly.
Basic understanding of HTML, CSS, and JavaScript for designers
Designers don’t need to be engineers, but a basic understanding of how front-end development works helps bridge the gap between design intent and implementation.
Conducted knowledge-sharing sessions where engineers explained how HTML structures content, CSS styles elements, and JavaScript adds interactivity.
Encouraged designers to test their designs in real code—for example, tweaking CSS variables in a live environment to see how spacing and layouts behave.
Used browser dev tools to inspect and understand how design elements render in real-world applications.
Impact: Designers became more aware of technical constraints, responsive behavior, and performance considerations, reducing unrealistic design requests and improving feasibility discussions.
Using the same tools for a seamless handoff
To ensure a smooth transition from design to development, we aligned on common tools that both teams could use, reducing friction and improving efficiency.
Storybook: A living component library where designers could see how UI components looked in real code, and engineers could ensure consistency across the product.
GitHub: Designers and engineers collaborated on design documentation within the code repository, ensuring updates were tracked alongside development.
Sublime Text & VS Code: I and some designers who wanted to experiment with code used lightweight editors to tweak styles and better understand how front-end code works.
Impact: By using the same tools, design decisions were directly tied to the development process, reducing inconsistencies and improving the accuracy of implementation.
Below are some other process components that helped in bridging the gaps between the design and development process.
Embed and integrate engineers in the design process early
Pairing UX designers with front-end engineers helped smooth the transition from design to code.
Think in systems, not screens: A component-driven design approach scales better than one-off screens.
Encourage collaboration, not handoffs. Engineers and designers should work together, not just pass files back and forth.
Adopt shared tools and frameworks
Acknowledging engineering contributions in team meetings and retrospectives to create a culture of appreciation.
Introduce design critiques with engineers to surface feasibility concerns earlier.
The Result: A more seamless design-to-development process
By implementing these solutions, we reduced friction, improved alignment, and increased delivery speed. Our teams moved from a reactive approach to a collaborative, proactive workflow, ensuring that design and development were always on the same page.
These improvements didn’t just help us meet our tight timeline—they created a sustainable process that will continue to benefit future projects. By fostering open communication, trust, and shared goals, we bridged the gap between design and engineering in a way that delivered better outcomes for both teams and our users.
Final thoughts: Building a unified design and development culture
By aligning language, knowledge, and tools, we broke down traditional barriers between design and engineering. Instead of viewing each other as separate teams, we worked as one unit with shared goals, workflows, and an understanding of each other’s disciplines.
This approach not only accelerated our project timeline but also created a more collaborative, efficient, and scalable process for future work. When designers and engineers speak the same language—both technically and strategically—it leads to stronger products, better user experiences, and a more seamless design-to-development pipeline.