designing Salesforce pages without code
Client: Salesforce Platform Team
Goal: improve the experience for administrators to intuitively customize the organization of components on detail pages
My Contributions: review and inventory of previous implementation, competitive analysis, refinement of design patterns, interaction design
Deliverable(s): scenarios, wireframes, presentations, documentation, interactive prototype
Team: Shlomo Goltz, Dan Donovan, Beril Guvendik Maples
The Page Layout Editor (PLE) is an essential tool used by thousands of administrators to customize their SFDC instance. The current generation PLE has usability issues that need to be addressed before my team can lay the foundation for an enhanced feature set and several more years of usage. Customizing Page Layouts is the 4th most common task admins perform while using Salesforce, and it is imperative to improve the framework organization & layout, drag-and-drop functionality, and provide the groundwork for mobile access in the future.
To improve upon the drag and drop user feedback, I utilized a design method from the user experience group at yahoo to break down all the interesting moments in the drag and drop experience. The picture above represents a fraction of all the factors considered, but does give a good representation of the thinking that goes into something that seems simple on the surface.
In order to make the page layout editing experience more in line with other Salesforce tools, I reworked the underlying framework so that a global toolbar appears at top, and the tray of components to drag onto the canvas appears on the left.
The design of the new PLE was created to allow for both mouse and touch input on Windows 8 and other mobile platforms.
I devised a set of standard gestures and taps that are easily discoverable, but wanted to provide additional means of control for power users, such as spread to add (above).