Design Ticket: Wishlist Page Rebrand & State Redesign

[MTsomo]

Design Ticket: Wishlist Page Rebrand & State Redesign

As a Lead UI/UX Designer,
I need to create high-fidelity Figma mockups for the Wishlist Page using the WeBuddhist Academy brand identity,
So that the engineering team has clear visual specs for both the Empty State and Active Wishlist State.

Description

This ticket covers designing the Wishlist Page within the WeBuddhist Academy design system. The update requires redesigning the page layout, updating typography and color tokens, and defining two distinct screen states: an Empty State (when a learner has no saved courses) and an Active State (when courses are saved in the wishlist).

Acceptance Criteria

• High-fidelity screens created for the Wishlist Page across Desktop (1440px), Tablet (768px), and Mobile (375px) viewports.
• Empty State Screen: Designed with a clean layout, empty-state vector graphic/illustration, helpful messaging, and a prominent primary CTA button ("Explore Courses") directing users to the Catalog.
• Active Wishlist Screen: Designed with a grid/list layout featuring rebranded course cards (thumbnail, course title, instructor, price/badge, "Remove from Wishlist" action, and "Enroll Now" CTA).
• Page typography hierarchy updated to use WeBuddhist Academy display font for section titles and UI body font for card details and button labels.
• Updated color palette applied across background containers, card borders, icons, empty state graphic elements, and interactive button states (Default, Hover, Focus, Active).
• Components integrated into and linked with the centralized WeBuddhist Academy Design System library.

Definition of Done

• Design Review Sign-Off: Empty and Active state Wishlist designs reviewed and approved by product leadership.
• Developer Handoff: Figma link published with inspectable tokens, layout grids, and component specs ready for frontend engineering implementation.