3. Landing Page with formwallAny marketer‘s dream

Redefining eZ Publish User Interface on eZ Publish 5

UX & UI conceptsFirst phase of six end-to-end user stories

to lay the foundations of the new interface.

As a user, I will...

2

...create a new landing page for a whitepaper lead-generation campaign

... edit the marketing editorial (text and image) for the campaign

Intention• introduce the new landing page manager, in the IUI (Insite User Interface)• showcase a new form builder in the context of a marketing landing page• demonstrate how the search discovery can be use at different place of the interface

We will show• create content in IUI• create a form using the form builder• integrate a document to download after completing the form

... create the form used to capture leads / prospects and test it

I will start by simply creating a new “Landing Page” object.

3

As a first thing, I will choose the layout of the landing page

I want to create.(some people call this ‘zoning’)

Create landing pageAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

4

One my page is created, it is obviously blank.

5

I will be able to create blocks in the different zones of the zoning.

The action toolbar on the right showsall the block types available on

my eZ Publish installation.

I will simply drag and drop the blocks I want!

A drop zone, with color code help me to clearly identify the zones.

Edit As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

6

I want a short editorial on the left,to communicate the value of the whitepaper

I want to offer for download.

7

Luckily, I already have content for thatin my content repository,

so I will just reuse and embed this content,an article called “Reaching for the stars”.

For that, I use an “embed object” block,search for my content that I will

then add to the block.

Edit As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

8

Once this is done, I will simply add a “Form” block on the right zone.

9

Once I dragged the block, I enter theform editor. The form editor follow the

same principles: the form can be editedin an overlay, it has both settings and

a collection of fields.

I can simply drag and drop fields from the action bar to the form

and edit them to create my form.

Edit As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

10

Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

11

Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

12

Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

13

Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

14

Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

15

Edit formAs a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

16

Once this is done, I feel I am all set,I can publish and test.

Huray!

17

View As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

18

View As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

19

View As a Power User I want to use IUI to create a new Landing Page and add a form to it to hide a download behind it.

20