top of page
ImproveHandoff_Hero.jpg

Improving Handoffs

Desktop Active
Mobile Active
Apple Active
Android Active

At Zappos, we identified recurring issues with missed designs during handoffs to developers. To address this, we surveyed developers and the QA team, uncovering a larger problem tied to inefficiencies in tracking a project’s lifespan. This insight elevated the issue to a high-priority initiative, focusing on creating a streamlined, transparent process to ensure designs are implemented accurately and efficiently.

Project Overview

Challenge

  • Design work overlapped with ongoing development, leading to inefficiencies.

  • Miscommunication of design updates caused confusion across teams.

  • Critical components were often missed during project launches.

  • Project development timelines lacked clarity and structure.

Goal

  • Establish clear alignment across teams on the lifespan and workflow of a project.

  • Enhance communication and collaboration between cross-functional teams.

  • Optimize Figma file handoffs to developers and the QA team for seamless implementation.

Role_2x.png

Role

  • Lead UX/UI Designer

Tools_2x.png

Tools

  • Figma

Time_2x.png

Time

  • 1 month + ongoing

Deliverable_2x.png

Deliverables

  • Figma Handoff File

  • Product Lifecycle

Scope_2x.png

Scope

Product Lifecycle, Figma Handoff

Methods_2x.png

Methods

Surveys, Brainstorming Workshop, Designing, Prototyping

Process

Survey

Understanding Team's Pain Poins for UX, Developers, and QA

The UX team conducts monthly retrospectives to ensure the team’s needs are addressed. During the most recent session, a key pain point identified was related to the handoff process to developers. Challenges included designs not aligning perfectly with implementation, the pressure to deliver files early leading to insufficient documentation, and project tickets being simultaneously assigned to both designers and developers, causing friction between the teams.

 

To address these issues, we sent out an anonymous survey to Developers and QA teams. The goal was to determine if they faced similar challenges and to identify areas where the UX team could improve the handoff process. Making the surveys anonymous encouraged teams to share their pain points openly and without hesitation.

Dev_Survey_Notes_ImproveHandoff_Hero.jpg

QA Survey Results

QA_Survey_Notes_ImproveHandoff_Hero.jpg

Developer Survey Results

Design

Project Lifecycle

Talking about the Elephant in the Room

The brainstorming session resulted in two major outcomes: improving consistency in Figma handoffs and addressing the Project Lifecycle. While the Figma handoff process is within our control, refining the Project Lifecycle requires a company-wide effort.

 

To tackle this, the UX team developed a detailed project timeline, outlining the lifespan of a project from inception to launch. Key milestones were identified, including:

• When a project needs thorough documentation.

• When the UX team begins research and design.

• When stakeholder sign-off is required.

• When Developers receive the Figma file.

• When a test site is ready for review.

• When the test site is approved by stakeholders.

• When the project goes live.

 

This structured approach ensures clarity and alignment at every stage of the process.

ProductLifeCycle_ImproveHandoff_Hero.jpg

Product Lifecycle

We shared this proposal with Project Managers, Developers, QA, and Stakeholders to gather their feedback. For this workflow to succeed, it required commitment from all teams to ensure a smoother process, minimize miscommunications, and avoid reworking designs during development. The workflow was broken into nine steps:

  1. Scoping: Clearly define and structure the project. This document would be shared with all relevant parties involved or affected by the project when it goes live. Scoping was identified as the most critical step to ensure the project is well-documented and roles are clearly defined.

  2. Design: The UX team conducts research, creates designs, seeks reviews and critiques, and makes necessary iterations.

  3. Development: After all stakeholders have signed off, the project is handed over to the developers for construction.

 

Throughout the process, we implemented sign-off checkpoints to ensure all parties remained informed and aligned with the latest updates or changes.

 

This structured workflow addresses the issues identified in our surveys and retrospectives, providing a clearer path for project completion while fostering collaboration and accountability among teams.

Results from Surveys

