Design MOI splash page for MWC

[edrushka]

Scope: https://studiomofo.etherpad.mozilla.org/MOI-splashpage-kickoff

[edrushka]

Depends on finalizing copy in Issue #1170

[sabrinang]

Content to Reference

• Creative Brief
• Copy Content for Website
• Local Content Research / Webmaker Field Research Reports
  • Bangladesh
  • India - ?
  • Brazil - ?
• Whitepaper
• MIT Paper pdf and link
• Bangladesh Video
• Press List - additional testimonials TBD
• Partners List - TBD
• Wiki (https://wiki.mozilla.org/Mobile_Opportunity)
• Mobile Opportunity Blog
• Photo Resource
• Webmaker app open beta launch - link TBD

[HPaulJohnson]

Latest version of Bangladesh report is here: https://webmaker-dist.s3.amazonaws.com/reports/bangladesh.pdf

RE: Content strategy. The post from blog.mozilla.org was reposted on the MOI post as our introduction to the new blog (http://blog.mozilla.org/m4d/2014/12/19/welcome-to-the-new-mobile-opportunity-blog/)

[sabrinang]

@HPaulJohnson thanks Paul! I'm structuring the content for the website now and sorting out what is missing as I do some sketches for next week.

[edrushka]

Sorry everyone. I accidentally had another bug going in the wrong repo here: MozillaFoundation/plan/issues/243

edrushka commented 4 days ago

Sabrina is on point for this, but could use some input from Webmaker designers, as this page will be hosted on webmaker.org Erika Drushka edrushka added p1 needs-design labels 4 days ago Erika Drushka edrushka added this to the January 30 milestone 4 days ago Erika Drushka Collaborator edrushka commented 4 days ago

Still learning how to use meta-issues in Github so not sure how to connect this, but here is the larger issue: #234 Andrew Sliwinski thisandagain added the engagement label 4 days ago Cassie McDaniel cassiemc removed the needs-design label 4 days ago Cassie McDaniel Owner cassiemc commented 4 days ago

Needs a RACI. Here's a suggestion, based on the RACI in #234 (which doesn't quite match our production RACI). Adding myself as design quality & removing the 'needs-design' label, since Sabrina will be doing the bulk of the work. RACI

Phase: Design
Owner: @edrushka
Decision Maker: @HPaulJohnson
Consulted: @davidascher @benrito @thisandagain
Design Lead: @sabrinang
Development Lead: n/a
Quality Verifier: @cassiemc

@edrushka please feel free to adjust as needed! Erika Drushka Collaborator edrushka commented 4 days ago

@cassiemc thanks. Could we hook @sabrinang up with a Webmaker designer at some point to advise on what current visual requirements are for webmaker pages? Or is Makerstrap still 100% current? Cassie McDaniel Owner cassiemc commented 4 days ago

Yes, she can connect with me at any time, but Makerstrap 100%, currently.

Probably good idea to have a kickoff, @edrushka. @thisandagain may want to advise on best practice here. OpenMatt OpenMatt changed the title from Design splash page for MWC to Design splash page for Mobile World Congress 3 days ago Cassie McDaniel Owner cassiemc commented a day ago

Hey @edrushka, I see some milestones related to this exercise in this etherpad: https://studiomofo.etherpad.mozilla.org/MOI-splashpage-kickoff (Line 137)

Deadline Feb 23 QA Feb 16 Launch Feb 12 Code Review Feb 5 Build Done Feb 4 Build Start Jan 28 <-- concerned about this one Design Finish Jan 27 <-- this seems like it should technically be the end of this heartbeat, Jan 30 Design Start 19 Copy Finalized Jan 16 Content Finalized Jan 16

Worried that we're trying to compress the design cycle here, which will be hard on @sabrinang given she hasn't started yet as she was/is finishing the net neutrality stuff until tomorrow. I may have misinterpreted the timelines, but I think it would be great if we could just focus on finalizing design by next Friday, which would sync really well with our heartbeat.

I will try to help move this ahead a bit with some wireframing, so we can do this speedily, just wanted to flag it. Let me know! Erika Drushka Collaborator edrushka commented a day ago

@cassiemc Agree this is tight and that finalizing design in sync with this heartbeat would be ideal. By pushing everything 3 days, the milestones become: Milestones (revised Jan 22)

Deadline Feb 25 QA Feb 23 Launch Feb 17 Code Review Feb 10 Build Done Feb 9 Build Start Feb 2 Design Finish Jan 30

That still gives @mmmavis the same amount of days for the build. Work for everyone? Erika Drushka Collaborator edrushka commented a day ago

Oh jeez - I'm making a mess of Github!

@thisandagain HAAAALP! ;) I want all this information to go in this ticket on mozilla/webmaker.org like you showed me mozilla/webmaker.org#1167 Cassie McDaniel Owner cassiemc commented 8 hours ago

@edrushka sounds good to me! I'm not sure exactly what you're trying to do here but ping me when you wake up if @thisandagain is busy. Erika Drushka Collaborator edrushka commented just now

Guys, I'm going to paste this thread into the correct repo: mozilla/webmaker.org#1167 and close this bug as the /plan is not where this work should take place. Sorry for the confusion! Erika Drushka

Write
Preview

Markdown supported Edit in fullscreen

Attach images by dragging & dropping or selecting them.

[edrushka]

@cassiemc design discussion is here now

[cassiemc]

ok! @sabrinang please ping me as needed.

[cassiemc]

@edrushka I think we want to keep the other issue open so it appears here: https://build.webmaker.org/now I'll reopen it. Think of it as the Meta bug.

