Salesfusion_logo_header-min.png

Background into the role I played.

I lead the design of Salesfusion’s Page Builder. I worked with their marketing team to create consistency in the brand, so it was carried throughout the web app as well as working with their engineering team. I conducted user research using a systematic UX/UI design process that is user-centered. The following is the story of how I worked through the problem of making it easier for marketers to build landing pages than the first version of their page builder.


pagebuilder.png

What problems are our users facing with Page Builder?

 

The current page builder at the time helped our customers build landing pages, but they were not able to customize the templates enough to their liking. Also starting from scratch was too hard for them and time-consuming. They saw the vision of what Page Builder could be and the power of the rest of the Salesfusion platform.

Understanding our users frustrations and wants for Page Builder, we were starting with simplifying the flow of the page builder and then coming up with the necessary modules that a marketer would want to build a page.

 
whiteboard.jpeg

Ideation on Whiteboards

Ideation on whiteboards allows the team to go to the board and start sketching out ideas of modules we thought made up a webpage for marketers. We ended up calling these items.

 
Screen+Shot+2018-02-15+at+12.58.22+PM.png

Invision Freehand

Invision Freehand became a useful tool to clean up the whiteboard sketches and show low fidelity wireframes. I still use invision freehand for wireframes because it takes one out of the ui and into the information architecture.

 

Redefining the Page Builder experience with Blocks and Items

The Concept of Items

We knew we needed a way for our customers to drag and drop items. We figured this out after trying multiple prototypes that tested drag and drop, a toolbar like Squarespace, and various other designs. Dragging and dropping items from a toolbar seen at all times on the left side scored higher than any other prototype we tried. After multiple whiteboard iterations we decided to go with a base list of what we modules named Items. The following are the items we chose to launch within the Page Builder V2 experience.

  • Text

  • Button

  • Form

  • Image

  • Video

  • Code Block

  • Horizontal Line

  • Spacer

The Concept of Blocks

We also decided it was not enough to have these Items. We needed containers, so the marketer had more flexibility to drag multiple items within a container. We decided to come up with the idea of Blocks for our Page Builder that would house one or various items. We tested multiple ideas again and found that we only needed three different types of Blocks.

  • Section

  • Row

  • Columns


Page Builder V2

The result increased usage from the previous page builder. It also was one of the significant features in the Salesfusion 12 release. Our customers were very thrilled with how easy Page Builder helped our customers build a landing page.

After multiple rounds of user testing and reiterating on Page Builder, we launched the new Page Builder V2 in the fall of 2017.

“Over the years, Salesfusion has done a great job of becoming what I consider an extension of our marketing department.”
– Anonymous Salesfusion Customer

 
 
Page Builder V2 pages could be easily created for all of our new customers after launching.

Page Builder V2 pages could be easily created for all of our new customers after launching.

 
mceclip1.png

Templates

We ended up making new versions of our templates so that customers did not feel pressured with a blank canvas. They could choose one of our themes and easily customize it their brand.

 

Page Basics

After choosing the theme the customer would then fill out a short form to set up the basics for their page.

Once you select a Theme, you’ll be asked to enter essential page information to help manage your page, including:

  • Page Name:  the internal name for your Page.

  • Folder:  the folder where you want to file and organize the page.

  • Page Type:  indicates the type/focus of the page in question.  Used for internal categorization and management.

  • Description: an optional internal narrative of the page.

 
mceclip6.png