Empty Cart Refinement

🧾 History

📕 About

Context	Current design
Problem	Users confuse and don't know they must
Solution	Make the instruction more understandable
Name of Feature	Empty Cart Refinement
Objective	Add Action Button on the empty cart Display overlay after click Select package button
Gains	Clear instruction Increase click rate
Pains	Would make the performance heavy because of the animation
Figma Link	https://www.figma.com/design/D6sLY1RWZoO0ppuQeEhQtw/Booking-Process-%5BDesktop%5D?node-id=1717-1761&t=2GW6PoalE4np5vqg-1
Available Platform	Web Desktop View
Sprint	TBD
Related PRD	-
Out of Scope	Web mobile view Mobile app

🎯 User Story & Requirement

Add Action Button on the empty cart

User Story	Requirement
User want to book package first. Flow : Store Page ➝ Click Book Button ➝ Click Select Package	Adjust the wording Title : Packages are on your left Description : Click 'Book +' button to select your package Button : Select package with left arrow icon

Display overlay after click Select package button

User Story	Requirement
Click Select package button	Display overlay to highlight all of the packages Appear tooltip as a hint Click 'Book +' button to select your preferred package
Click outside the highlighted content (overlay) and tooltip	Close the highlight overlay and tooltip immediately
Click Book + button	Close the highlight overlay and tooltip immediately There is no changes for this flow. just follow the existing as same as click select the package button
Animation	Pls kindly check the preview of the animation below : https://jam.dev/c/15c04799-daf2-4a56-b964-a746b4f11fc4

❓ FAQ

📊 Metric

Please provide it on the google analytics

• Track the user's click on the action button (Select Package button)