FR: Header

[shirin27]

Repurpose the Volvo header and main menu navigation, applying Mack branding/style. This shall keep the same menu navigation information architecture as exists on the macktrucks.com.

For the truck images on the Trucks section of the Nav, plan to re-use the same images that are on this page https://www.macktrucks.com/trucks/

[BeckyMedlin]

Is this for repurposing the Volvo header @shirin27 ? Please add details. Thank you!

[BeckyMedlin]

@DanielaPedrochevd @Gonzalo-CG @manuel-vara The Mack header is in the current sprint, but not estimated/refined. This is a high priority item. We need to discuss asap.

[cogniSyb]

[Gonzalo-CG]

Thanks for the screenshots @cogniSyb!
@BeckyMedlin could we have the link to the actual Figma file for this?
cc: @DanielaPedrochevd

[BeckyMedlin]

@Gonzalo-CG The images were provided by Wendy K. I do not believe there are any Figma files for it.

[DanielaPedrochevd]

Agile Requirement

As a user, I'm able to navigate through the different sections in the header navigation of the https://www.macktrucks.com/trucks/ site in a similar way as the https://www.toyota.com/ Navigation.

Description

Change the Mack Trucks navigation to follow the https://www.toyota.com/ one but with the Mack Trucks branding.

Acceptance criteria

• 1. The Mack Trucks Navigation has 6 main sections (Trucks, Solutions, Experience, Find my Dealer, Search and a User Profile Icon).

• 2. Upon click, the first three sections display a dropdown, Find my Dealer redirects to the dealer locator page, the search icon will link to the search page and the User Profile Icon redirects to the login page (https://customerportal.macktrucks.com/).

• 3. Details of the Trucks section:

• It displays a dropdown with two subsections/tabs (Trucks and Segments).

• Trucks displays a list of all the trucks with its image and a description.

• The Segments section displays a list of segments (eg. "highway" with a picture of a highway).

• The way these listed items are displayed replicates how Toyota displays them but with the Mack Trucks styling.

• In the Trucks dropdown there are also two call to action buttons. One that links to all trucks and another one that links to the truck builder (initially only for anthem and granite trucks).

• 4. Details of the Solutions section:

• It displays a dropdown with 3 subsections: Owners resources, Powertrain and Features as in the following screenshot.

• 5. Details of the Experience Section:

• It also displays a dropdown with the originally planned content https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=2218-66660&mode=dev.

• 6. The mobile/tablet view follows the behavior an design of the already existing Volvo navigation Header mega dropdown / navigation vg-volvotrucks-us-rd#75 but with the Mack trucks styling.

[DanielaPedrochevd]

For the Solutions section, we decided to, instead of having the hover navigation between the three subsections, we have a clickable navigation as it will be better accessibility-wise.

This Mega Navigation will be implemented on top of Volvo's current solution.

As discussed in previous meetings, the search icon will link to the search page just like it does with Volvo.

[DanielaPedrochevd]

As discussed in the sprint planning, developers will work on the ticket and communicate the design choices to make sure it's on par with the desired solution.

[DanielaPedrochevd]

Please make sure this Header includes functionality #103

[DanielaPedrochevd]

@TomaszDziezykNetcentric Here is the link to the figma designs https://www.figma.com/file/vbm7VB7UCWixbEasHh5zGp/macktrucks.com-reskin---navigation?type=design&node-id=0-1&mode=design&t=xMUSgEUsSEC85FU8-0 as @WendyKruger let me know, Trucks menu completely built out. Still working on the Solutions and Experience navs (matches up with Shopping Tools and Owners on toyota.com). Hope it helps!

[Andrei-Boiangiu]

design question:
on pages where we have segments with white background ( such as for example Mack Trucks PDP: https://70-header-v2--vg-macktrucks-com-rd--netcentric.hlx.page/pdp )
when opening the Header dropdown we have it white on white background
does this look good enough? or should we have some dark background overlay such as on Volvo Trucks when opening the subnavigation?

cc @BeckyMedlin @WendyKruger

(bcc @cogniSyb @DanielaPedrochevd )

[WendyKruger]

Just commenting to say I am removing the Design Question label.