Store Page

DB Schema / Database Migration

Since hotjar was unofficially introduced to the product team, we can monitor recordings of user interaction on the website, which indicates that the majority of users find the store page’s information is hard to comprehend.

Store’s Picture; design is out of date, picture display layout is not effective (50, 25, 25). Causes picture display in cropped, losing opportunity to let users perceive good pictures by glance.
Store’s information; it's all-over the place, some is unnecessary (almost zero interaction), users don't know if it is clickable or just to inform.
Review section; second place that most of the users tries to look for is barely known that it can be accessed by clicking on the score button, causing users scrolling down all the way to the bottom section, skipping all of the product (packages), in order to read reviews from other users (customers). In addition, currently each star rating is not filterable, and the customers don’t know which package the review is applicable to, so review photos are not utilized/ displayed properly. HH offers section; less informative as it should be, customers still don’t understand available offers and what each can do. Moreover, there are two levels of HH offers, store level and package level, both are not clearly introduced to users.

Objectives

user can see store picture and videos(change every 8 seconds)
user can see how many store picture and video
user can open store picture gallery page
user can see 3 category(all, store and review) on gallery picture
user can see the offers explanation(overlay not full page)
user can see store review, and how many people that review it
user can see the blogger post(Card list; when click navigate user to blogger’s review page)
user can see the store main information:
- Store’s location (i)
- Main cuisine (ii)
- Opening hours (iii)
- Available outlets (branches) (iv)

Scope

All platforms

Sequence Diagram / Flow

ERD

DB Schema / Database Migration

Column Name	Data Type	Description

API Blueprint

Method	Path	URL	Description	Payload

New Query

Notes, Constraint & Assumptions

Gallery Page

Divided into 3 categories; All, Store, and Reviews.
- All; including Store and Review pictures.
- Store; picture/videos uploaded from admin dashboard.
- Review; pictures uploaded from users same as it they used for review. Offers that are accepted in this store; each will have an explanation for users for better understanding.
Earn Points
Redeem Points
Promo Code
Gift Card Store’s Review section (Overlay + Full Page)
Overall score
Blogger’s post
Card list; when click navigate user to blogger’s review page
Reviews
- Star rating (number of reviews included)
  - Users can filter by selecting the star rating.
  - Sorting from 5 to 1 star.
- One review card will consist.
  - Reviewer’s profile (profile pic, name)
  - Star rating that users gave.
  - Reviewed date
  - Review picture
  - Review content
  - Read more button
Read more for review content
View Package button
In case No.1, if the booking was created with only one package, it will navigate to the package landing page.
In case No.2, if the booking was created with multiple packages, it will have an overlay pop-up that shows the booked packages in carousel format.
Package card pop-up; if clicking the photo, it will navigate to the package landing page.
Package card pop-up; if clicking the book button, it will navigate to the booking process, pre-selected with that package.

TODO / Task List / Action Items

References

https://www.figma.com/file/1NrU8P3ZokGcSh7DlFushZ/Home-page-UI-(Updated)?node-id=2001%3A715&t=hJ6cPvnOfS4sXzpB-1

https://docs.google.com/document/d/1tXGlyHdkDvmO5_fD9xvW9YTDRYLJLxk0eKY7WBhqUFQ/edit

Change History

NO	Date Time	What Chaged	Description

Store Page Desktop

Description / Background

Glossary

Objectives

Scope

Location

How to find ..

How to set ..

Sequence Diagram / Flow

ERD

Backend Implementation

Frontend Implementation

PRD & Task

Design

API Blueprint

New Query

DB Schema / Database Migration

Improvement:

Design

https://www.figma.com/file/T9kSuAj3GZW7khySGNq84m/Store-Page-Update?node-id=446-14886&t=nCvdcPq8Gl9ErlyV-0

PRD

https://docs.google.com/document/d/1HarEloxni8Y9srRAuCoxuooMB5dNXIP9fom3AbU8i2U/edit

Quick Tab Bar

It will display at the top of the store page. If the user clicks one of these tabs, it will navigate to that section.

Store Overview

Same as restaurant info in mobile version. Parameter that we use from restaurant object:

logo_url
name
reviews_score
reviews_count
location/primary_location.name
cuisine/primary_cuisine.name
weekday_opening_hours
branch_id (optional) Others:
Blogger count from: API {{ base_api }}/restaurants/{id}/blogger_reviews.json
Outlet count from: API {{ base_api }}/branch/{branch id}/restaurants.json

Offers Information

This will show if we click the offers icon for the explanation of each offer. Learn more; will navigate to the FAQ page. Learn more link:

Information Page

Location Section In the address section we can use "restaurants" object params:

address
lat
lng
map_location (for open in google maps link) For Map UI we can use static mapbox. Opening Hours and Primary Info This logic same as above we can use param:
weekday_opening_hours
cuisine
parking
corkage_charge

About Us On this section we'll use param:

description

Our other outlets For restaurant that has branch_id, we can use this API:

API {{ base_api }}/branch/{branch id}/restaurants.json

Overall Score

It will navigate to the customers review section. Overall score will use the new API. URL: {base_url}/api/v6/restaurants/{id}/reviews.json

Store's Picture

Will display 1 and a half of the next picture, with auto change within 8 seconds.
Arrow button; click to see the next picture.

Gallery Page

View all button can view all photos of that store.

Overlay gallery page will show after clicking.
- Quick tab bar at the top of the overlay page; if the user clicks one of these tabs, it will navigate to that section.
- There are 3 types of gallery;
  - All
  - Store
  - Review

Gallery View

Blogger's Post

For blogger's post now will more simple with showing cover and when we click that will open the URL. No need to create native component inside the app. API: {{ base_api }}/restaurants/{id}/blogger_reviews.json

Review Count

Reviews count will use the new API. We can sort by clicking star rating. URL: {base_url}/api/v6/restaurants/{id}/reviews.json

		"stars_count": {
			"one": 5,
			"two": 6,
			"three": 12,
			"four": 44,
			"five": 240
		}

Customer's Review

What we'll show:

Reviewer’s profile picture
Reviewer’s name
Star rating that reviewer gave.
Reviewed date
Review picture
Review content
Read more button
- Read more for review content View package button
In case No.1, if the booking was created with only one package, the booking process section (11) will show up and the page will scroll up to the booking process section.
In case No.2, if the booking was created with multiple packages, it will have an overlay pop-up that shows the reviewer’s booked packages.
Package card pop-up; if clicking the book button, the booking process section will show up and the page will scroll up to the booking process section. Book button
If clicking the book button, the booking process section will show up and the page will scroll up to the booking process section. API: {{ base_api }}/reviews.json Payload:

{
	"restaurant_id": 3127,
	"minor_version": "{{ minor_version  }}",
	"page": {
		"number": 1,
		"size": 10
	}
}

Search Tags

For this section we will use a new API to get tags based on restaurant id. When clicking any of the tags, it will redirect the user to the search page displaying the outlets tagged to the selected tag URL: {base_url}/api/v6/restaurants/{id}/hashtags.json when we click will trigger web-event onTagsClicked with payload:

{
	"id": 268,
	"title": "Outdoor"
}

This one is section that we have on the bottom restaurant page.

It should be the same logic filtered by primary cuisine. Every time that user refreshes, data will be changed.
Maximum 8 slots of the carousel format.
Arrow button; click to see the next picture.
All slots that show on are sorted by nearest location first.
If the location service is off, the cards are sorted by the number of bookings in the past 24 hours from highest to lowest API: {{ base_api }}/restaurants/{id}/similar.json

Keyboard shortcuts

HungryHub Knowledge Base