970928 - Update layout / UX for events detail

Status: RESOLVED FIXED

(Webmaker Graveyard :: Events, defect)

Description

[Cassie McDaniel [:cassiemc]]

Gavin, where are you at with updating the UX for the details page?

The design was resolved in bug 963611.

Comment 1

[Cassie McDaniel [:cassiemc]]

Kate and I discussed this and think we might want to consider how this page looks without an event image, as there is currently no functionality for users to add an image. Perhaps with a big block of color users can choose that has the event title (need to be careful not to compete too much with /Explore design). Also, what might this look like with the map in-page instead of as an external link.

Comment 2

[Gavin Suntop [:gvn]]

Initial designs: https://bugzilla.mozilla.org/show_bug.cgi?id=963611

Comment 3

[Gavin Suntop [:gvn]]

Initial designs: https://bug963611.bugzilla.mozilla.org/attachment.cgi?id=8365126

Comment 4

[Cassie McDaniel [:cassiemc]]

Attachment: events-detail-mobile.png

Here is a more refined (UI level) version of the wireframes. Hopefully this helps. (NB: am using what is currently on the site for both header and footer nav)

Comment 5

[Cassie McDaniel [:cassiemc]]

Attachment: Events-Detail.jpg

And here's the desktop view.

Comment 6

[Gavin Suntop [:gvn]]

Initial stab w. available data for MVP:

https://redpen.io/j8ymzt
https://redpen.io/p1ksbe
https://redpen.io/ymn61q

Comment 7

[Gavin Suntop [:gvn]]

Cassie, do you want to put your comps in redpen too so I can give you feedback?

Comment 8

[inactivate account for kate]

Comment on attachment 8384824 [details]
Events-Detail.jpg

Looks good to me as MVP, I added comments in redpen https://redpen.io/h5y3zj

I'm going to mark as a plus, butmaybe after one more iteration let's get this implemented

Comment 9

[inactivate account for kate]

In the mobile view, the blue edit button looks a bit awkward visually with that background colour

Comment 10

[inactivate account for kate]

Overall impression: if you are visiting the page directly from twitter or something, it is difficult to tell immediately what the subject matter is (i.e. that it's an event made by an individual contributor)

Comment 11

[inactivate account for kate]

Attachment: https://redpen.io/naxj6q

I incorporated some of the feedback into this iteration, some notes:

- the avatar will have to be captured on creation if we are going to include it. Let's do it, it won't be that hard.

- I removed stuff like tags for web literacy but I thought it looked good in the original design. We should file those improvements + the mockup to make sure they get implemented in a future sprint

Comment 12

[inactivate account for kate]

Also, i didn't include the mobile version because i think the changes are pretty obvious to the first iteration

Comment 13

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8385436 [details]
https://redpen.io/naxj6q

Looks good, left a few things to consider in Redpen.

Comment 14

[Cassie McDaniel [:cassiemc]]

I filed an additional bug to capture the competencies – bug 979418 – which I added to the events2 fast follow sprint. I think we need to work hard to build the web lit UX into events as quickly as we can so we can start testing the hypothesis and connecting various pieces of the site.

Comment 15

[Gavin Suntop [:gvn]]

I'm going to file the Related Events block as a new ticket. It's a reasonably involved feature.

https://bugzilla.mozilla.org/show_bug.cgi?id=979521

Comment 16

[Gavin Suntop [:gvn]]

Regarding the avatar, shouldn't we be using the user's avatar from their Webmaker account? Or are you saying you should be able to also set your Webmaker avatar from the event creation form?

If we do this, let's make a new ticket.

Comment 17

[inactivate account for kate]

We should automatically read the user's avatar when a new event gets created. I agree, this should be a different ticket (filed under R2, https://bugzilla.mozilla.org/show_bug.cgi?id=979534)

Comment 18

[Gavin Suntop [:gvn]]

Attachment: Redpens

Comment 19

[Gavin Suntop [:gvn]]

Comment on attachment 8386997 [details]
Redpens

Here's what I've built for MVP:

960: https://redpen.io/45p2h8
320: https://redpen.io/4vqkne

Comment 20

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8386997 [details]
Redpens

Left some comments on redpen. Looking good, close!

Comment 21

[Gavin Suntop [:gvn]]

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

Comment 22

[inactivate account for kate]

Comment on attachment 8387178 [details] [review]
https://github.com/mozilla/webmaker-events-2/pull/26

Code looks good, a few comments in the PR

I think having the flexible width looks off/decreases readability/makes it harder to find things on the right side of the screen

https://www.dropbox.com/s/mulhxsvbdmv2s23/Screenshot%202014-03-06%2018.59.01.png

Comment 23

[Gavin Suntop [:gvn]]

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

Revised.