Order Form Customization UX

ClickBank UX

At ClickBank there exists two check out pages for sellers to use, a standard un-styled form with ClickBank branding or a customizable template to add the seller’s own branding.

The existing process at ClickBank for creating a custom check out page relied on a user’s ability to write CSS or afford a developer to code it for them. We wanted anyone to be able to create a customized check out page to match their brand and elevate their funnel.

User Interviews

The Product Manager and I interviewed ten users about what their experience customizing their check out pages was like.

We consistently received feedback about the difficulties around:

  • Writing and editing CSS to create their templates

  • Inability to edit or change a template once uploaded

  • Limitations of only one layout

  • Limitations of single step check outs

  • The out-dated base design and poor attempt at mobile responsive

  • and more nuanced grievances.

To the left are several ideation boards, collaged from early development and research. Ultimately it was decided that the tool was trying to do too much, and we split it into two tools for users to maintain task focus.

Prototypes & User Testing

After interviews and aggregation of feedback, I developed several medium fidelity concepts to take back to our clients.

While we discovered some pieces that didn’t work, such as a pre-screen to determine layout and sidebar vs inline editing of various elements, the feedback around concepts was overwhelming positive.

“I wish you had done this years ago.”

“When will this be live? It looks so much easier than what I am doing now.”

We made revisions to flow of entering the editor and the edit process to have a hybrid of inline editing for ease of use, and some side bar elements for increased discoverability.

High Fidelity Wireframes & Prototypes

We ended up removing some of the modules, such as videos and timers, to have a faster Go-To-Market.

Each of the modules micro-interactions was tested concurrently with development and more client interviews were done with high-fidelity mockups. These resulted in minor changes to interactions such as selecting images and saving/editing/deleting modules to increase usability.