General Info

We are redesigning the Mobile Navigation Bar to improve usability, spacing, and overall functionality. The new design will ensure better touch interaction, enhance icon spacing, and refine the overall user experience. Additionally, the navigation has been simplified by removing redundant icons and moving certain features to other sections.

Changes:

Navigation bar height increased to 52px from 51px
Increased padding around icons for better usability (44px width and height for icons)
SACLÀB logo size reduced for better icon spacing
Removed “Contact” icon
"Favorite" moved to "My Wishlist" under the "My Account" section
The notification bubble for favorites will now appear on top of the user icon
ALL notification bubbles have the color SACLÀB Ink Black (#191A1E)#

User Story

As a customer navigating the mobile version of the website, I can easily access the navigation bar and use the icons with larger tap areas. The navigation is streamlined with the removal of the "Contact" icon, and I can manage my favorited products in the "My Account" section, with notifications clearly indicated on the user icon.

Visual Design

Desktop: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=1279-9621&t=Tr5rfgcq4I7OB4Gz-1 and for Notification Bubbles: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=1278-9196&t=Tr5rfgcq4I7OB4Gz-1
Mobile: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6245-8768&node-type=canvas&t=Tr5rfgcq4I7OB4Gz-0 and for Notification Bubbles: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=1278-9196&t=Tr5rfgcq4I7OB4Gz-1

	Acceptance Criteria	Screenshots
01	Given the user is on mobile Then the navigation bar height should be 52px instead of 51px
02	Given the user is on mobile Then icons in the navigation bar should have 44px width and height And padding around the icons should be added for a larger tap area and improved usability
03	Given the user is on mobile Then the SACLÀB logo should be reduced in size to allow for proper icon spacing
04	Given the user is on mobile Then the “Contact” icon should no longer be visible in the navigation bar
05	Given the user is logged in and on mobile Then the Favorite option should no longer be in the main navigation
06	Given the user has favorited a product on desktop Then a notification bubble is displayed on top of the Favorite Icon (function already existing) And a notification bubble is displayed next to “My wishlist” in the “My account Menu”
07	Given the user has favorited a product on mobile Then a notification bubble should appear on top of the user icon And a notification bubble is displayed next to “My favorites” in the “My account Menu”
08	Given the user is on mobile or desktop and has a notification (cart, favorite, or reservation) Then the notification bubble background color should be SACLÀB Ink Black (191A1E)
09	Given the user has an active reservation on Desktop Then display a notification bubble on the profile Icon And display a notification bubble next to “my reservations” in the My account menu
10	Given the user has an active reservation on Mobile Then display a notification bubble on the profile Icon And display a notification bubble next to “my reservations” in the My account menu
11	Given the user has an active reservation AND favorited items on Mobile Then SUM both notifications on the profile icon (See Figma: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6688-31748&t=Tr5rfgcq4I7OB4Gz-1 )
12	Given the user has an active reservation AND favorited items on Desktop Then Show notifications on the separate icons
13	Given the user opens the “My Account” Menu on mobile Then The yellow Banner should be behind the my account menu AND should darken like the background
14	Given the user is LoggedIn When the user clicks on Profile Icon on mobile Then the close (cross) icon is displayed in the navigation bar instead of the menu itself
15	Given the user is navigating within "My Account" on mobile or desktop Then the active page should be displayed in SACLÀB Ink Black (HEX #191A1E) and underlined And inactive pages should be displayed in SACLÀB Greyscale (HEX #888888) and not underlined