973968 - Create view for Events landing page

Status: RESOLVED FIXED

(Webmaker Graveyard :: Events, defect)

Description

[Cassie McDaniel [:cassiemc]]

The current list view is too dry upon first landing. We need to convey a sense of excitement and community, as well as feature prominent calls to contribute.

Up for alternate ideas: Do we reintroduce the global map, or have some other way to visualize the idea that events are happening around the world? We agree the map is not a useful way to navigate the listings, but it does the former requirement pretty well.

Comment 1

[Cassie McDaniel [:cassiemc]]

Attachment: Events-landing-v1.jpg

Comment 2

[Cassie McDaniel [:cassiemc]]

Attachment: Events-landing-v2.jpg

Comment 3

[Cassie McDaniel [:cassiemc]]

Some variations on ideas.... Main image could also be a feature for whatever Events campaign is currently going on.

v1:
An emphasis on event guides, with link below the main buttons and at the bottom. The t-shirt at the bottom I was imagining as cutesy animated swinging tshirt gif. The "did you know" could be a random factoid that changes on page reload, or auto changes. The competency tag color bars could just be static and feature our most popular event tags.

v2:
Main difference from V1 is that instead of globe at the top there are marquee type panels that would be cool if they auto-updated with numbers (pull from dashboard?) but not sure how realistic that is. There's also "find event near you" (which I think this should try to do automatically with geolocation). And then the upcoming events are more spaced out, with fewer listed on initial load. Have veered away from using image thumbnails as I imagine most thumbs for events won't be too hot.

Questions:
How dynamic can we make some of these features? Would be cool if they were auto-updating and changing over time.... How might 'find an event near you' work? How do we choose which events to show on first load - or is that a list that is continually refreshing.

Brett, since Gavin and Kate are away this week would love your eyes on these if you get a chance!

Comment 4

[Amira]

Creeping on this bug to say that I absolutely LOVE V2 of the designs that Cassie posted. In line with the auto-updating contributor dashboard that Adam showed in the All- call today we're going to need a way to count the event page numbers automatically and since we have to do that it would be great to put the info there too.

Comment 5

[Gavin Suntop [:gvn]]

Some thoughts...

Both:

- Let's see how this design feels comped at 320 layout. I'm curious what the mobile experience would look like.
- Going full bleed with the hero image may be an issue. Might not, but I need to see how the page layout is set up.

V1:

- Not sure how this map widget is going to work in a dynamic/localizable context. "Reach...teach" can work as live text. The dash trails probably won't work unless they're just purely for decoration. Can you talk through your ideas for this piece? 

V2:

- The circles on upcoming events will be troublesome since they contain live text. At the least it will be difficult to ensure they're the same size. I'd recommend removing them if possible. The rest of the layout can stay the same.

- "Find an event" appears 3 times. This feels a tad excessive to me. I'd lean toward removing the two green buttons next to upcoming events. The find an event and all events functionality are currently all wrapped in a single view (upcoming events). Less buttons generally lead to a clearer/cleaner UX. Perhaps a less emphasized text only link to "See all events" underneath the upcoming events block.

- The multicolored stat boxes will be difficult and possibly problematic in a responsive/localized context. Consider how various numbers or text could break the box layout. I’d recommend something more gridded. We can try some code based approaches to see what works while maintaining the general feel of the design.

Comment 6

[Cassie McDaniel [:cassiemc]]

(In reply to Gavin Suntop [:gvn] from comment #5)

> - Going full bleed with the hero image may be an issue. Might not, but I
> need to see how the page layout is set up.

When/why might this be an issue? Would be good to know for future reference. 

> V1:
> 
> - Not sure how this map widget is going to work in a dynamic/localizable
> context. "Reach...teach" can work as live text. The dash trails probably
> won't work unless they're just purely for decoration. Can you talk through
> your ideas for this piece? 

FYI am leaning away from this direction, but yeah was actually not imagining this as dynamic at all (perhaps animated, but not dynamic).


> V2:
> 
> - The circles on upcoming events will be troublesome since they contain live
> text. At the least it will be difficult to ensure they're the same size. I'd
> recommend removing them if possible. The rest of the layout can stay the
> same.
>

Really feel these upcoming events need more visual interest and am not sure why the circles wouldn't work. Can you explain more? The background circle could always be a consistent size – the content within them is always dates. Might need some adjustment for a range of dates, true.

> - "Find an event" appears 3 times. This feels a tad excessive to me. I'd
> lean toward removing the two green buttons next to upcoming events. The find
> an event and all events functionality are currently all wrapped in a single
> view (upcoming events). Less buttons generally lead to a clearer/cleaner UX.
> Perhaps a less emphasized text only link to "See all events" underneath the
> upcoming events block.

Agree we can remove the additional 'find an event' button below but we do need the link to all events. Was envisioning this as a preview of the listings, not the full list. I think the placement for that button is right.

> 
> - The multicolored stat boxes will be difficult and possibly problematic in
> a responsive/localized context. Consider how various numbers or text could
> break the box layout. I’d recommend something more gridded. We can try some
> code based approaches to see what works while maintaining the general feel
> of the design.

Not sure if this adds a ton of work but was imagining that past certain numbers, the stats could be abbreviated to 15k, 15.2k, etc. Am less concerned about how numbers and text might break the layout at this point - more concerned about the possibility to make them auto update. Is that bit doable? It doesn't need to be exact, but give a sense that the community is large and growing. 

Will update soon with a mobile view. Don't want it to *feel* too gridded honestly – trying to add some skew to break the monotony of this section.

Comment 7

[Cassie McDaniel [:cassiemc]]

Attachment: events-mobile-320-photo.png

Comment 8

[Cassie McDaniel [:cassiemc]]

Attachment: events-mobile-320.png

Comment 9

[Cassie McDaniel [:cassiemc]]

Attachment: events-mobile-640-photo.png

Comment 10

[Cassie McDaniel [:cassiemc]]

Attachment: events-mobile-640.png

Comment 11

[Cassie McDaniel [:cassiemc]]

Will need to rework the desktop version if we go the mobile route with the photo at the top. Am also including a version without the photo, and without the marquee boards for mobile (those elements would be hidden). If we include the photo, something to be aware of is that it pushes the upcoming events further down the screen so you don't see them there immediately.

Have also minimized the "all events" button to just a text link. And added colours to the date circles - figure those could be randomized backgrounds at first. Like the splash of energy it adds.

Also uploaded 640px, as that's the res I test at on my iphone. 

Will need to update the desktop versions and upload new ones later.

Comment 12

[inactivate account for kate]

A few notes here https://www.dropbox.com/s/xm4k64akw2e2bod/Screenshot%202014-02-28%2015.04.22.png

Comment 13

[Brett Gaylor [:brett]]

Definitely liking direction and agree that we should aim for something less gridded in 320 view, since the app could use moar whimsy.

Comment 14

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/4zp7cr

Comment 15

[inactivate account for kate]

Comment on attachment 8386306 [details]
https://redpen.io/4zp7cr

Looks good for MVP to me

Comment 16

[inactivate account for kate]

Attachment: https://github.com/mozilla/webmaker-events-2/pull/27/files

Comment 17

[inactivate account for kate]

Instead of blocking this I think it would be be better to update the numbers in the other ticket, to avoid letting this have to be rebased a lot

Comment 18

[Gavin Suntop [:gvn]]

Comment on attachment 8389197 [details]
https://github.com/mozilla/webmaker-events-2/pull/27/files

Looks awesome, Kate! A couple nits and animate.css didn't install for me (I had to manually bower install it). Otherwise, R+.