We can continue to track the details of the work here, though.

[sabrinang]

I am iterating on the content structure (wireframes) and posted it on redpen and will be meeting with Ben tomorrow to sort out content

[thisandagain]

Amazing! @sabrinang India report hasn't been written yet (we are still in the field) but will share once the first draft is created. Kenya report is available here (permalink): http://mzl.la/kenya

[cassiemc]

My first reaction is that this page is way too long / dense. I wonder if some sections can be consolidated? ie. 'partners' and 'collaborate with mozilla' – perhaps partner logos could just be at the bottom of that section. It's really quite a lot to take in and a bunch of sectioning, making me as a user unsure where I am supposed to go. I'd try to pare down or group the written content, too. cc @edrushka

[edrushka]

Sabrina, Ben and I decided the next iteration will have:

• "collaborate" section integrated with "think global, act local"
• no press hits section (these will go in a blog)
• no email sign-up (there is no mailing list)

This should cut down the length.

[cassiemc]

That sounds good. I might too consider larger header groupings. Just a suggestion, not sure what that would look like, but might make the page easier to parse. Can assess with the next wireframe or design iteration...

[sabrinang]

COPY CONTENT NEEDED @benrito - please provided content/copy updates to the now "enabling digital creativity" section where you suggested "Might also suggest some copy edits for the build stage (more concise, mention Android)" and the "collaborate with mozilla" section - "I can provide replacement copy for the next iteration. Should be two sentences or so based on the third bullet."

ASSETS NEEDED @HPaulJohnson - https://github.com/mozilla/webmaker.org/issues/1175 Collect partner icons for MOI splash page for MWC -- please provide partner logos ASAP (mockup are just placeholders I found and need official logos)

You can refer to this updated redpen

VIDEO content & copy --> TBD next week

[cassiemc]

@sabrinang I left a number of comments on the redpen here: https://redpen.io/jr74e249791aad235b, ping me if you have any questions about them!

[benrito]

Suggested edits:

Mozilla is building Webmaker, a free & open source mobile content creation app.

Webmaker helps first-time smartphone users become creators of a Web that will improve their lives and communities, by making simple apps for things like promoting a small business, sharing community news, or building a lesson plan for students.

Webmaker is available in over 20 languages and backed by a growing community of volunteer digital skills mentors. It will be available for Android, Firefox OS, and modern mobile browsers later this year.

Partner with Mozilla

Let’s ensure the next generation of web users have the skills to create a locally relevant web. If you are a mobile operator or NGO, partner with us to offer digital skills training to your most engaged users. We are a global movement with volunteers in over 30 countries.

[benrito]

Two requests on design:

1. can we make sure the final design has at least one image of real people smiling and working on their phones? The one that's in there right now is really good.
2. can we use the locales & scripts as they appear on webmaker.org? e.g. Bangla becomes বাংলা

Thank you!

[lauradereynal]

Hey Guys, I love the current design ! I agree with @benrito 's point on picture. Was wondering if we could have a couple of pictures in a normal size ? It would illustrate the "understanding users" section. Thanks Laura

[benrito]

It's true that we'll have more credibility/empathy with more visual reminders of the humans that are just now getting online in the developing world.

Looking at current design, perhaps the video section offers some opportunities to have more human beings?

On Feb 3, 2015, at 4:57 PM, Laura de Reynal notifications@github.com wrote:

Hey Guys, I love the current design ! I agree with @benrito 's point on picture. Was wondering if we could have a couple of pictures in a normal size ? It would illustrate the "understanding users" section. Thanks Laura

— Reply to this email directly or view it on GitHub.

[edrushka]

Thanks for your feedback. Cassie and Sabrina have been through a number of photo treatments, trying to keep the human element on the page. There's a little bit of room to play with the video box, but aside from that we need to lock this design. If there are any outstanding, must-fix issues, please list them here. Thanks!

[HPaulJohnson]

A few final tweaks based on comments in previous redpen iterations:

• I think the CTA buttons at the top should be given equal weight. We value both of them equally.
• "Explore" in the "explore the open beta" is too passive. I would like to change it to "Try to the open beta"

[sabrinang]

When you mention equal weight - do you mean to visually treat them both as buttons (see below)? In a previous mockup - there were feedback on avoiding this but I don't know the metrics behind the two cta conversion and just mentioning this so your aware. I can revise to make them equal again.

Also, you mean --> "Try the open beta" instead of "Try to the open beta" ?

[HPaulJohnson]

Yes, that's what I meant by equal weight. Normally, I'm a strong advocate for a single CTA but this is a special audience who will be pre-qualified by the time they reached the page. I feel like this is one case in which it makes sense to "break the rules" and provide two equal CTA's as they are both important to us.

Yes, to "try the open beta" - typo on my part, thanks for fixing.

[thisandagain]

:+1:

[sabrinang]

R? @cassiemc Desktop view: https://redpen.io/sveed4aec568a4488a Mobile view: https://redpen.io/wjc1c9851c3fd2c80a

[cassiemc]

No blockers, R+! Left a few comments in the redpen for consideration. I think we should tweak the globe illustration once more, but that is it.

[cassiemc]

@sabrinang So here's an option for the hand if that helps. I can't tell if it's an improvement: https://redpen.io/kr737a53781345d96e

Here's the .ai file: https://www.dropbox.com/s/exr6vgnm1cbp8ft/mozilla-webmaker_mobile-opportunity-initiative-MWC2015_illustration-mobile-hand-cm.ai?dl=0

[mmmavis]

Build is done. Please enter style tweaks in a new ticket :)