Design poster

[cassiemc]

Filing this as a new issue to document and share iterations.

[cassiemc]

Here's a hand. What do you think @lovegushwa? I'm going to put the final assets in Drive / Launch Assets / Process / Hand. I don't have much more time to put into this today so if you need to pull it down and make any adjustments yourself, please do!

[lovegushwa]

@cassiemc Looking great thank you!!

[edrushka]

@HPaulJohnson - we need to finalize copy on this before end of day Friday (Eastern) so Cassie can sign off and we can hand over to Karen.

[edrushka]

cc @jaykappa

[edrushka]

@HPaulJohnson updating that deadline as cassie will be PTO beginning tomorrow afternoon. Can we get the finalized copy by EOD today? cc @kevzawacki

[HPaulJohnson]

This design is looking good. Per our conversation last night, now that we have a design, I'd love to see a few different variations of messages in this layout and then do a lightening round of feedback from a slightly wider audience before we finalize and localize.

Here are the copy variations I sent around last night: https://etherpad.mozilla.org/webmaker-launch-poster

Is it possible to do some mockups with this design and at least some of these versions?

[edrushka]

Awesome @HPaulJohnson! Let's finalize this pad by EOD and ask @lovegushwa to mock up the best variations.

[HPaulJohnson]

Let's consider the pad final so we can keep moving. @lovegushwa feel free to mock up now.

[lovegushwa]

@HPaulJohnson @edrushka ... out sticker hunting, will send variations shortly.

[cassiemc]

@lovegushwa a note – The purple shadow might be too dominant, it kinda "overshadows" the logo+copy at the bottom, ha-ha.

[lovegushwa]

@HPaulJohnson @cassiemc @edrushka

Hi all, copy options posted, Also a PDF file is up on the drive. Webmaker Launch Assets > 16 Posters - Medium (Jordan) > Webmaker-18x26-copy-options.pdf

1

2

3

4

5

6

7

8

[lovegushwa]

^ Sorry all, a few blank art boards made it into the last comment. Just fixed it. Now using numbers for each poster to avoid confusion. Comment away.

[cassiemc]

@lovegushwa I liked the shadow, it anchors the phone in space, I just thought it was too dark. Should the arm go right to the edge of the page?

@edrushka @HPaulJohnson Was it deliberate that none of the statements have periods? Feels weird not to have them on the taglines that are actually statements, and I think you could have them even on the fragments. It creates a finality to them that looks good in headlines.

[edrushka]

@cassiemc no, not deliberate. Just rushed copywriting ;) We'll quadruple check punctuation for final version.

[HPaulJohnson]

Super helpful to see these in layout form. Here's my favorites, ranked:

• 6 - An app made for you, by you (feel like this one captures an essence of local pride that I like)
• 5 - Imagine the possibilities (this one probably works particularly well with some of the previous designs; more on that below)
• 1 - Discover. Create. Share (the original, still works)
• 8 - Share what you love with friends (strong but not sure we want to emphasize given sharing functionality may be limited in earlier versions)

RE: design, I'm liking it better without the shadow under the phone. With that shadow I was getting an alien vibe from the arm. Maybe that's still lingering in these versions but the arm is pretty focal and I wonder if there's a way to de-emphasize that and draw more attention to what's on screen.

Which brings me to my second design comment: I didn't realize how much I'd miss the ice cream bar :) While I like how clean these are, they are missing a human aspect that the versions with the backgrounds had. With some of these headlines it might be nice to have the visual metaphor of sharing the world around you via this app. Wonder if we should revisit that?

I'm ready/available to discuss any/all of the above. Awesome works thus far.

(P.S. yes, the copy was a rush job. Just trying to get some variations we can share for feedback before tightening up.)

[lovegushwa]

@HPaulJohnson @cassiemc @edrushka Tomorrow 1st thing I'm going to push the design, shadows/no shadows, texture etc, additional illustration etc. It's at a 5.5 or 6 right now, we will push it to a 10, no worries. I just need to spend some time on it. (Buttons, stickers, pins and t-shirts are finished so I can get cracking.)

[HPaulJohnson]

@lovegushwa thanks! love where this is going and excited to see where we land.

[HPaulJohnson]

Meant to add two other small comments re: the URL (mzl.la/webmaker.org).

Can we make it stand apart so that it doesn't get lost in the block of copy? It's the true CTA of this piece and want to make it as clear as possible.

I think webmaker.org is probably stronger than the mzl shortlink. I understand using the shortlink when we have less real estate but, here, seems like full URL would reinforce brand and be more memorable.

[lovegushwa]

