Closed Bug 895602 Opened 13 years ago Closed 13 years ago

Figure out a webmaker-design for the xray goggles

Categories

(Webmaker Graveyard :: X-Ray Goggles, defect)

Product:
Webmaker Graveyard
Component:
X-Ray Goggles
Platform:
x86_64
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: michiel, Assigned: tompark)

Details

We currently serving the "plain" goggles, but we have the opportunity to (non-invasively) overhaul the look of the goggles to match webmaker.org, and give it copy/UX that is more in line with what we're presenting as the webmaker.org experience.
assigning to Tom!
Assignee: nobody → thomas
Finished a first pass on this. One version makes the bookmarklet button the focal point, the other is based on the old version with "3 easy steps". http://peaceful-dawn-8381.herokuapp.com/index2.html http://peaceful-dawn-8381.herokuapp.com/index3.html Still need to work on the login/publish flow and mobile. Cassie, could you have a look? Everything's open to change. Thanks!
Flags: needinfo?(cassie)
Hey Tom, These look really great, exciting stuff! In the future, you can flag me for an actual "review" on the attachments – that's how we're doing design reviews. But this totally works for now. Some feedback: Overall: * I do like index2 more than index3 - the functionality is more upfront making it easier to get started, and I like that it feels more adult. If we were to use the second option, we'll need to update the illustration and copy to be less kid-like. * how do we account for the user populate that maybe doesn't know what a bookmarklet does? The first experience of doing it can feel a bit choppy / users might not know what's going on. Could potentially add 1.2.3. back next to steps in "getting started" * What can we add to make the user want to do it? I feel like showing explicit examples is too heavy-handed (though we could link to the gallery filtered by goggle makes). Any other ideas? * Are you using the same styles as the other standard template pages? The reason I ask is we want to keep these as consistent as possible. See all the links that are in the footer of the site. * the bottom of the page (on the white bkg) should also have rounded corners, same as the top green part * You may want to integrate these with the other user bars, if even just an image for now, to see what that looks like on these pages. Feedback for http://peaceful-dawn-8381.herokuapp.com/index2.html (my fave) * Reduce spacing above the logo / x-ray goggles headline. We want the vertical space to be equal above and below the "x ray googles: remix and share webpages instantly" text. * "getting started" and "try it out" - are those headlines? They look smaller than what we've used in the standard template. If you got these sizes from the style guide, let me know so I can update it. (or maybe you just need to use H1 instead of H2: see https://webmaker.org/en-US/getinvolved * Add more vertical space above "for mobile users" - looks too squished by the button. If we're going to have the link, would be nice for users to see it and be able to use it. Could add a font awesome icon: http://fortawesome.github.io/Font-Awesome/icon/mobile-phone/ * For mobile users should be "regular" text, and could have the underline on hover, so it's clear that it's a link. * as mentioned above, could make "getting started" and other subheads H1 instead of H2 * might make the rounded corners on the bookmarklet button straight instead of rounded, to match buttons throughout the rest of the site Will hold on feedback for http://peaceful-dawn-8381.herokuapp.com/index3.html since I like the new iteration better. :)
Flags: needinfo?(cassie)
Cassie, thanks for the feedback. Here's an update. http://peaceful-dawn-8381.herokuapp.com/index4.html Changes * Added screenshots to make the bookmarklet install process clearer. Bonus: different screenshots based on browser. * Removed the rounded corners on the bookmarklet button to follow style guide. But I wonder in this situation if users would be better off with a really obvious skeuomorphic button. * For Publish and Report Bug, created small popovers to replace the full-screen dialog. * Various tweaks. Other Issues * To get people interested in using X-Ray Goggles, we could link (with thumbnails) to a few more pages like The Parable. One idea is hacking a "news site" with fake headlines and photos. * Haven't gotten Webmaker sign-in working, so still some work left on Publish. * Eventually I'd like to consolidate the per-page CSS. I welcome any comments.
Is there something we could do on that page to compel users to "do it now, do it right here..."? What I mean is, something stupid easy they could do that page with the Goggles once installed, which would give them an 'aha' moment without having to go anywhere else, and a reason to want to use them in other contexts, vs. just install-and-forget.
Good point, the sooner we have them use it, the more actually reach that "a-ha" moment. Under "Try It Now", we can show an image and guide them through changing it. Basically Supergirl from the old version. And then encourage them to mess around with the rest of the page too.
Exactly. It just needs to be the right thing, and something worth doing, something interesting enough that you'd bother, but simple enough that you wouldn't get discouraged and need more than a minute.
yeah the old page had something like this. https://make-dev.mozillalabs.com/en-US/tools/x-ray-goggles/ We should update this a bit so that it wasn't a) focused on kits, and b) an outdated meme. Putting thinking cap on.
OK, so how about: -create a graphic with the x-ray goggles logo that says "hack me" -similar to the old site, include a link in an input field that contains a url, and in this case, it could be the same logo as above but says "hacked" - put some glasses on the x-ray goggles, ray ban style I also think we should remove the parable of the hackasaurus - its actually not working for me and again, speaking to a younger demographic.
Brett, I like the "hack me" idea. I'll put something together to try out. We'll want someone else to do the final graphic though. I'm also gonna flip the two columns, to defer installation and get people to try out Goggles on *this* page.
resolved! further UX will be new tickets.
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.