Proposify

Layer Selection & Locking

MY INPUT

Customer Interviews • Analytics & Data Tracking • Research • Wireframing & Prototyping • User Experience  • Product Iteration

The Proposify editor is more than just your conventional document editor. Sure, you can layout text, insert tables, add images, all things you can do in other programs like MS Word or Google Docs – but the Proposify editor does much more. Sporting advanced graphical tools similar to those found in applications like Adobe Indesign and Adobe Photoshop, the editor has always been a smash with power users looking to push their creative ideas.

My philosophy has always guided a balance between pushing out new editor features while maintaining ease of use.

CUSTOMER PROBLEM

“When I try to grab ‘X,’ I end up selecting ‘Y’ instead!’

- FRUSTRATED CUSTOMER

Stacking or layering graphical elements on top of each other is a popular feature of the Proposify editor. Layers help users build rich, dynamic layouts that stand out from the competition. Unfortunately, these stacked layers would also cause some customer frustration when revisions were needed.

Attempting to edit something within a stack of elements often required shifting other stuff out of the way. We needed to replenish the confidence of users who wanted to interact with their content. After making edits, these users often need to recreate the original layout—this workaround made for a less-than-optimal workflow.

THE RESEARCH

  • Previous customer interviews revealed that many users were intimidated by the complexity of the current editor user interface.
  • Less than 30% of users in the editor knew of the concept of layer management.
  • The response time of the undo edit function was slow, compounding the trouble reversing accidental edits.
  • A proper solution would undoubtedly yield a decreased number of undo actions per session.
  • User’s lack of confidence to edit their documents led some to describe the entire editor experience as ‘unpredictable’ and ‘glitchy.’

The product journey continued with a review of the competitive landscape. Products like Sketch, Illustrator, and Figma may not have been direct competitors, but they incorporated their own layer management versions. I looked at all the variations of layer management and tested different versions with existing customers. Methods that relied heavily on visual cues seemed to work best.

WIREFRAMING & PROTOTYPING

I wanted to start simple at first. If an element blocked a user from making an edit, why not look at ways of temporarily disabling it? After all, it would be impossible to accidentally select something that wasn’t selectable. The implementation of this concept would need to be rudimentary and instantly comprehendible. The editor interface did not need any extra weight.

PRODUCT SOLUTION

The solution naturally evolved into a combination of both strategies. A simple locking mechanism would disable actions on a locked element, including selecting it. With an object locked, any content underneath could easily be targeted. Subsequent lockings would allow the user to dig into the stack without disturbing the original layout.

The solution worked and was easy to comprehend, but I worried that some power users would find the experience a touch repetitive. We built an entire layer panel that could activate with a right-click. I added visual cues to the lock function, including icon previews and target markers. Layers could also be locked and unlocked with the layers panel, which generated an incredible synergy between the two strategies.