EVENT UI DESIGN - VERSION 1
Design links:
1) Full Wireframe Design (version 1)
 you are here.
2) Header & Footer - Wireframe & Design (version 2)
 https://docs.google.com/a/givezooks.com/Doc?docid=0Aco6jXvlmpQIZHZmZjc0M18xMTUxNWJzeGJrZ3I&hl=en
3) Registration Area (version 3)
 https://docs.google.com/a/givezooks.com/Doc?id=dvff743_1225dsmz5xhg
All CSS Mockup links:
Header part  + showing more than one day event case scenario
 http://www.givezooks.dev/mockups/event-view?layout=events
Light box for Add to cal
 http://www.givezooks.dev/mockups/event-addtocal?layout=events
Light box for Map it
 http://www.givezooks.dev/mockups/event-mapit?layout=events
Light box for Contact Organizer & become a sponsors
Registration area & Footer:
 http://www.givezooks.dev/mockups/event-view-footer?layout=events
Registration with giving string
 http://www.givezooks.dev/mockups/event-view-cannot?layout=events
Edit overlay

Other links
Product Specs  https://docs.google.com/a/givezooks.com/Doc?docid=0AazG8WXkU8EEZGN3MjRicHBfMjJkOTM1Njh3Ng&hl=en
Events Competitions Analysis  https://docs.google.com/a/givezooks.com/Doc?docid=0AazG8WXkU8EEZGN3MjRicHBfMTd4NWg0OGZnMg&hl=en

Mockup
 Specs
1. EVENT PAGE ( VISIT MODE - USER IS THE ADMIN AND IS LOGGED IN)

Page title:
 Event page ( visit mode - user is the admin and he is logged in)
State:
  • The user is logged in and he is the administrator of this event because he can see an edit and logout link at the top of the page.
  • If the user would be a visitor, the bar would be >> HOME l LOGIN
Specifications:
  • This mockup represent an existing event that the user will start to edit.


Comments:
Should "Check Out" be changed to something like this?
Should we make the "share this event" a little more "front and center" like this ribbon?



Joelle: I guess this information does not fit in the header.
In the header I see only information link to the what, where, when.
Even the Why is not fitting in the header I think.
So I'm thinking the "share this" is more when you are done taking care of your tickets ( end of the flow), or when you want to invite people to come with you (so user already checked the dates and time and certainly also prices) so would be better on the side right column as a stand alone block, or it is when you can not attend but want to let friend know it is a great event to go to, still make more sense to have it on the right side.
I recommend to have it maybe as a standalone box with all the logo of course, as shown on your little screen shot here. but maybe in 2 rows.


2.EVENT PAGE ( EDIT MODE - USER IS THE ADMIN AND THE PAGE HAS BEEN PUBLISHED YET)

Page title:
 Event page in Edit mode
State:
 Admin clicked EDIT on the top nav and the edit bar appeared above the event content page.
Specs:
  • The idea behind this design is to allow the user to work with a WYSYWYG type of UI. (what you see, what you get)
  • A bar will be added above the VIEW MODE of the event page to allow the administrator to administrate every side of the event pages. ( visible to the visitor and not visible to the administrator)
  • Note: Even if the below part should allow the admin to see the exact final visitor version, I feel like placing a PREVIEW button to allow user to verify the page before publishing is safer. But frankly that button is not necessary.

ADMIN Nav Description:
  • At first the admin will be able to see a state sentence. In this case the event page is already live, so the changes will occur as soon as the user clicks SAVE & PUBLISH.
  • Here are the different states:

    • State
      		 Buttons
      		 Sentence
      Draft mode
      		 SAVE AS A DRAFT
      PREVIEW
      PUBLISH
      		 This event is a draft.
      Published mode
      		 SAVE & PUBLISH
      PREVIEW
      		 This event is published, this is preview for you to edit.
      Out of Date mode or Archived
      		 DUPLICATE ( or ) USE AS A TEMPLATE TO CREATE NEW EVENT
      		 This event is out of date and has been automatically archived.

  • Edit Content:
    • Each block of content will react to the mouse over and display a colored border, or/and a transparent layer with a little EDIT on it to intuitively let the user know that he can access a UI to edit the content of that area by just clicking on it.
      (see below)
    • Header Block:
      • Event information on the left and logo or image on the right
      • 3 links will allow the user to have direct action on contacting the host ( note: that link will also be present on top for the event page), to add the event to his calendar and to map it.
Comments:

3.HEADER ZONE

Page title:
 Header zone in Edit mode showing the mouse over on the zone
State:
 Same (admin is logged in)
Specs:
 Edit Content Continue:
  • The user feels he just have to click to edit that zone.
  • All the other zone will behave in a similar way.
Comments:
Page title:
 Header zone in Edit mode showing the form to edit the zone
State:
 Same (admin is logged in)
