Closed Bug 914187 Opened 11 years ago Closed 11 years ago

Redesign homepage

Categories

(Webmaker Graveyard :: webmaker.org, defect)

Product:
Webmaker Graveyard
Component:
webmaker.org
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: cassie, Assigned: kate)

References

Details

(Whiteboard: uxdesign, uidesign, frontend, Mozfest)

Attachments

(2 files)

2013-09-06-Homepage.pdf
4.88 MB, application/pdf
Details
https://github.com/mozilla/webmaker.org/pull/422/files
54 bytes, text/plain
mjschranz
: review+
Details 
Requirements and feedback have been collected so far in: https://etherpad.mozilla.org/webmakerhomepage

Attached are the first few iterations of a revised nav and layout. The jpgs reflect different states of the nav (pages 1-4), as well as how it might expand/contract for mobile (pages 9-11).

Page 5 is an introductory tour, an idea that will likely not be included in this update.

Page 8 is the most recent iteration of the homepage layout based on cross-team discussions and ideas. I'll continue to iterate from that design.

One of the major issues we need to solve is how to clearly communicate to users the value of Webmaker and what they can do here on the site, reflecting the user value discussions we had at the August work week.
Depends on: 914197
Hey Cassie! Good discussion last week, and nice to see the next installment of homepage so soon!

One initial thought re: your Page 8 version built from feedback is that I do think it might look more comprehensive on the bottom 'gallery' portion if we showed more feature snapshots than just one make from the gallery as it is there - this would give us the chance to feature something from Popcorn, something from Thimble *and* something from Xray goggles where applicable. I'd also like to make some edits to the copy of that section, but that is a smaller thing to do.

Overall it does seem that less text -> more images in that portion would be better, especially given the amount of text on the upper 2 sections. 

Just my initial thoughts though!
Hi Kat,
Thanks for this! I also got some additional feedback regarding the "featured" section during today's frontend/UI meeting, so I'll work my way through the next iteration before we address the granularities of copy. +1 to less text, more image.
Kate -
Whiteboard: uxdesign, uidesign, frontend → uxdesign, uidesign, frontend, Mozfest
Depends on: 914343
Blocks: 914634
Assignee: cassie → kate
@ Kate: started a pad for our call today:
http://workopen.org/front_page
So, to check, newest iteration will have no makes at all on homepage? Just trying to understand from far away (ie, not being in Toronto to engage in the discussions!)
@ Kate: Drushka and I used your comp above to start working on copy ideas
* really like that re-addition of the small "makes" gallery at the bottom
* it raises a key insight: the event photo above it really works well with that makes gallery! 
* the two elements tell a great story together: they provide an example of what the people in the event photo are making and doing. 
* and the event photos give context and story to the makes. without it, they seem random and hard to grok. but together, feels like they tell a nice story. + get some dynamic content on the page. love it.
@ Kate: in terms of the "join us" / "sign up" ask at the top of the page -- the first CTA.
* Michelle shared this as an example of how other sites to capture that "I'm interested" moment: http://www.codeyear.com/
* Just thinking of ways to address your point about making "join us" more meaningful / something *you* would actually click on...
Copy + layout recommendations:

* Overall: love the direction and the photo + quote from Kissane. 
* Big button CTA: Text could say "Make and teach the web
* Maybe change home page to be pledge, like: http://www.codeyear.com/. Can work on copy/structure if we like.
* Move up "resources", rephrase "reward" in offerings
* Top nav: Can /events become /party? We want to make webmaker = Maker Party year round.

Sorry this is rough and unstructured. Can say more if needed.
* Thanks Michelle. Drushka is working on copy, so can feed those in
* Kate's going to try and share a prototype on Friday (but I know she's sick, so will have to see)
Per our discussion Kate - would love to see a messaging blurb+photo+icon on the homepage that also covers the 3 other main sections of the website, as well as teach.

Something like a nifty paralax scroll down that covers Explore, Make, Teach, Events

Also +1 Michelle - let's change it to Party. Sounds way more fun and less stuffy than "events"
Also: tossing in feedback from Maker Party / community debriefs. We should keep some featured makes on the homepage! Community members <3 it. It motivates them and shows the color of what we do. Would be a pity to lose.
* +1 -- see Kate's mock-up + comments above. Includes featured makes in a new *context*, under the community photos.
https://dl.dropboxusercontent.com/u/29163874/frontpage-inprogress.png

* The key: putting featured makes in a context of people teaching, learning, making getting together at events, etc. That's the *context* that seems to make them more meaningful.
* need to ensure we hit the Oct 9 content freeze for this, for localization purposes.
@ Kate and others: here's some of the key messages we want to use for copy going forward:

http://openmatt.org/2013/10/02/telling-the-webmaker-story/

* These are based on the talking points Surman emailed yesterday

* Still working on turning them into specific copy against Kate's design, but this is the basic story we want to get across
@ Kate: there's some updated suggested copy for the headline and welcome text here:

http://openmatt.org/2013/10/03/making_the_frontpage/
What to amplify Michelle's comments on the back of the Summit. Lots of great feedback but the stuff that stood out was how great it was for mentors to see their work and their learners' work on the homepage. Not sure that the bottom of the page/below the first screen is going to create the same excitement and sense of recognition that we currently afford our teacher/mentors.

