Post on 05-Dec-2014
description
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