Specs:
 Edit Content Continue:
  • The user sees a form that matches the order of the information appearing in the header part of the event page. ( from top to bottom and left to right)
  • The form will display asterisks to indicate what is mandatory and what is not.
  • The form should indicate what information won't be editable after launch or after first sell if payable event. (TBD) (I'm thinking here the date won't be editable except if no ticket has been sold yet.. )
  • Logo will display information size and format (TBD)
  • If date is FROM/TO > does it make sense to have TIME START/END ( it does if event is one day, it does not if event is 3 days ) (TBD)
  • The Date icon will display a floating calendar so the user can browse month and pick a day more intuitively. The date will be displayed next to it.
  • The FROM should be mandatory but not the TO.(TBD)
  • The form will contain local help information when it is necessary or will display some links (help?) to allow the user to have access to the information about what needs to be filled. (more work should be done on that TBD)
  • OK will close the light box and update the information on the header.
  • CANCEL will just close the box not saving anything.
Comments:

4. GET INVOLVED ZONE 
Page title:
 Get involved zone showing the mouse over
State:
 Same (admin is logged in)
Specs:
 Edit Content Continue:
  • The user mouse over the Right column blocks
  • Note: In first step visit flow: A template page with the more common blocks (TBD) will be pre-set for the user to start quickly creating an event. Then when the user will go more in deep, actually will start editing each zone, he will have access to UI that will intuitively show him the several available blocks of content.


Page title:
 Get involved zone showing the form to edit the content on that zone
State:
 Same (admin is logged in)
Specs:
 Edit Content Continue:
  • The user clearly 2 steps process.
  • The first one is to choose between available block of content
  • The second one is to show or hide the content in that block
  • (TBD: maybe a WYSYGY format of the block will be more intuitive here than a form.)
  • This UI is a light version or a local version of what the user will have access to under the EDIT LAYOUT TAB.
Comments:
5.REGISTRATION/TICKETS ZONE
Page title:
 Registration/ Ticketing showing the mouse over
State:
 Same (admin is logged in)
Specs:
 Edit Content Continue:
  • The user mouse over the Ticket area
  • Note: In first step visit flow: This zone will be called REGISTRATION/TICKETS as we want to let the user know he can setup an event with simple registration or venues/ticketing type of event.


Screen title:
 Registration/ Ticketing showing the form to setup the type of event.
State:
 Same (admin is logged in)
Specs:
 Edit Content Continue:
  • The user mouse over the Ticket area
  • Note: In first step visit flow: This zone will be called REGISTRATION/TICKETING as we want to let the user know he can setup an event with simple registration or venues/ticketing.
  • Also in first visit, If the user select SIMPLE FREE REGISTRATION, the tab LIST OF VENUES /TICKETS will automatically disappear.
  • The GUEST INFORMATION tab will be in the flow for SIMPLE REGISTRATION as well as for MULTI ENTRIES REGISTRATION.
  • SIMPLE FREE REGISTRATION flow >> (TBD)
Comments:

Screen Title:
 Registration/ Ticketing showing the form to create a first entry or ticket. Applicable to multiple entries selected prior to this screen.
State:
 Same ( Admin is logged in)
Specs:
  • The tab VENUE/TICKET will appear only when the user edit an existing entry or create one.

Screen Title:
 Registration/ Ticketing showing the form to create a first entry or ticket. Applicable to multiple entries selected prior to this screen.
Same screen but with MORE OPTIONS drawer expended.
State:
 Same ( admin is logged in)
Specs:

Screen Title:
 Registration/ Ticketing showing the form to setup guest information step. Applicable to multiple entries type or simple free registration type.
State:
 Same ( admin is logged in)
Specs:
  • If the user select NO at the first question, the rest of the related content should be disabled.
  • When the user click on select all > everything is selected, when he unselects it none is selected from that border box. we can have a link here to allow the user to import more fields from another archived event ( or from a library we should create with the time...)
  • If the user select NO at the second question, the rest of the related content should be disabled.
  • The user can create custom field that will be added to the set he first selected.
  • The preview button will allow him to preview the form before saving.
  • I think that one guest information form is enough. I don't see how we will manage different guest information by tickets or by guest. (TBD)
  • The setup of the GUEST INFORMATION will be in the flow only the first time the user is creating a ticket or setting up the SIMPLE FREE REGISTRATION


Screen Title:
 Registration/ Ticketing showing the list of Tickets or Entries in admin mode.
State:
 Same (user is an admin and is logged in)
Specs:
  • The light box will open by default on the LIST OF VENUES / TICKETS when the admin will want to edit it.
  • User can sort tickets, delete them, edit them by clicking on the label




6. SIMPLE FREE REGISTRATION FORM IN PLACE ( EDIT MODE BUT VISITOR VIEW OF THAT ZONE)


Page title:
 SIMPLE FREE REGISTRATION form with the donation ability enabled available to user to register to a free event.
State:
 Same (User is logged in as an admin)