(In reply to Michelle Thorne from comment #14)
> Also: tossing in feedback from Maker Party / community debriefs. We should
> keep some featured makes on the homepage! Community members <3 it. It
> motivates them and shows the color of what we do. Would be a pity to lose.
Comment on attachment 816072 [details]
https://github.com/mozilla/webmaker.org/pull/422/files

Code wise, it's failing Travis & I left some nits on GH.

Testing/design wise:

Weird hover state on Join Us button: https://dl.dropboxusercontent.com/s/ph2yv0s2nx52m84/2013-10-15%20at%209.53%20AM.png

Is it just me or is Tabzilla broken?

Are these 'Start Making' buttons supposed to do anything? They have a pointer as a hover state yet clicking them does nothing? https://dl.dropboxusercontent.com/s/vapf56t6k639ecb/2013-10-15%20at%209.56%20AM.png

Middle 'faux website' image is a bit shorter than the other two: https://dl.dropboxusercontent.com/s/8z1a0fx4pbqaf89/2013-10-15%20at%209.56%20AM%20%281%29.png

So much whitespace too! :p but I guess that's cool.
Attachment #816072 - Flags: review?(dale) → review-
Also,

- CSS transitions (the hover ones) are broken on Safari :(
@ Paula, Michelle - this design is meant to actually put community even more front and center.  After much iteration, we think this strikes a nice balance.  We'll look to iterate on having the ability to more dynamically curate the front page, but for our current milestone, we're going to curate starter makes from the community only.  We'll continue to feature best makes from the community on /explore as well.
@ Kate, as promised, feedback:

-After discussion with #mofocomms, we've settled on the top headline as "We're Teaching The Web" vs "Let's Teach The World The Web"

-"Videos" doesn't work for popcorn maker - we need a new word. I will ping our wordsmiths on this, but need to change that in several place, ie: 
--in the front page under "start making"
--in the nav under "make"

-The blue in the nav - does that jive with our Style Guide?

-I'd like each make under "Start Making" to include who made it

-The icons for web page vs popcorn maker video are odd in that the popcorn ones don't include description.  I'd move for either a common look between all makes that included description, or adding some sort of description on hover to popcorn makes

-when i click on the photos in firefox, they can get out of sync with the quotes.

-Will "Teach, "Learn" and "Get Together" have illustrations?  If not, I feel they should have photos - feels bare
Had a little huddle with #mofocomms - we settled on "multimedia" to replace "video" in the home page and in nav
* Kate will posted updated link here in a sec

** "We're Teaching The Web" 
done

-"Videos" doesn't work for popcorn maker 
** Suggested using "multimedia"

--in the front page under "start making"
--in the nav under "make"

* I'd like each make under "Start Making" to include who made it

Brett: does this list of starter makes on line 60 work? 
http://workopen.org/Webmaker_story

** We're thinking to use that space for whatever we thinkg the *best* jumping off point for newcomers is. ie, whatever's easiest for first-timers to jump into easily. That's why we chose those ones. 


* Will "Teach, "Learn" and "Get Together" have illustrations?  
Yes I believe Kate is working on those
http://webmaker-sandbox.herokuapp.com/teachtheweb

* Kate: can you horizontally flip the MIT image and the Indonesia image? 
It'll make them look better.
@ Kate:

* the "Start making" section might need a bit of context or explanation?
* if so, here's some potential copy Brett and I discussed:

"Webmaker tools  make it easy to learn web skills through making. Dive into one of these community projects to get started."
* Remove filter in "Start Making" section
@ Kate:

Fixes to capitalization, punctuation and copy for:
https://dl.dropboxusercontent.com/spa/udzcfdb4yizzlua/x097ucrz.png

* Teach
Teach the web with interactive tools, activities and lessons plans that are 100% free, hackable and fun

* Make and Learn
Learn web skills by making, breaking and mashing up the unexpected

* Get Together
Join others at a local or Maker Party -- 
or collaborate online
Attachment #816072 - Flags: review- → review?(schranz.m)
No longer depends on: 914197
Comment on attachment 816072 [details]
https://github.com/mozilla/webmaker.org/pull/422/files

Nits, plus missing translated string comments by Ali.

Really great work.
Attachment #816072 - Flags: review?(schranz.m) → review-
Attachment #816072 - Flags: review- → review?(schranz.m)
Attachment #816072 - Flags: review?(dale)
Attachment #816072 - Flags: feedback?
So apparently Bugzilla escapes the part of those links that directly links to a comment. The point is, there's three important comments I made. Don't miss them.
Final fixes to CTA section:

* Link-ify the text for "Teach," "Make and Learn," and "Get Together"
to /teach, /starter-makes, and /events
* remove "100%" from the "Teach" copy
* fix up em dash in "Get Together" copy
* The word "event" is missing: "Join others at a local ***event*** or Maker Party -- or collaborate online"
"Start making" section:

* remove period from "Start making"
* user names are not showing up
Attachment #816072 - Flags: review- → review?(schranz.m)
Ok fixes are in
Attachment #816072 - Flags: review?(schranz.m) → review+
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Attachment #816072 - Flags: review?(dale)
Attachment #816072 - Flags: feedback?
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: