Alex Woo

  1. ProtoPie - Production
  2. ProtoPie - Case Study
  3. AccuInsight 3.0 
  4. ShareTalk
  5. Accu Design Kit
  6. NUGU
  7. Astell & Kern
  8. Concept 🔒

About
Resume
Linkedin

©2025 Alex Woo

Exploring UX Patterns in Authoring Tools: 
A Study on ProtoPie and Beyond



❗️Problem 


Users experience limited editing space due to multiple panels reducing the canvas area.
Scale is set to 25%
When the scale is set to 100%
Many panels cover the screen, making it difficult for users to edit as they can only see a portion of the workspace.

🎯 Research : Functional pattern analysis of competitor tools


  • Identify key UX patterns in authoring tools and explore ways to enhance the user experience.
  • Analyze design principles to improve workflow efficiency, editing experience, and collaboration features.
  • Investigate patterns in tools with complex features to design a layout that helps users easily locate the menus they need.

Photoshop
Illustrator
Figma
Sketch
XD
After Effects
Rive
Lottie Creator
PHASE
Origami Studio
PROTOPIE
PLAY
FRAMER
Flutterflow
Webflow

✨ Key Takeaways


  1. Property panel : Properties of all tools are located at the far right of the screen. 
  2. Creation : Creation tools and the toolbar are mostly positioned at the top left (Except for Figma)
  3. Predifined : For tools with higher difficulty in creation, the Creation panel is expanded to offer a variety of predefined assets, enabling users to quickly access the assets they need. 
    (e.g., Framer, Flutterflow, Lottie)
  4. Minimized property bar : When selecting an object, a minimized bar is shown nearby to enhance editing convenience. (e.g., Photoshop, Illustrator, Play)
  5. Aseets : Asset sharing features are secondary and are typically found near the top left, close to the object.
  6. Mode Switching : Visual editing of objects is the primary focus, and if a transition to creating states, timelines, or prototypes is needed, it is typically done through the top right.
    * If this rule is not followed, the options are located at the bottom center.

Common functional patterns




Ideation


1. Interaction design as the primary feature

  • Set the interaction area as the primary focus to strengthen its functionality as an interaction-specific tool.
  • The timeline is collapsed by default and can be expanded when editing is needed.
  • The Property panel will only appear when an object is selected for editing.
As-is, Too many sections and panels






To-be, Interaction design takes priority, and the Timeline is not always necessary, so it can be hidden.

2. Object Selection
Previously, users had to modify values in the far right upper corner even when selecting a Variable from the bottom left.

Option A, Follows a general pattern



Option B-1, Increased the structural proximity of the selected target layers
Option B-2, Speech bubbles further reinforce the association




Option C, Canvas area provides the main controls. 



Option D, The mode can be switched using the Switch button at the top. Since this approach is commonly used in tools like Figma and Rive, users are likely to find it familiar and experience less confusion.




3. Variable Selection
The distance between the Variable list and the Properties panel is quite far, so users sometimes fail to notice it when editing properties. Additionally, since variable properties are very simple, they do not require a large area.
As-is, Users had to modify values in the far right upper corner even when selecting a Variable from the bottom left.



To-be, All assets are managed through the Asset button in the top left corner, 
and the Properties panel is also provided nearby.




Key Questions for Validation 


  • Do users prefer the new editing approach?
  • Does the modified UX pattern disrupt the workflow?
  • How long does it take for users to adapt to the new UX pattern?



To Be Continued....