761906 - Design mobile apps detail page

Status: VERIFIED FIXED

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

Description

[Christopher Van Wiemeersch [:cvan]]

Attachment: Before

This tracks the design of the mobile-optimized app detail page.

What this bug does cover:

- Icon
- App name
- Author(s)
- Categories
- Weekly downloads
- Device compatibility
- Install button states (i.e., Purchase [$0.99], Install [FREE], Installed, Purchased)
- Manage button
- Summary + description + developer comments
- Upsell section (to promote a paid version of a free app)
- Screenshot + video thumbnails
- Support section (bug 757300)
- Purchase history, with clear links to Request Support (bug 747144)
- Reviews (at a glance)

What this bug does NOT cover:

- Screenshot/video lightbox
- PayPal purchase flow (i.e., what the modal looks like upon Purchase)
- Statistics (these pages can be mobile-ified later in bug 758472)

If there are any questions, please holler.

Comment 1

[Sawyer Hollenshead [:sawyer]]

Attachment: Full view

Comment 2

[Sawyer Hollenshead [:sawyer]]

Attachment: Mobile - Nav. Menu

Comment 3

[Sawyer Hollenshead [:sawyer]]

Attachment: Mobile - Preview

Comment 4

[Sawyer Hollenshead [:sawyer]]

Attachment: Full view

Removed category since it will now be in the breadcrumb when applicable. Replaced with # of weekly downloads.

Comment 5

[Sawyer Hollenshead [:sawyer]]

Notes for mobile detail page - attachment 630720 [details] ("Full view"):

- Regarding the breadcrumb section: A "back" button was added. This is for when a user isn't browsing the marketplace in a browser. The breadcrumb only shows two levels (previous page and current page)

- "Support Email" and "Support Page" are consolidated to simply one "Support" link. This should take them to the app's support page (http://d.pr/i/YRHE)

- After installing an App on a phone, it should take them to their home screen where their app icon is placed.

- No need to display "Purchased" on the detail page, displaying that it's "Installed" is enough of an indicator. When a refund is provided, the button turns back to a purchase button (even if the app is installed on the device). No need to display that it was previously refunded on this page either.

- Tapping the "Reviews" button reveals the individual reviews page (ie. https://marketplace-dev.allizom.org/en-US/app/evernote-web/reviews/). Ideally the reviews panel would slide in from the right, if the device can do this smoothly and quickly.

- In the footer, a user can tap "United States" (which is the current region's marketplace being viewed). This should take them to a page where they can change what region is displayed.

- Links should have padding to make their "hit area" larger than what they actually appear as text (in the nav. menu, author, "more...", bread crumb)

Comment 6

[Sawyer Hollenshead [:sawyer]]

Attachment: Mobile detail page - PSD

Comment 7

[Christopher Van Wiemeersch [:cvan]]

Mockups delivered - closing for implementation -> bug 758414. Design of purchase+install flow is covered in bug 762333.

Comment 8

[Christopher Van Wiemeersch [:cvan]]

Reopened for modifications.

Comment 9

[Maria Sandberg [:mushi]]

Attachment: App details

Comment 10

[Maria Sandberg [:mushi]]

Updating mocks for this. https://bugzilla.mozilla.org/attachment.cgi?id=635933

The apps detail page is reached by clicking an app from the home screen or browse screen. This page is full screen and should animate in from below, on top of the current context. 

1. Clicking the "back" button takes the user back to the context they were previously in.  

2. Screenshots are shown at the top of the page (if load times aren't too long) and can scroll horizontally. We might add the option of a full screen view of screenshots on click.

3.  Two reviews are preloaded. One should be the most recent of the highest ratings recorded, and the other one the most recent lowest rating recorded.

4.  Clicking the "read x reviews" button will launch the "review screen"(https://bugzilla.mozilla.org/show_bug.cgi?id=762286) where the user can read all reviews and submit their own.

---USE CASES---
1. Screenshots
1a. No screenshots available - collapse so page starts with the reviews
1b. 1 screenshots available - center on page.
1c. 2 or more screenshots available - screenshots scroll horizontally 
1d. Landscape?

2. Reviews
2a) 0 reviews - user has right to review: No reviews shown, show "Write a review" button
2b) 1 or 2 reviews - show the review(s), and the "Write a review" button
2c) >2 reviews, show two reviews (most recent with high rating and most recent with low rating), and "Read x reviews" button.

Comment 11

[Christopher Van Wiemeersch [:cvan]]

Really like the changes. If there is a premium version available, are we okay with listing that way at the bottom of the page (http://cl.ly/2d240M3v2J3e313R421a)? I'm sure it's just distracting for people who want the free version - if we keep it at the top. But - I don't know - if developers want to pitch their paid apps, we do offer this option.

Comment 12

[Maria Sandberg [:mushi]]

Attachment: .psd - app details

Comment 13

[Maria Sandberg [:mushi]]

(In reply to Chris Van Wiemeersch [:cvan] from comment #11)
> Really like the changes. If there is a premium version available, are we
> okay with listing that way at the bottom of the page
> (http://cl.ly/2d240M3v2J3e313R421a)? I'm sure it's just distracting for
> people who want the free version - if we keep it at the top. But - I don't
> know - if developers want to pitch their paid apps, we do offer this option.

Let's leave it there for now, it's easy enough to move this up later.

Comment 14

[Wil Clouser [:clouserw]]

Thanks.  Implementation is bug 769031

Comment 15

[Cristian Boldan]

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