The problem
Experience Builder – previously Community Builder – was simply not a reliable building tool for the main user base. It was a very fragmented user experience, with no self help, and most sites where being built in code (APEX) by solutions engineers not in the builder. We wanted to increase usage of the builder and empower non-developers.
Experience Builder V1
The existing UI was Severely Impacted by Builder Chrome
Functional Problem Areas
- Top Navigation – Clean up, re-architect, and rationalize the header and toolbar
- Tool Panels – The left and right panels, have inconsistent UI, code, and are a main culprits impacting the canvas.
- Canvas Regions – Implementing canvas highlighting and visual feedback when dragging components to a page.
- Page Creation – is a confusing process. The add page button is literally hidden away.
- Mobile Design Experience – Provide more design control over the mobile experience
Improvements (V2)
Navigation before and after
Improved navigation with floating panels
We added canvas region highlighting along with icon and text, to indicate to the user what area of the page they are putting a component in.
Page Creation was a problem. The add page button was only available on the page manager view. On avg took 45 seconds to find.
Page Creation Improvements. Pages Menu has a button – that currently is now at the top – and page type experience has ben improved to a wizard
Mobile Experience Improvements
A user has contextual control of the mobile runtime view a user sees, by choosing to show, hide or add certain components from a view. Only mobile components/tools are show in the mobile view and vice-versa.
Experience Builder Today
Builder v1 (Before UX improvements)
Builder v2 (After UX improvements)
Some Post builder improvement metrics
Dreamforce Headliner 2 years in a row. UX improvements increased usage by roughly 45%. 43% YOY Growth. Some Fun Design Data: 290 Sketch Artboards, 12 Prototypes, 5 decks, 3 VP presentations.