989437 - Put Maker Party Save the Date Image on the events page

Status: RESOLVED FIXED

(Webmaker Graveyard :: Events, defect)

Description

[Amira]

Attachment: 2013makerpartybanner-events-1.1.png

To connect and make MP prominent on the new events platform we need an image to place on the banner that highlights dates of this years campaign.

The image should link to https://webmaker.org/party 
I attached the image that was placed on the page last year - @Sabrina it might be as easy as updating the dates.
@Cassie can you let us know sizing that is needed.

Comment 1

[Cassie McDaniel [:cassiemc]]

Hey Amira,
We want a Maker Party image to replace this group photo that is currently the feature image on the events landing. So, this image: https://events.webmaker.org/img/front-page.jpg You can replicate that size, bearing in mind it will be cropped at different points at different resolutions.

Please bear in mind, we don't want text in this image for localization purposes. If you want text on the image, you can design it, but let's implement it dynamically.

We might want to reconsider the rainbow-esque triangle given recent events?

ccing Gavin for help with implementation. Sabrina, please assign to him once you've finalized the graphic and we've completed design review. Let me know if you have any Qs.

Comment 2

[Amira]

I will work with Sabrina to edit the graphic for the events page. Given that we can't use the text "Maker Party is....and runs July 15-Sept 15.." - what would be the best way to do a CTA like click here or find out more information? Maybe this is something Sabrina and I can discuss but putting it here for any suggestions Cassie/Gavin might have.

Comment 3

[Cassie McDaniel [:cassiemc]]

(In reply to Amira from comment #2)
> I will work with Sabrina to edit the graphic for the events page. Given that
> we can't use the text "Maker Party is....and runs July 15-Sept 15.." - what
> would be the best way to do a CTA like click here or find out more
> information? Maybe this is something Sabrina and I can discuss but putting
> it here for any suggestions Cassie/Gavin might have.

You can have this text, we'll just want to build it with code (so the final graphic you provide would need to show both: what you want the text to look like as well as the background without the text that we would use to build it). This way we can localize it.

Comment 4

[Amira]

Ahh okay. Thanks for clarifying Cassie. I'll talk to Sabrina and get back to you with an image.

Comment 5

[Erika Drushka]

Cassie or Amira, could one of you please indicate a deadline for this so we can triage it in our Studio Mofo queue? Thanks!

Comment 6

[Cassie McDaniel [:cassiemc]]

I will defer to Amira, but I assume this ultimately needs to be completed by All Hands, April 28. Probably before then would be handy to drive sign-ups before the new site is complete.

Comment 7

[Amira]

Yes, perhaps with the launch of the new site so we can automatically start driving people from the events page to the MP site. But def before all-hands would be ideal.

Comment 8

[Sabrina Ng [:sabrina]]

Attachment: Maker Party Banner Idea for Events Page

Comment 9

[Sabrina Ng [:sabrina]]

Static Mockup: https://redpen.io/zo206f8d3491e7f2e9
Responsive Mockup: http://bit.ly/1iDs3zd
Banner Assets (w/ retina display assets exported @2x): https://www.dropbox.com/sh/5f0xf3035wx7azp/wCQpIsmimZ#/
Banner Colour - MP Yellow: #FFE600

Comment 10

[Erika Drushka]

Final text:

h1: Throw an event!
h2: From July 15 to September 15, 2014, host a Maker Party event to celebrate teaching, learning and making on the web.

Comment 11

[Sabrina Ng [:sabrina]]

design feedback and review

Comment 12

[Amira]

And it should link to the general MP site: http://party.webmaker.org/

Comment 13

[Cassie McDaniel [:cassiemc]]

Hey Sabrina,
Can you flag me for Review ('review' trumps 'need info') and do it on the actual attachment? Thanks!

Comment 14

[Sabrina Ng [:sabrina]]

Attachment: Responsive Design Mockup

Responsive Design Mockup 

*Note: this mockup doesn't use makerstrap breakpoints and type sizes exactly but describes the various states in various viewports better than the static mockup here (https://redpen.io/zo206f8d3491e7f2e9)

Comment 15

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8410432 [details]
Responsive Design Mockup

I think this is good, but what did you decide re. a clickable button? As a user if I see this, I'm not clear what I should do next. Even if it's just a link in the text that says, "Create an event" that would do the trick. R+ if you do that.

Suggest you get Gavin to review the prototype as well... Seems like there a couple pixels off around the bottom left and bottom right squares.

Comment 16

[Sabrina Ng [:sabrina]]

Amira, has it been decided what CTA you'd like for the banner on the events page and where we should link users to?

Also, the pixels are aligned in the exported image assets found here: https://www.dropbox.com/sh/5f0xf3035wx7azp/wCQpIsmimZ#/

Comment 17

[Amira]

I think we decided above that the CTA was "throw an event" and the banner should be linked to party.webmaker.org 

Was there something else I needed to provide sabrina?

Comment 18

[Sabrina Ng [:sabrina]]

Attachment: Responsive Design Mockup

There will be no clickable button instead the banner will be linked to party.webmaker.org

Comment 19

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8418306 [details]
Responsive Design Mockup

I still think it needs a button or a link in the text. It is weird usability that clicking anywhere does not have a clear action associated with it - ie i don't know where I'm going when I click on it. Where *am* I going? Is it to the makerparty site? Based on the current text, I would think it would take me to 'add an event'.

Suggest fixing this by adding a link in the copy, "Find out how to throw your own" that links to the makerparty site.

Also, still 1 pixel off on the bottom squares. See here: http://cl.ly/VNhn I am using FF29 on mac.

Also, Gavin still needs to review the code, so I am flagging him for review.

Comment 20

[Sabrina Ng [:sabrina]]

Okay, I will consult erikad and amira for the copy changes and link to MP site.
Also, the prototype isn't coded it was generated using edge reflow for previewing purposes so the code isn't accurate/usable.

Comment 21

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8418306 [details]
Responsive Design Mockup

Removing Gavin's flag since this will need to be recoded. Thanks for the heads up, Sabrina.

Comment 22

[Sabrina Ng [:sabrina]]

Attachment: Screen Shot of Banner w/ Button

I have confirmed with Amira that the button CTA w/ Learn More label that links to party.webmaker.org is the approach we would like to going with. Let me know if this works with the user flow.

Comment 23

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8419118 [details]
Screen Shot of Banner w/ Button

Looks good. We might want to match the button to Makerstrap, but that can be done in code. Will you file the bug to implement it? Can assign to Gavin.

Comment 24

[Sabrina Ng [:sabrina]]

Banner needs to be built and implemented.

Design Mockup: http://bit.ly/1oaZ4GL
Graphic Assets (w/ retina display assets exported @2x): https://www.dropbox.com/sh/5f0xf3035wx7azp/wCQpIsmimZ#/
Title: Throw an event!
Body Text: From July 15 to September 15, 2014, host a Maker Party event to celebrate teaching, learning and making on the web.
Button Label: Learn More

*Note: Type sizes, break points, buttons etc. to match makerstrap use design mockup as reference only.

Comment 25

[Cassie McDaniel [:cassiemc]]

Hey Gavin, What's the status on this one?

Comment 26

[Gavin Suntop [:gvn]]

Haven't gotten to it as I've been focusing on Profile and a critical security bug. I'll see if I can fit it in this week.

Comment 27

[Gavin Suntop [:gvn]]

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

Comment 28

[Gavin Suntop [:gvn]]

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

Ok, bg should be fixed.

Comment 29

[Gavin Suntop [:gvn]]

Deployed to prod.