1075763 - Design "Remix Your School" page

Status: RESOLVED FIXED

(Webmaker Graveyard :: Design & UX, defect)

Description

[Ali Al Dallal [:alicoding]]

We are trying to move this to a page part of Webmaker.org site

https://blog.webmaker.org/hack-your-school

The problem is that the screenshot is not appealing when we put them on the site, and we need a better one or some custom illustrations.

Comment 1

[Ali Al Dallal [:alicoding]]

Cassie, I'm not sure the process of requesting design assets here... Is this the right way to do?

Comment 2

[Cassie McDaniel [:cassiemc]]

This is a fine way, Ali. Will help me if you know when it needs to be done by?

Will also wait to see if you can utilize the 2-column approach from Made w/ Code... I can assign this once I see another iteration.

Comment 3

[Ali Al Dallal [:alicoding]]

Attachment: https://redpen.io/ekbb0df85449bdd067

I have new version for Mobile and Desktop up for review again.

This is probably need to be done by this Friday if I'm not mistaken.

Comment 4

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8498574 [details]
https://redpen.io/ekbb0df85449bdd067

Have left some comments for Ali / the build, but mostly I don't think the content is quite right yet for this exercise. This needs to be a very narrowed, guided experience, with a clearer ask at the end.

I think we need more time to create the assets and tweak the content here. Matt, possible to finalize this for the next train?

Comment 5

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie: are you requesting copy re-write? I'm not sure what you mean by "content"

Comment 6

[Cassie McDaniel [:cassiemc]]

By content I mean words and images. Have a look at the redpen.

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

* Ok thanks Cassie -- good point. Hannah / ErikaD: can you update the copy?

Comment 8

[Erika Drushka]

Matt, where is the non-mobile version of this? I need to see the *final* "Hack Your School" tutorial that the wizard is pointing to.

Comment 9

[Ricardo Vazquez [:ricardo]]

Attachment: https://redpen.io/p/ncf8bc309a75686345

Copy is not final, so I'm putting this up as Feedback

Comment 10

[Matt Thompson (@OpenMatt :OpenMatt)]

* Erika: I don't know. Let's ask Ricardo.

Comment 11

[Ricardo Vazquez [:ricardo]]

I'm a little bit confused. Wouldn't it be the page that I just designed? https://redpen.io/p/ncf8bc309a75686345

Comment 12

[Matt Thompson (@OpenMatt :OpenMatt)]

* Tweaked and final copy is here: 
https://blog.webmaker.org/hack-your-school

* ErikaD: can you do a final proof on that? Doesn't need a heavy edit -- just a final proofread.

Comment 13

[Matt Thompson (@OpenMatt :OpenMatt)]

* Two notes on the (beautiful) design in: https://redpen.io/p/ncf8bc309a75686345
(added both of these to Redpen)

1) There's no embedded make. 
We don't have an embedded Make for this -- it's a Goggles activity. So the embedded make currently in the left hand column will probably have to come out, or change to something else. (Cassie: can you advise)

2) The first step in this activity is to install the X-Ray Goggles. 
So if there's a way to make that easier for people with the design, awesome. (Could embed the Goggles right in this page, to make it easy for them to drag the bookmarklet onto their toolbar?) But whatever design decides is right for that is fine -- just wanted to flag that that's the first step in the experience we're trying to walk people through.

Comment 14

[Erika Drushka]

Copy looks good. Made a slight tweak to the Tweet instructions. Cassie, can you make sure this section is updated in the mobile version as well?

New copy:

Tweet it. Share the link to your hacked version of the site with the #webmaker hashtag. Who’s got the most creative remix?

Comment 15

[Cassie McDaniel [:cassiemc]]

Ricardo, any updates on the graphics? We should hop on vidyo today to discuss.

Comment 16

[Ricardo Vazquez [:ricardo]]

Hey Matt, 

For #1. Embedded make has been removed

For #2. We can embed the button right in the page, but on mobile we'll need to display a banner or alert saying that the activity won't work on Mobile, cool?

Comment 17

[Ricardo Vazquez [:ricardo]]

Attachment: https://redpen.io/wsb3f0d8304af61562

Comment 18

[Matt Thompson (@OpenMatt :OpenMatt)]

* Nice! Thanks Ricardo. Sounds great.

Comment 19

[Matt Thompson (@OpenMatt :OpenMatt)]

* Ricardo: question: once this is done, are we going to use this template for the other two activities as well? "Make a Music Video" and "Private Eye" as well? 
* (And if so: want me to file separate tickets for those?)

https://blog.webmaker.org/music_video
https://blog.webmaker.org/maker-party-private-eye

Comment 20

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cancel that! They're already here, sorry. 
Bug 1082564 
Bug 1082565

Comment 21

[Matt Thompson (@OpenMatt :OpenMatt)]

* Need to change the title from "Hack your school" to "Remix your school"

Comment 22

[Ricardo Vazquez [:ricardo]]

Attachment: https://redpen.io/wsb3f0d8304af61562

Comment 23

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/wsb3f0d8304af61562

Made some significant changes.

* New feature image style
* updated x-ray goggles illustrations
* moved step 1 into a 'before you start' panel in the left column
* through the above change, and integrating the bonus exercise into an existing step, was able to reduce the steps from 7 to 4.
* footer, as before, presents a single badge

Matt if these changes make sense to you I'll save out assets tonight so Ali can swap them in. Everything should be straightforward to implement (Ali, let me know if I'm mistaken).

Comment 24

[Matt Thompson (@OpenMatt :OpenMatt)]

love. r+

Comment 25

[Ricardo Vazquez [:ricardo]]

Cassie, I left my comments in Red Pen. Minor stuff so I'm R+

Comment 26

[Matt Thompson (@OpenMatt :OpenMatt)]

* Looking awesome guys. Can we mark this resolved, so that we move on to build?

Comment 27

[Cassie McDaniel [:cassiemc]]

Cool, I addressed the redpen comments, now will just save out assets then close. Thanks guys!

Comment 28

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/wsb3f0d8304af61562

The latest.

Comment 29

[Cassie McDaniel [:cassiemc]]

Assets are here:
https://www.dropbox.com/sh/oxfew72t43tpc8a/AAAMWfhUUnb0h5RzZo92DBxka?dl=0

Final reference design:
https://redpen.io/wsb3f0d8304af61562