Specs:
  • Here the form for the visitor to register and add a donation.
  • If the administrator disabled the ability to add a donation, the check box line won't appear.
  • The SIMPLE FREE REGISTRATION FLOW can be only one step if the administrator disabled GUEST INFORMATION step and disabled ADD DONATION.
  • UI TBD too for when the visitor did register.
  • If no users have registered yet, even if the event is published, we could allow the administrator to switch from SIMPLE FREE REGISTRATION MODE to MULTI-ENTRIES (TICKETING/VENUES) mode. See screen below.

Same
Screen Title:
 SIMPLE FREE REGISTRATION form with  mouse over
State:
 Same ( user is an admin and he is logged in)

Screen title:
 SIMPLE FREE REGISTRATION Setup in edition mode.
 with the donation ability enabled available to user to register to a free event.
Specs:
  • As long as the event has not been launched, the user can revisit the settings around FREE REGISTRATION or MULTI ENTRY REGISTRATION.
  • Here the Event was a FREE SIMPLE REGISTRATION type and the admin will either remove add donation ability or switch to the multi entries registration.
  • If the event was a MULTI ENTRIES REGISTRATION with entries created already, the admin will be able to switch to SIMPLE without loosing anything, it will just be disabled/hidden. In that specific case the admin should get a clear message about it :


8. Event Details zone in edit mode

Screen Title:
 Event Details zone in edit mode showing the mouse over on the details zone
State:
 User is an admin and he is logged in
Specs:
 Same behavior describe above


Screen Title:
 Event Details zone in edit mode showing the form to edit the details zone.
State:
 Same (admin is logged in)
Specs:
 Same type of tools that we are using on the admin UI.


9. Corporate zone in edit mode

Screen Title:
 Mouse over on the corporate zone.
State:
 Same ( User is an admin and he is logged in)
Specs:
 Same behavior describe above



Screen Title:
 Corporate logo zone showing form to enter the first logo (flow in first visit) Second visit, if logo exist, the lightbox will open on the list tab, see below.
Specs
  • If event is 3 days long, the admin can sell different price to be display one day, 2 days or 3 days.
  • The admin will be able to sell the size difference too and the link on the logo.
Comments
 Need to be able to handle the case where there is no logo, but instead there is text. For instance, "The Fazio Family". The small, medium and large would still apply.


Screen title:
 Corporate logo zone showing the logo list tab
Specs:
  • Admin can edit each of those logos setting ( size, url and display date or even upload another logo)
  • Admin can delete a logo or hide it by changing the display date.



8.EVENT PAGE ( EDIT LAYOUT MODE )

Screen Title:
 Event page in layout edit mode
State:
 Same
Specs:
  • User can select the blocks he will want to appear on his event page
  • User can then manage the placement of those zones


Screen Title:
 Event page in Edit mode showing the color change UI
State:
 Same
Specs:
  • User can choose theme
  • User can edit the select theme and customize it.


10. MANAGE tab
Screen title:
 MANAGE Tab showing the GUEST INFORMATION FORM
State:
 Same
Specs:
 About the organization of the left nav:
I would prefer to have the address book with the emails



Screen Title:
 MANAGE Tab showing the ADDRESS BOOK
State:
 Same
Specs:
  • By default the Event ADDRESS BOOK should contain all the contact already at the NP level as well as existing DISTRIBUTION LIST




CHECK OUT FLOW

Screen Title:
 Donation process showing the first step ( user identification)
State:
 User is not login yet and have an account.
Specs:
  • The top of the page will display the Header of the event
  • A steps bar will appear to be relevant with the current donation flow and to help the user understand where they are.


Screen Title:
 Donation process - step 2 - credit card flow
State:
 User is logged in
Specs:
  • The user is prompt to enter his credit card and personal information
  • Maybe we should add a sentence near the CONTINUE button (you will be able to review your order before completing this transaction)



Screen Title:
 Donation Flow step 3 - user can review the purchase
State:
 user is now logged in
Specs:
  • User can change the quantity and update the total
  • User can add a donation to the purchase or select NO DONATION.
  • String should be defined by the Admin of the event under the MANAGE tab.
  • Subtotal
  • button to complete the transaction.



Screen title:
 Donation Flow - last step showing the confirmation for the purchase, a thank you for the donation, and a request for Guest information
State:
  • User is logged in as the system created an account even if he had none.
Specs:
  • Confirmation page should thank the user if donation occur.
  • All the information of the purchase should be on the page
  • Confirmation number (?)
  • Guest information request with as many as number of guests.
  • User can decide to fill that now or later, he can send him a reminder email.
  • If part of the information is filled, a message should appear after the submit to let the user know he can come back later to fill out the rest.
  • I think the mandatory field should be indicated to let the user know the NP want the info before the event, but if should not prevent the user to save and come back later. so errors can appear if user mis-enter a phone number or a zip code, but not preventing him to save what has been entered already. so maybe I will design something else than asterisks or add a legend that explain the difference.
  • The user can print
  • Add to calendar
  • Volunteering
  • Contact organizer
  • Share on facebook and twitter