ShapeShifter (Polygonal Annotation Tool - UI/UX, Figma, Adobe XD)
Design a polygonal annotation tool that simplifies the process of labeling objects within images and videos. The challenge is to create a user interface (UI) that is intuitive, allowing users to create and edit polygonal shapes with minimal effort. This tool should work across multiple devices, from desktops to tablets.
Requirements
Polygonal Annotation Creation: Allow users to create polygons by placing points on an image or video and editing the shapes.
Interactive Feedback: Provide real-time visual feedback as users place points or adjust the polygon.
Cross-Device Compatibility: Ensure the interface works seamlessly across various devices, including desktops and tablets.
User-Centered Workflow: Minimize the number of clicks needed to perform actions, including undo/redo, zoom, and snap-to-grid.
Tech Stack
UI/UX Design Tools: Figma or Adobe XD for wireframes and interactive prototypes.
Graphics Tools: Adobe Photoshop or Illustrator for designing UI elements.
Optional Prototyping: HTML5 Canvas or WebGL for web-based prototype.
Work Flow
Step 1: Design the basic interface in Figma or Adobe XD, sketching out the image viewer, toolbar, and polygon editing tools.
Step 2: Add interactivity, allowing users to place points and adjust the polygon’s shape.
Step 3: Focus on a user-friendly layout with icons and tooltips to guide the user.
Step 4: Test the prototype across different devices to ensure compatibility and usability.
Evaluation Criteria
Design & Usability: How intuitive and visually appealing is the UI?
Workflow Efficiency: How quickly can users annotate data using the polygonal tool?
Cross-Device Usability: Does the tool work well across different devices?
Innovation: How creatively does the tool simplify complex polygonal annotation tasks?