@HPaulJohnson @cassiemc @edrushka more iterations to come over the afternoon. I'll see if I can make that URL stand out a bit more. (Oh also I took a stab at the headline :)

A

B

C (starting to experiment with graphic abstractions of the photograph displayed in the app.)

D

[HPaulJohnson]

Thanks @lovegushwa. I'll wait to see the other iterations to compare and make more extensive comments.

In the mean time, I think we can just commit to a single version of the body copy. I'm obsessed with having the word download and free so let's go with this:

Webmaker lets you build original creations on your mobile device in minutes and share them with your friends. Download Webmaker for Android — it's free and open source.

[lovegushwa]

@HPaulJohnson ^ Cool, I'll keep using that version of the body copy as iterations progress.

[HPaulJohnson]

Cool, I'm digging it (C in particular).

Forgot to add re: body copy. Think we should also just go with webmaker.org for URL (instead of mzl.la/webmaker).

[lovegushwa]

@HPaulJohnson is the link just webmaker.org?

[HPaulJohnson]

Yep. I like it because it reinforces the brand a second time. We will likely be reaching people who have never heard of us before so repetition is good. Also, I like that it is a subtle wink to internet.org

[lovegushwa]

@HPaulJohnson @edrushka Back at it in the morning. Tomorrow we will crack it for sure.

[lovegushwa]

E

F

[cassiemc]

These seem a bit off to me – like there is too much going on, and the yellow hand seems the wrong hue for our market (perhaps too realistic, too peachy-white). Are these patterns/textures being used anywhere in the UI? They feel a bit extraneous to me and at this early stage in marketing the app we should be a little more reflective of the app's feel, though I get trying to inject more personality. The purple to green gradient also looks muddy in the middle. Let's follow up in Whistler? @lovegushwa @HPaulJohnson

[HPaulJohnson]

@cassiemc we talked a bunch about the hand with @lovegushwa and @edrushka on Friday. Jordan was going to work with the hue but, generally speaking, the reactions to the hand itself have been mixed. So I'm open to options. We are working against some production deadlines but I trust that in my absence, the three of you can land on something awesome. We should also be as flexible as possible in our schedule so that we get this right (may be that for this first iteration, simple is better).

For copy, let's keep the "Discover. Create. Share" headline. I have some landing page tests running in Optimizely at the moment with all the variations but none have reached statistical significance as of this morning. I'm going to send the details of that test to @adamlofting and if things change between now and when we go to print we can make a headline swap.

For URL's, I've created some country specific URL's so we can track performance of downloads from the poster:

BD: http://mzl.la/discover BR: http://mzl.la/create ID: http://mzl.la/share KE: http://mzl.la/imagine North America: http://mzl.la/make

[cassiemc]

Jordan and I discussed a simpler and more conservative poster design at the workweek after trying a couple different directions. This seems smart given our time constraints. He is going to iterate on possibly including other ghosted ui screens or elements, to emphasize that this is an app poster and not an ad for a cell phone. @lovegushwa can you post the latest here?

[cassiemc]

@lovegushwa will also markup the design with guidelines & provide @jaykappa the fonts, sizes, colors, margins, etc.

[cassiemc]

Update from today's stand:

