1038405 - Design UI for guided landing page experience

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Note: we need the "build" equivalent for this still

Comment 2

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/tqaa51c154cb334704

Trying to design a good ol' fun experience, while encouraging people to get together. Aki referenced this article about madlibs increasing conversion on forms, http://www.lukew.com/ff/entry.asp?1007 and then I doubly liked the idea because it seems a natural way to get two people talking, increasing the likelihood that they might actually get together to do this.

Copy is totally up for ideas, this rough draft is in the etherpad here: https://etherpad.mozilla.org/teach-a-friend

Comment 3

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/ck6afb24d28a9a0f5e

A simpler version in terms of implementation. And perhaps enough for what we need in terms of measuring mentorship...

Comment 4

[Andrea Wood [:andreawood]]

I LOVE the idea of trying a madlib style. I would recommend we try testing the "madlib" input vs. a traditional input before assuming "madlib" will win. It's easy enough to test.

Comment 5

[Aki Rose Braun [:akirose]]

Comment on attachment 8456616 [details]
https://redpen.io/tqaa51c154cb334704

I think we definitely need help on the copy here, because there's too much information we're asking of people and it's too easy to overlook the silly factor, but the direction. I LOVE IT.

Also I agree with Andrea about the animation on this view.

Those things out of the way, they look and feel fantastic. I *want* to interact with them (and kept accidentally almost leaving redpen comments because i was trying to click on the text fields) so F+ on this concept.

Comment 6

[Aki Rose Braun [:akirose]]

Comment on attachment 8456623 [details]
https://redpen.io/ck6afb24d28a9a0f5e

I'm super torn on the gif thing here. Left a comment on the redpen. Dig the layout/flow though.

Comment 7

[Cassie McDaniel [:cassiemc]]

I'm working on an illustration alternate to the gif idea. I don't think a gif is a good idea in combo with the madlib, but I still like it on the simpler version.

Comment 8

[Matt Thompson (@OpenMatt :OpenMatt)]

* On the overall concept and direction: this is so so awesome. Full steam ahead. Cassie let me know if / where you're blocked on copy and I'll get it to you.


side note: 

* This is so good, I want to make sure we optimize for it to be an experience that is easy to come back to. Uncoupled from the sign-up flow. (I think this design does that already -- just want to make this added benefit explicit.) 

* Our users will make use of this mad lib a variety of ways we can't even imagine yet. You can sit a pair of people in front of that screen at a Maker Party event, in a middle school classroom, at an MDN training, from an email invitation, linked from a partner blog post, etc etc etc.

* (So Aki, let's pick a slug that's short & easy to remember, etc.)

Comment 9

[Matt Thompson (@OpenMatt :OpenMatt)]

* a couple notes from Michelle and I on copy:

* 1) let's removed "they did most everything right except"... -- it's a bit confusing and out of place
* 2) let's add something like: "and what we'd like to try / do / make / learn next is... _________"
* 3) maybe we could frame the "what you love about the web" in a way more likely to generate creative and diverse responses. as written, it's like to produce "love" as a standard default response.

Let's work on mad-lib copy together here:
https://etherpad.mozilla.org/teach-a-friend

Comment 10

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/yq33d1ddfcdc6c643c

Some illustration ideas as an alternative to the gif. As mentioned on the redpen I probably only have time to complete one of these. Which is your favorite?

Comment 11

[Matt Thompson (@OpenMatt :OpenMatt)]

* I'd rather not use something "Maker Party" branded. So it can be more evergreen + don't think it adds value. 

* I'd opt for photos over illustrations. Less custom work + stresses human element. It also helps you quickly grok what the ask is: get together with another human at a computer to make and learn something.

* e.g, what you created here:  https://dl.dropboxusercontent.com/spa/6c38yp3crbxni5b/p_0z5dsm.png

Comment 12

[Matt Thompson (@OpenMatt :OpenMatt)]

* the more I think about this, the more I'd love to see the data stored in a spreadsheet or something. I'd like to know this stuff! :) I'd like to know: where are people doing this? why are they doing it? what kinds of skills are they sharing? are there surprises or patterns we can learn from?  This feels like an opportunity to learn more about our users. why not take advantage of that?

Comment 13

[Cassie McDaniel [:cassiemc]]

That photo is fine to use. It's here: https://www.dropbox.com/s/2uo4j1fl52djno6/img-explore-mentor.jpg

I hear Matt's point and am willing to concede, just think we need to be careful not to undermine users' trust. They need to be able to play with this. So any data we get needs to be taken with a grain of salt anyway.

Comment 14

[Matt Thompson (@OpenMatt :OpenMatt)]

sounds good cassie

* here's a suggested tweak to the madlib copy
https://etherpad.mozilla.org/teach-a-friend


[Your name] and [a friend's name] got together one day at [place] to learn about [something you know how to do on the web]. Why? Because the web is [adjective] and we [verb] it! 

I'm struggling a bit with that last sentence. Michelle, maybe you have ideas there?

Comment 15

[Aki Rose Braun [:akirose]]

Comment on attachment 8457049 [details]
https://redpen.io/yq33d1ddfcdc6c643c

Laptop with partially obfuscated logo gmv

Comment 16

[Matt Thompson (@OpenMatt :OpenMatt)]

We updated and finalized the Mad Lib copy here:
https://etherpad.mozilla.org/teach-a-friend

Comment 17

[Cassie McDaniel [:cassiemc]]

Here's the updated design and flow as agreed upon with team: https://redpen.io/vpbe9023041e81c037

Marking this bug dead done. If any issues, please file new bugs!