Phase is a digital design platform that allows designers to prototype animations and micro-interactions, focused on UI/UX design and animation tools for product designers.
Unlike typical products with linear workflows, as an editor, Phase allows users to work in any order they choose. Every new feature impacts dozens of existing tools, creating complex dependencies.
The challenge is maintaining system-wide compatibility while supporting unlimited creative freedom.
Conduct research to explore and identify user requirement. Define priorities and discuss the task scope with the Product Manager. Document serve as source of truth for the design goals.
Create UI mockups and user flows, clearly marking all technical details. Ensure that anyone can understand what needs to be done and what has been changed, regardless of their role.
In addition to defining interaction logic rules within Figma, a comprehensive functional specification document is also created. This document outlines boundary conditions and rules for all scenarios of user interactions with the feature, making it easier for engineers to implement during development.
After handing over to development, all functional specifications will be synced up with QA engineers to enable them to draft Gherkin scenarios. Designers will review the Gherkin to ensure all described conditions and use cases are thoroughly tested.
Working at Phase—a fast-paced startup with constant iteration—has significantly strengthened my systems thinking abilities. Designing editor features presents unique challenges that go beyond typical product design.
Each project taught me to see beyond individual features and consider the entire ecosystem, making me a more strategic and comprehensive designer.