738423 - APPS - product page [design]

Status: RESOLVED FIXED

(Marketing :: Design, task)

Comment 1

[Dan Horner]

Copy here: https://bugzilla.mozilla.org/show_bug.cgi?id=738424

Comment 2

[Ty Flanagan]

Attachment: Apps & Marketplace Product Page

Comment 3

[John Slater]

Thanks Ty. There's a lot of good stuff here, and this looks like a great first pass at the page. The look of the page is very nice, so I think I should mainly let Dan weigh in on the content. I know things are a bit in flux with the Marketplace Beta and there may be changes coming to the content or messaging.

Dan, can you review and give us a thorough download of your thoughts? Also this page feels significant enough that we should run it by Jane & Chris when it's ready. Maybe after Ty makes whatever initial changes you suggest?

Visually, the only thing I'll note is that since this page is at mozilla.org/apps, not mozilla.org/firefox/apps, it shouldn't have the Firefox header or background color. I'd assume the more general background and header from mozilla.org instead?

Comment 4

[Tara (musingt)]

Thought:

* it would be really cool if those app icon blocks would animate into the scene when you land on the page and they fall into the bag :)  

* similarly.. it would be cool to add some motion to other parts of the page.  For example, perhaps the app promo blocks have hover states (maybe it's a 10 second demo of the app in action, or something else)

Just think it would be nice if the page had a few moving pieces to it so it feels more alive and exciting.  Though I also realize timing is already tight for getting this live.

Comment 5

[John Slater]

Love the ideas in comment #4!

Comment 6

[Ty Flanagan]

I was thinking the exact same thing for the app blocks falling into the bag!! :D
It can be done in HTML5 too.

examples:
http://29a.ch/sandbox/2010/box2d2/test.html
http://mrdoob.com/projects/chromeexperiments/ball_pool/

Comment 7

[Dan Horner]

Feedback from Design / Marcomms catchup:


1. Action for Ty: Put the categories all in one row with a navigational aid; so that the categories are more prominent
2. Action for Ty: Make the apps rollover to "Visit the Mozilla marketplace"
3. Action for Ty: Section the Mozilla marketplace area, so it looks like one consistent area.
4. Action for Matej: Above the categories / apps - add copy, along the lines of "Here are some (a taster) of the great apps that are on the Mozilla marketplace"
- Make sure it's clear  that these are selected categories of a much wider app availability.
5. Action for Ty: Page needs to be based around Mozilla visual guidelines (not Firefox).
6. Action for Dan: confirm FAQ layout (whether there need to be three or a single link to the wiki)
7. Action for Ty: Try some options for the four secondary CTAs: Email signup, Support, Feedback, Partner with Mozilla.
8. Action for Dan: Requirements: are catching a little too much attention- roll this up into the benefit.
9. Action for Ty: speak to Mike Alexis about making apps fall into the bag, dynamically, and animated.
10. Action for Ty: in app section speak to Mike about randomising app order, and making dynamic.
11. Action for Dan: Copy Pass (in particular the benefit lines - try to shorten)

Comment 8

[Ty Flanagan]

Attachment: Apps & Marketplace Product Page - revised

Comment 9

[Ty Flanagan]

Attachment: Apps & Marketplace Product Page - revised 2

Comment 10

[Dan Horner]

Hey Mike,

The next scheduled launch for the Marketplace is on August 28th; this page will need to go live (i.e. be visible) in the following EN markets only:- USA, Canada, UK, Ireland, Australia.

Can this page now be converted to HTML? The following requirements are needed:

1. As we discussed some months ago; would be awesome if the app icons could 'drop' animate into place - there need to be 9 apps in total.
2. These apps need to be easily customizable (i.e. can be swtiched out with other apps); they will likely be updated once every couple of weeks.
3. This will be an Alpha - not Beta release. Can we change the Beta badge accordingly.
4. There will be some text changes to the copy.

Please let me know when you'll be free to discuss (my Zimbra is up to date). Thanks.

Comment 11

[Holly Habstritt Gaal [:Habber]]

I'm just joining this conversation, so apologies if these things have been brought up before:

- Are there responsive layout guidelines for this page or a separate mobile layout?

- For the featured apps section is there the potential to be more than 3-up at one time? If there is, we should account for this in the design: cycling horizontally through them (still 3-up at a time) either automatically or allow the user to do so.

- I would recommend giving a better indication of what newsletter I am signing up for. I may have already signed up for a newsletter after downloading Firefox. We are on the Apps/Marketplace page, so it may be inferred that it's a separate newsletter for this, but the users may have the same hesitation as I did.



Some side questions:
- Where do the icons come from for the 3 copy points at the top? ("find & discover...", "take apps with you...", etc) Is this part of a system or mozilla library somewhere or just designed for this page?


- How is list of "learn more" items generated? Also, is this standard format for this across a certain level of Mozilla pages?

Comment 12

[Tara (musingt)]

Hey all, I realize the design here is still in discussion (is it?) but I'm going to coordinate a discussion with Particle to help with the animation around the apps.  Ty, can you please post or email me the source file for this design that focuses on the header graphic: the logo, and the blocks of apps, and any related layers.  I'm assuming any further changes to this page is not going to impact the animation.  If I'm wrong, please flag :)  Thanks.

Comment 13

[Mike Alexis [:malexis]]

Steven Garrity is going to build out the page and animation.

Is the PSD ready to hand over? Go live date is 8/17 so we'll need ASAP.

Comment 14

[Ty Flanagan]

Cleaning up the PSD, will have it uploaded in a couple minutes

Comment 15

[Ty Flanagan]

PSD can be found here:

https://www.dropbox.com/s/xby7g0au9c61vo9/FFx_AppsMarketplaceAlpha_Final.psd.zip

Comment 16

[Mike Alexis [:malexis]]

Ty, Holly did some wireframes, approved by product marketing, which update the layout a bit. you can grab them in bug#745033.

Our go live date for the page is Oct 18 so, target hand off for updated designs would be end of week Oct 12.

Comment 17

[Ty Flanagan]

Thanks Mike. 

Ill make the changes and provide updated designs by the end of the week.

Comment 18

[Holly Habstritt Gaal [:Habber]]

Ty, if you have any questions, you know where to find me. Also, keep an eye in the other bug (bug#745033) for copy updates since the wireframes aren't necessarily final for copy.

Comment 19

[Ty Flanagan]

Thanks Holly. I have given Matej a heads up regarding needing possible copy changes :)

Comment 20

[Dan Horner]

Hey Ty - how is design going; anything we can see yet?

Holly - how soon can we get this onto staging?

Thanks

Comment 21

[Holly Habstritt Gaal [:Habber]]

Hi Dan, I believe Mike Alexis can answer that question.

Comment 22

[Ty Flanagan]

Hey Dan,

Still working on updating the design. The original version used an older grid which we have since updated to be more mobile friendly

Comment 23

[Dan Horner]

Hi Ty

There's been a change today. We'll need to replace the "Beta 1" badge with an "Aurora" badge; the full name of this launch is:

"Firefox Marketplace Aurora"

Hope that's ok.

Comment 24

[Diana Livits]

Attachment: Logos & QR codes for Apps Product Page

I've attached the Logos & QR codes for the Apps Product Page.  We are only missing 2 QR Codes for Wired & Tower Jelly

Comment 25

[Diana Livits]

Games:

Word Wars: https://marketplace.mozilla.org/app/word-wars/?src=mkt-search
Solitaire: https://marketplace.mozilla.org/app/pasjanssolitaire/?src=mkt-search
Tower Jelly:  Waiting on Bug Fix

Productivity:

Jauntly: https://marketplace.mozilla.org/app/jauntly/?src=mkt-search
Minimalist: https://marketplace.mozilla.org/app/minimalist/?src=mkt-search
The Pomodoro Technique Timer: https://marketplace.mozilla.org/app/the-pomodoro-technique-time/?src=mkt-search


News & Media:

Twitter: https://marketplace.mozilla.org/app/twitter/#id=393011
Soundcloud: https://marketplace.mozilla.org/app/soundcloud/?src=mkt-search
Wired: Waiting on Bug Fix

Comment 26

[Dan Horner]

Holly / Ty

The two remaining QR codes (Wired and Tower Jelly) will be made available later today

Hopefully that will work in our time frames.

Thanks

Comment 27

[Ty Flanagan]

(In reply to Dan Horner from comment #23)
> Hi Ty
> 
> There's been a change today. We'll need to replace the "Beta 1" badge with
> an "Aurora" badge; the full name of this launch is:
> 
> "Firefox Marketplace Aurora"
> 
> Hope that's ok.

Dan,

Does this mean you can only use Firefox Aurora to access the marketplace?

Comment 28

[Dan Horner]

Yes - sorry Ty. Should have pointed out that the button also needs to be changed:

http://www.mozilla.org/en-US/mobile/aurora/

Will work through the copy mentions of Aurora/Beta when on staging.

Comment 29

[Diana Livits]

Attachment: Tower Jelly QR Code

Tower Jelly QR code attached.  

Tower Jelly URL will be https://marketplace.mozilla.org/app/tower-jelly/

Comment 30

[Steven Garrity [:sgarrity]]

PSDs ready?

Comment 31

[Dan Horner]

Hey Ty - any update on the PSDs? Conscious we're pretty close to launch, so the WebDev guys will need these asap. I'm in all day training but can take SMS on my phone if I need to approve anything.

Ping me the link to the PSD on SMS ([phone]), and I'll approve by SMS.

Thanks

Comment 32

[Ty Flanagan]

Attachment: Firefox Marketplace - Apps - Product Page

PSD:
https://www.dropbox.com/s/6i29rm1y9wtxe5j/Moz_AppsMarketplaceBeta.psd.zip

Will be providing the resized QR Codes and App thumbnails images this evening

Comment 33

[Ty Flanagan]

Attachment: Firefox Marketplace - Apps - Preview Thumb Images

Missing Tower Jelly and Wired images.

Comment 34

[John Slater]

Thanks Ty. Dan, any final comments?

Comment 35

[Dan Horner]

Thanks Ty.

This page looks good. Only comment is on the Marketplace button - I want to avoid sending non Firefox for Andoid Aurora users there if we can help it. Is the plan to only show this button to Firefox 18 Aurora users (with a user agent check)?

If so - approved for Web Dev :) if not, let's discuss asap.

Comment 36

[Dan Horner]

Hi Steven/Holly.

Please can we send the design to Web Dev - will be able to feedback as soon as I see in staging.

Thanks

Comment 37

[Steven Garrity [:sgarrity]]

We're on it. Will post any questions we run into during implementation.

Comment 38

[John Slater]

Just met with Chad & Dan, and we wanted to make a couple of quick edits to the existing:

- two different versions of the page depending on whether the user is on Firefox for Android Aurora or not (with user agent detection):
1. User agent = Firefox for Android 18 (Aurora)
* Blue button is "Visit the Marketplace"
* No drop down / reveal. Click through on button sends user directly to Marketplace
2. User agent ≠ Firefox for Android 18 (i.e. Desktop or other Firefox for Android release)
* Blue button is "Try the Marketplace"
* Drop down appears (upon clicking on the blue button) and functions as shown in the PSD.

- replace the Always Open sign with the Marketplace logo.

Steven, can you make that first change? Would be glad to discuss if so.

Ty, can you supply the proper asset for the Marketplace logo?

Thanks all. Please ping me and/or Dan with questions.

Comment 39

[Steven Garrity [:sgarrity]]

Taking the liberty of closing this design bug, as we're now well into the implementation (tracked in Bug 745033). Any changes can be managed over there.