The combined feedback highlighted several consistent pain points from Developers and QA. Some of the feedback was actionable for the UX team, while other points required broader discussions.

  • Both QA and Developers commit on confusion on Figma files

    • Files are too large, not a clear point to start​

    • Not clear documentation of the product

  • Poor communication and collaboration.

    • Not clear of the outcomes.​

  • Unclear who owns the projects on the UX team​

  • Projects are always urgent​

  • Inexperience with Figma and may not be used to its full advantage.​

  • Projects are still being designed during the developing process.

Updating the Figma Handoff File

Imrpoving the Communication

  • Product Card Components:

    • Designed to link to existing files such as FigJam brainstorming sessions, enabling better context and collaboration.

    • Integrated links to Asana and Jira tickets to associate and track projects seamlessly.

    • Included a dedicated section for research, providing transparency on any conducted studies.

  • Annotation Notes:

    • Clearly outlined changes and set expectations for specific areas of the design.

    • Added accessibility annotations to label expectations for certain pages and components, ensuring compliance with accessibility standards for all users.

ProductCard_5x3__2x.jpg

Product Cards for Links for Better Associations to Projects and Documentation

Annotations_5x3__2x.jpg

Annotations and Accessibility Legend

Bringing the feedback to the UX Team to Create Some Actions

After collecting feedback from Developers and QA, the UX team conducted a workshop, which I facilitated. During the session, we reviewed the survey results, gathered additional insights from the UX team, documented our pain points, and identified actionable items to address the issues.

UX_Brainstorm_Notes_ImproveHandoff_Hero.jpg

UX Brainstorming Session Based on Survery Results

Final Design

The final Figma file incorporates all the components and serves as a template within the UX team’s folder. These components are organized into prepped pages (Dev Handoff and Review) to ensure consistency across all teams working on the file.

Add a Title

ImproveHandoff_Hero.jpg

Final Figma Handoff File

Results from UX Brainstorming

Following the UX brainstorming session, we identified two key areas to address: establishing a clear understanding of the project lifecycle and ensuring consistency in handoffs.

  • Unclear the approval process

  • Unclear projects outcomes

    • Edge cases are not documented when in the design process

    • Goals are not clearly documented when in the design process

    • Projects change in scale during the design process making it unclear what to deliver​

  • Lack of communication of preproduction sites available for review​

  • Figma Lunch-n-learn

Outcome & Reflection

  • Review Cards:

    • Created as a backup for situations where Figma files could not be reviewed directly.

    • Clearly highlighted specific areas where feedback was needed, as well as areas where feedback was not required, to streamline efforts and maintain focus.

  • Figma Plugins:

    • Approved by the team and compiled into an accessible list to ensure consistent usage across the team.

    • Streamlined the handoff process by standardizing the plugins used.

Assets_5x3_Placeholder.jpg

Product Cards for Links for Better Associations to Projects and Documentation

Apps_5x3_Placeholder.jpg

Annotations and Accessibility Legend

Results

Add a Title

The file has been adapted and is still in its early stages. This will be an ongoing project, continually iterated upon as the company evolves.

Reflection

Add a Title

This is a great example of teams coming together to collaboratively address a significant challenge: the lifecycle of a project. All parties worked as a unified team to tackle this problem. As a UX designer, I’m proud and thrilled to see this level of teamwork. Beyond just improving the user experience, our efforts went beyond our routine responsibilities to make the process smoother and more efficient for everyone involved.

  • Design Process Checklist:

    • Aimed to help UX designers ensure all necessary efforts are completed and documented before starting a project.

    • If any items on the checklist are incomplete, designers are required to note why, providing transparency for team members about what has and has not been completed and the reasons behind it.

    • This checklist outlines the UX team’s requirements before a project officially begins.

  • Design Readiness Checklist:

    • Details everything expected to be delivered to developers during the handoff process.

    • Ensures consistency and clarity in what is provided to developers, reducing potential miscommunication.

DesignPreChecklist_5x3_Placeholder.jpg

Design Process Checklist

DesignReadinessChecklist_5x3_Placeholder.jpg

Design Readiness Checklist

bottom of page