762286 - Design mobile apps review list page

Status: VERIFIED FIXED

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

Description

[Christopher Van Wiemeersch [:cvan]]

What we currently have:

- Marketplace: http://cl.ly/2V261C1H1R2j0G0e3K15
- Add-ons: http://cl.ly/2N2b1V2c0n2a0t1G1324

Requirements:

- Breakdown of number of ratings per star value (see current implementation on AMO)
- Button to submit review
- For each review...
  * Title
  * Comment
  * by {Author}
  * Timestamp
  * Permalink
  * Star rating
  * Report/Flag as Spam (see http://i.imgur.com/hRHnT.png for how it looks on AMO)
  * Edit (for Author, Admins only)
  * Delete (for Admins only)

What this bug does cover:

- Display of the breakdown
- Display of the reviews
- What does it look like when I click Report, Edit, and Delete?

What this bug does NOT cover:

- What happens when I click "Submit a Review"

Comment 1

[Sawyer Hollenshead [:sawyer]]

Attachment: Mobile - Reviews

Comment 2

[Sawyer Hollenshead [:sawyer]]

Attachment: Mobile - Reviews breakdown

Comment 3

[Sawyer Hollenshead [:sawyer]]

Notes for attachment 630780 [details]:

- The replies can be hidden by default and toggled with the "# replies" link
- "More reviews" will load more reviews and append to the existing list.

Notes for attachment 630782 [details]:

- The reviews breakdown is hidden by default and can be toggled by clicking the average rating (under the title).

Comment 4

[Christopher Van Wiemeersch [:cvan]]

Open questions:

- What does the popup look like when I click "Report"? (I assume it could be something like the rating breakdown?)
- What is the flow when I click "Edit"?
- When I click "Delete" do we have a confirmation dialog or do we remove the review immediately? And when remove it, what happens to the review (e.g., fade out, gray out, any special effect)?

Assets needed:

- Sprite for stars
- Icon for developer replies (or PSD)

Comment 5

[Sawyer Hollenshead [:sawyer]]

- What does the popup look like when I click "Report"? (I assume it could be something like the rating breakdown?)

We could do something similar to the "Add Review" screen if they need to fill out an input field detailing why they're reporting it.

- What is the flow when I click "Edit"?

Takes them to a screen exactly like the "Add Review" screen, just with the info pre-filled.

- When I click "Delete" do we have a confirmation dialog or do we remove the review immediately? And when remove it, what happens to the review (e.g., fade out, gray out, any special effect)?

Let's have a confirmation dialog for sure. We can fade it out (if the transition looks good on the devices).

Comment 6

[Maria Sandberg [:mushi]]

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. 

The reviews screen hold all reviews (150 char max) and the rating connected to a review. http://cl.ly/2e0o083t0y461Q0T142j

1.  Clicking "back" closes the screen and returns to the app detail page. 

2.  Clicking "write a review" opens a dialogue box where the user review the app. 
http://cl.ly/0o1E1z0i0M3B1C1B2D3e

3.  Clicking "moar" loads 20 more reviews.

---USE CASES---
1. Write review button on Reviews screen
1a) app is free - "write review" button is shown
1b) app is paid, user has purchased - show "write review" button 
1c) app is paid, user has not purchased - show button grayed out and not clickable. Under button, show "you have to purchase this app to review it".

2. Write review screen
2a) user has never submitted a review for this app before - all stars grayed out, textfield empty, 
2b) user has submitted review before - old rating and review pre filled. 
2c) user submits with no rating and empty review - show dialogue saying "Please give a star rating"
2d) user submits with rating and no review - return to reviews list
2e) user submits with review but no rating -  show dialogue saying "Please give a star rating"
2f) user submits with rating and review - return to reviews list and show users review at the top of the list

Comment 7

[Maria Sandberg [:mushi]]

Attachment: .psd - reviews list and add review

This file also contains the mocks for the action of reviewing, layer group is called "add review"

Comment 8

[Wil Clouser [:clouserw]]

Thanks.  Implementation is bug 769058

Comment 9

[Cristian Boldan]

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