New prototype feature that boosts pathway efficiency
a leading browser-based interface design tool, constantly finds innovative ways to enhance workflows, particularly in prototyping.
While retrieving feedback from a survey, constraints began to surface from users when using the prototyping tool:
Pathway Complexity
When there is an overabundance of pathways on the same layer, they become indistinguishable as they share the same color and stroke weight.
Manual Anchoring
When a mistake is made, the user must manually reconnect the pathway to the correct layer, which is time-consuming and affects productivity.
Point of Reference
Although frame names provide some affordance when selecting frames, the interface's use of a drop-down menu to list all frame names can be overwhelming and confusing. The UI lacks a simple and pragmatic way to visualize how one layer links to another from a high-level view.
.png)
By simplifying the prototypes capabilities, users could created more complex interactions without encountering significant obstacles.
A standard design thinking process was used to discover which features users could leverage to enhance their Figma experience. It involved intensive competitive analysis, synthesizing participant feedback to brainstorm ideas, and iterating on the prototype until a viable solution was achieved.
Usability testing was performed to capture the pain points that could occurred during the prototyping stage. A opportunity arose during validation for users to break the master component link and edit its instances to the desired frame, lower more steps when setting up path flows.
Automate the pathways of the prototype tool to improve workflow efficiency by offering connection options that link them to a master layer or component, ensuring a cohesive flow throughout the prototype.
• Without genuine feedback from designers who actively use the tool, efforts to enhance a complex feature like the prototyping tool can be costly and ineffective.
• Although frame names provided some affordance when selecting frames, the interface's use of a drop-down menu to list all frame names was overwhelming and confusing. Pivoting the UI to a more pragmatic way to visualize how one layer links to another from a high-level view.
• Clear instructions were essential to minimize misuse or confusion regarding the purpose of the new Auto Path feature.
.png)
I empathized with the frustrations expressed by the users during the testing stage. Integrating a new feature seamlessly into an existing product posed challenges in maintaining coherence and usability. I had to ensure that the feature felt native to the platform and served a clear purpose.
