766879 - Design mobile homepage

Status: VERIFIED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P1)

Description

[Christopher Van Wiemeersch [:cvan]]

This bug covers the design of the mobile-optimized homepage for B2G.

What it currently looks like:
http://f.cl.ly/items/3b3f0C3r0M0U1y0x2O06/Screen%20shot%202012-06-21%20at%2012.44.02%20AM.png

What this should likely include:
- Featured apps (these are the image dimensions we've been using: http://people.mozilla.org/~smartell/marketplace/style/#apps)
- Categories (we now have custom glyphs to use for each category: https://bugzilla.mozilla.org/show_bug.cgi?id=753098)
- Fancy search box
- Settings navigation

In designing this, we should consider what changes might need to be made to the tablet and desktop versions - as we'll be working on those pages in the next week or so.

Comment 1

[Sean Martell]

Please

Comment 2

[Sean Martell]

Please keep Brand/Creative in the loop on this as we are currently documenting the look in our product style guide.  We need to know what and why things are changing here.

Some requirements:
- branding should not be removed
- keep menu glyph consistent with our other products
- try and maintain the tab shape as it reflects our other products
- please follow the style of category boxes as found on my style landing page

The current design was built based on many consistency factors and I wouldn't want it to stray too far from what it is currently.  We designed it keeping our competition in mind as well as visual consistency with our other products.

http://cl.ly/2T280O0X1C2P2c3y0p3Q/o

Comment 3

[Maria Sandberg [:mushi]]

Attachment: Full home screen

Note - the visuals on this are not final. We will be working closely with shorlander and the smartell from the creative team to iterate on them and make sure we stay consistent with the style guide. 

When a user opens the Marketplace the home screen show apps and categories in a grid. Featured apps can use different sizes like a 2x2, 1x1, 1x2, or 1x3. 

1. From the navigation bar the user can reach settings which holds privacy policies (currently in footer), sign out option, purchased apps list etc. 

2.  Clicking the search button turns the top bar into a search field, in focus and brings up the keyboard. See (https://wiki.mozilla.org/File:Gaia_BB_ContactsBrowser_1.png) for the B2G pattern for this. 

3. Clicking on one of the app tiles opens the details page for that app.

4.  Clicking a category goes to a browse page with apps in that category. The categories will always be in the same place on the screen so that users can re-find them. The category tiles should have descriptive icons as well as its designated color.

Comment 4

[Wil Clouser [:clouserw]]

(In reply to msandberg from comment #3)
> When a user opens the Marketplace the home screen show apps and categories
> in a grid. Featured apps can use different sizes like a 2x2, 1x1, 1x2, or
> 1x3.

The last time that was discussed we dismissed it because we don't have image sizes for all those options.  Is this a change to that?  If an app is featured they'll need to provide us 4 additional promo images?

Comment 5

[Maria Sandberg [:mushi]]

(In reply to Wil Clouser [:clouserw] from comment #4) 
> The last time that was discussed we dismissed it because we don't have image
> sizes for all those options.  Is this a change to that?  If an app is
> featured they'll need to provide us 4 additional promo images?

Ah, I didn't know this had been discussed before. I feel like this is a BD decision, just suggesting that the grid view could support different sizes if we'd like it to. Let's stick to the last decision for now, we could also build this only using 1x1s.

Comment 6

[Christopher Van Wiemeersch [:cvan]]

We use 264x184 for the featured graphics on desktop: http://cl.ly/0M0j32460A013L2V0n0F

The small browse graphics are 120x120: http://people.mozilla.org/~smartell/marketplace/style/assets/app-assets-2.png

And icons are 64x64: http://people.mozilla.org/~smartell/marketplace/style/assets/app-assets-3.png

It looks like we'll now need ~213x253 for featured graphics on mobile: http://f.cl.ly/items/0b0j0y2z2j0G461n3y3y/Screen%20shot%202012-06-22%20at%2012.26.31%20PM.png

Comment 7

[Maria Sandberg [:mushi]]

(In reply to Chris Van Wiemeersch [:cvan] from comment #6)
> It looks like we'll now need ~213x253 for featured graphics on mobile:
> http://f.cl.ly/items/0b0j0y2z2j0G461n3y3y/Screen%20shot%202012-06-
> 22%20at%2012.26.31%20PM.png

This is one of the things I'm going to have to work with creative with to figure out. Could we punt on the big featured one for now (or fake something) and crop/resize the small browse graphics until we get the final word? I'd rather we use hard coded visuals as a last resort than block implementation while we figure out the detailed spec.

Comment 8

[Christopher Van Wiemeersch [:cvan]]

(In reply to msandberg from comment #7)
> (In reply to Chris Van Wiemeersch [:cvan] from comment #6)
> > It looks like we'll now need ~213x253 for featured graphics on mobile:
> > http://f.cl.ly/items/0b0j0y2z2j0G461n3y3y/Screen%20shot%202012-06-
> > 22%20at%2012.26.31%20PM.png
> 
> This is one of the things I'm going to have to work with creative with to
> figure out. Could we punt on the big featured one for now (or fake
> something) and crop/resize the small browse graphics until we get the final
> word? I'd rather we use hard coded visuals as a last resort than block
> implementation while we figure out the detailed spec.

OK, that works for me. The squares are 106x107px and we potentially will have 120px gallery icons. We can crop those for now.

Comment 9

[Maria Sandberg [:mushi]]

Attachment: .psd - home

Comment 10

[Wil Clouser [:clouserw]]

thanks maria!  implementation bug is Bug 769028

Comment 11

[Cristian Boldan]

Verified as fixed in https://marketplace-dev.allizom.org/ on FF19 (Win 7)
Postfix screencast http://screencast.com/t/KZKd9GLT
Closing bug.