Event, detailed wireframes

[modulist]

This is a series of designs for the Event home page and the Event session schedule. We're using the Florida DrupalCamp 2018 as our pilot project, with dummy information from another well-attended DrupalCamp.

Mobile home page

In this screenshot, I'm only showing the top screen on a mobile device. You can make out the top icon-based navigation, which is designed to be universal to all event sites.

Here's another screenshot, showing how the menu works as sticky at the top of the screen, and how the Register Now button will be fixed at the bottom of the screen:

Desktop home page, full length

Here's the same page, as seen on a high-resolution desktop screen.

Mobile session schedule

This shows how we can display sessions one track at a time. You can see an icon-based menu that allows you to swipe left and right to see other tracks. The use case we're designing for is a user at a conference looking to see which sessions to attend. The individual listings are expandable, and the titles will link you to a full description on another page.

(I still need to add navigation for multiple days.)

[shaal]

Ideas for calendar move session type's icon - to the left, in the space below the time of session. move the difficulty ranches - below the time of session (take out session type's icon from this view, because the whole list - is just for that track.

add a horizontal red line, that show the current time (changing its position using javascript)

Add a view "My Calendar" - using that same layout of agenda, with all the events I RSVP'd for.

add a button, to toggle between displaying the session name and the speaker name

When scrolling down in mobile, start time of session should always be visible, sticky to the top, until you scrolled enough for the next time to override it and get sticky on top instead.

Add tabs (on sides/bottom) to switch the day viewing

add an option to show agenda by room

[shaal]

@Mercergirl pointed out the lack of search on the website.

How about the search icon become full screen search, with some pre-selected suggestions below? https://tympanus.net/Development/MorphingSearch/

[Solamsnake]

I was thinking about a sitemap also... Usually, when I go on a website, I don't pay attention to the menu or the content, I scroll down to the footer and check the sitemap because for me this is the quickest way to find what you are looking for.

[modulist]

Let me give the full-screen search some thought. I love how it works, and it's beautifully designed -- but I'd be cautious about implementing this on a mobile device.

Modal dialogues take over the entire screen, and it's a known fact that they sometimes create UI traps where the user is unable to navigate out. I fear that the same may be true of the morphing full screen search.

I really like the card grid of suggested topics. We could do Sessions, Speakers, and Quick facts. Sessions and speakers are dynamic, but quick facts would likely be static. I see that each column may need to be its own view or block.

BTW, Sara Soueidan comes up first on their people list. I'm a huge fan of her work.

I think this is a great add-on feature but not MVP. I hope we get a chance to work it into the the FL Drupalcamp site in the spring.

[modulist]

@Solamsnake The footer/sitemap is an empty canvas right now. I agree that it will be the place for important but less-traveled links like volunteer opportunities, etc.

[Solamsnake]

@modulist Yes I agree :) I know you must have a bunch of stuffs to do but still you already did a great job 👍