Streamline Your Design Handoff Process
Change Watcher
A Figma feature to track design changes seamlessly, fostering better collaboration for cross-functional teams.
Project Background
Change Watcher was developed during the autumn of 2024 as part of my coursework for MIX203: Design for Media Production at the University of Bergen. Our project received an A grade in the final exam. During our fieldwork at Knowit Experience in Bergen, my student team and I collaborated with a multidisciplinary group of professionals. Through interviews and workflow observations, we identified key challenges in design handoffs. These insights inspired the creation of a feature designed to enhance communication and streamline collaboration between designers and developers.
The Challenge
Developers frequently struggle to track changes made to design files after the handoff phase in Figma. This results in miscommunication, inefficiencies, and delays, particularly in cross-functional teams or when working with external collaborators. Without a streamlined way to monitor updates, developers often miss crucial design adjustments, leading to misaligned outcomes and increased frustration.
The Solution
Change Watcher is a Figma feature that bridges the gap between designers and developers by:
- Providing real-time notifications.
- Tracking updates for specific frames or entire design files.
- AI-generated explanations: Automatically generated summaries of design changes for improved clarity.
- Customizable alerts: Allowing users to tailor notifications based on their preferences.
- Seamless integration: Fully embedded within the Figma interface for easy adoption.
This solution fosters better communication, reduces inefficiencies, and ensures that developers stay aligned with ongoing design changes.
Overall Process
Our Process
Research:
- Preperation and contacting Knowit Experience.
- Conducted fieldwork at KnowIt Experience, including interviews and observations.
- Interviewed a UX designer, a developer, a project manager, and a creative lead to understand their pain points.
- Observed the daily stand-up meeting.
- Defined user personas to understand the pain points of developers and designers.
- Used How Might We to turn existing problems into opportunities and voting
Ideation:
- Ran Crazy 8s brainstorming sessions to generate ideas.
- Used dot voting to refine the most promising concepts.
- Mapped user scenarios to visualize workflows and ensure functionality.
Solution Development:
- After the ideation phase, we created a storyboard to concretize the user journey.
- The storyboard served as the foundation for developing an interactive prototype in Figma.
Prototyping
- After the ideation phase, we created a storyboard to concretize the user journey.
- The storyboard served as the foundation for developing an interactive prototype.
User Testing
- Conducted usability testing via Maze with positive feedbacks from 11 participants.
Impact and Future Potential
Impact
- Enhanced collaboration between designers and developers
- Reduced manual tracking efforts, leading to greater efficiency
Future Potential
- Expanding Change Watcher to other tools like Adobe XD or Sketch
- Leveraging AI for advanced coding support directly within design platforms
