Build on-boarding experience about webmaker.org

[secretrobotron]

Based on UX work done in #1073.

[secretrobotron]

blocks #1071

[ScottDowne]

If we're saving the whole page, why not just use goggles for this?

[secretrobotron]

goggles would work technically, but it might be too much tooling for something that we need to keep real simple. Discuss w/ @xmatthewx in #1073 to unlock secrets.

[secretrobotron]

• fake typing in the input box
• click button to save & move on click next button to move on
• actual saving of content
• join screen w/ preview and "agree" box
• connect to login3 modal
• landing (logged in) CTA
• show only x-ray goggles in last phase of login modals

[secretrobotron]

blocks #1082

[xmatthewx]

We might need to scale the type based on character count and width of the entry space. Mobile could especially suffer without it.

[xmatthewx]

Assets in dropbox: https://www.dropbox.com/sh/r5o9qvrfbs9nvz4/AACKOzDYfED0e7NMeAv594gua?dl=0

I included the hand-drawn arrow as png and svg. Let me know if you need any adjustments.

[xmatthewx]

Final splash: https://redpen.io/tw577ea2513e0dcdce
Mobile view: https://redpen.io/md1632a6c53a033b86

Final signup: https://redpen.io/dfb517c69e56050443
Mobile view: https://redpen.io/sfdd780957757e331b

[secretrobotron]

@ScottDowne see #1079 (comment) for copy to use.

[secretrobotron]

@ScottDowne see #1073 (comment) for final design.

[xmatthewx]

Sorry. I said that wrong. After the hamburger appears at < 768px we should jump to a wide mobile layout. Let me know if this gives you any trouble.

before break https://redpen.io/cx28905f7923498c99
after the break https://redpen.io/gk383a15c1f32ac43c

[k88hudson]

• text is misaligned in Chrome + Safari
• text overflow cut off on mobile, text is too big
• heart is pixelated on retina screens
• too much space between heart and 'sharing' (should be even to the distance between I and heart)

Also IMO the typing is too slow

[HPaulJohnson]

On the signup screen can we change "craft" to "make" to keep our language consistent:

"Now, learn to make and share more of your favorite things on the web."

[ScottDowne]

Ali, here is a pull request that fixes the lings above that Kate listed: #1102

[xmatthewx]

Android 4.4.4
Chrome

Alignment of input field is low (as it is in Chrome Desktop). The line cuts across letters. Ok in Firefox on Android.

[iamjessklein]

• on the sign up screen - the spacing between the button and input box is too tight
• on the sign up screen - the button and input box should be aligned left
• in confirmation modal - the checkbox should either have fill or a check. It should have higher color contrast:
  

[alicoding]

The alignment of the text looks good in all three browsers (Chrome, Firefox and Safari)
Looking at mobile view and it does seems to be fine now.
Heart looking good now with retina
Heart and sharing doesn't have much spacing anymore.

[xmatthewx]

Chrome 39.0 & Firefox Dev
OS X 10.10.1

@media - The arrow points to the wrong place in screen width from 480px to 768px.

• Let's match the layout used for < 480px screen for everything less than 768.

[xmatthewx]

⌚ Is anyone using a watch to view webmaker??? ⌚
The arrow breaks on screens less than 220px. ;)

[k88hudson]

Also broken on my tamagochi

[xmatthewx]

FF Dev on OS X 10.10

• Field and Button collide

[xmatthewx]

• Blue background loads with delay on second screen. Can we fetch it after first screen loads?

[k88hudson]

This is what it looks like in IE11:

• next button overhangs on the right side of the screen
• giant x on the right of the text box
• heart doesn't show up at all

[k88hudson]

Actually the broken link on the image seems to be on all retina screens.

[xmatthewx]

Second screen scales nicely. 👍

Nice job handling long strings. Looks good in thumbnail. 👍

• add limit to 50 characters

[xmatthewx]

True or false: the experience would be nicer if we selected all text onfocus for easier rewrite by the user. Anyone have an opinion?

[secretrobotron]

@xmatthewx 👍 i vote yes

[iamjessklein]

👍 i vote yes as well

[secretrobotron]

Filing issues here: https://github.com/mozilla/webmaker.org/milestones/On-boarding%20Experience%20v1

[secretrobotron]

Done :).