App Screen/s – up in the air. Not sure if images of people are appropriate. We need images that will work in all locales. We need help from @xmatthewx (given @vazquez's PTO today and tomorrow) to finalize so I'll set up a conversation for later today. Printer: @lovegushwa is handling the printing of these. The main time concern is that the UI will need to be translated so we need to choose those screens asap. Also has major implications on the other digital assets in https://github.com/mozilla/webmaker-launch/issues/34 Deadline: Jordan is hoping to have this finalized by Wednesday, July 1

[vazquez]

Everything is updated on Drive under webmaker-android -> version 2.0

Webmaker-App Content-UI-2015-06-30.sketch Webmaker-Google Play Store Assets-UI-2015-06-30.sketch Webmaker-Mobile-UI-2015-06-30.sketch Webmaker-Landing Page-UI-2015-06-30.sketch

(give it a few minutes for all files to upload)

[cassiemc]

Awesome thanks @vazquez. I don't think I have access to that folder – any way you can add these to 'Webmaker Launch Assets'? Also, @jaykappa is working in CS6. Can you make sure they all have jpg, png or – preferably – svg exports?

[vazquez]

I don't have access to Webmaker Launch Assets lol. Matthew, can you add Cassie to the Webmaker-android folder?

For just the UI elements though, SVG can definitely be done. However, some art boards contain images (the people, or the mountains) that prevent them from being able to be exported in SVG. Matthew, can you help @jaykappa with that?

On Monday, June 29, 2015, Cassie McDaniel notifications@github.com wrote:

Awesome thanks @vazquez https://github.com/vazquez. I don't think I have access to that folder – any way you can add these to 'Webmaker Launch Assets'? Also, @jaykappa https://github.com/jaykappa is working in CS6. Can you make sure they all have jpg, png or – preferably – svg exports?

— Reply to this email directly or view it on GitHub https://github.com/mozilla/webmaker-launch/issues/53#issuecomment-116768601 .

Ricardo Vazquez UI Designer, Webmaker Mozilla Foundation @iamrvazquez http://twitter.com/iamrvazquez IRC: ricardo

[cassiemc]

We've decided to go forward with two directions:

• v1: Refined speech bubble. Try: less contrast with background, an idea bubble instead of a speech bubble, less sharp curves, etc.
• v2: Less phone more app Try: Make the phone feel like less the subject of the poster (an ad for a phone); could ditch the hand, add hint of other screens, or dial back the detail of the phone.

In both versions, let's go with the current screen on the phone that Jordan is using that has the water (could potentially be other snaps for local environments / cities). In the future, particularly in the digital assets, we might want to test two other types of content – one that has humans and one that has a bit more UI. Not sure if a plan for this is currently in place. cc @edrushka @lovegushwa

[lovegushwa]

@cassiemc @edrushka

v1 (refined speech bubble shape, less contrast)

v1 additional options

original

v2 ( also we could use 3 of the 4 screens seen on the app store https://play.google.com/store, Or change the layout and use all 4.)

[cassiemc]

Really like the 3-up option, v2, nice work @lovegushwa. Would also be okay with v1, the top option. I think they both make it feel more human (less about the phone) and add a small bit of visual lavour.

@edrushka can you advise how we should move forward with a decision given @HPaulJohnson is on PTO (unless Paul can comment here)?

[xmatthewx]

Looking nice. I'll let this group continue to drive the direction.

A few thoughts/suggestions on the little details:

• remove the microphone/speaker dots. I've only ever seen them on htc brand phones. A little line or rectangle would be more universal.
• maybe make the camera circle less contrasty.

The text in the app screenshots should be crafted carefully:

• Olympic Mountains >> something more universal? Birthday or Holiday or Graduation 2015
• My grandmothers village >> Sunset with friends (not sure that grandmas conjure ideas of new fun social web. also, it's missing an apostrophe)
• Pick a destination page >> Add a link (more clear even if less accurate)

[KevZawacki]

+1 to @xmatthewx's three copy suggestions.

[cassiemc]

Kev was just looking for your handle! I also like @xmatthewx' suggestions. Can we nail down that first line of copy changes – what would you prefer @kevzawacki between birthday / holiday / graduation? cc @lovegushwa

[lovegushwa]

@cassiemc @xmatthewx @edrushka Hi everyone, check out the updated final version. @xmatthewx thanks for the feedback, I incorporated it. I also cleaned up the sunset image a bit and added little slivers of content images to the top, bottom, left and right of the main image. Let me know if it's all good and I'll get it up on the server for Jay.

[KevZawacki]

Let's go with birthday.

[lovegushwa]

@cassiemc @xmatthewx @edrushka @KevZawacki Hi Everyone, Can some one confirm the final copy? ... Birthday 2015? Also I would like to stay away from numbers since they have the potential to cause problems when translated. (I know that sounds crazy but trust me.)

1

2

3

4

[xmatthewx]

Project title looks to be a wee bit high, rather than centered in header. Otherwise, looking super nice.

[lovegushwa]

@cassiemc @HPaulJohnson @edrushka @jaykappa The final artwork is up on the server: Webmaker Launch Assets > PROCESS

[panaggio]

The last phrase doesn't have any reference to the Web. Is it on purpose?

[secretrobotron]

@KevZawacki ^^

[KevZawacki]

You're talking about "Webmaker lets you build original creations... free and open source"?

We didn't purposefully exclude a reference to the Web. If we feel it's important to include, we can update the phrase to:

"Webmaker lets you build original creations on your mobile device in minutes and share them on the Web. Download Webmaker for Android — it's free and open source. --> Webmaker.org"

But we end up with four instances of "Web" in the phrase. Seem like a mouthful?

[cassiemc]

@KevZawacki I think it's fine as is, I believe @edrushka / @HPaulJohnson have already passed this copy on to translators and would prefer not to change it at this point. cc @lovegushwa @secretrobotron

[KevZawacki]

+1