search

Netcentric / vg-macktrucks-com-rd

Franklin Site Redesign for https://www.macktrucks.com
Apache License 2.0
1 stars 0 forks source link

Mack Trucks Navigation Header and Dropdown Solution Decisioning #83

Open DanielaPedrochevd opened 11 months ago

DanielaPedrochevd commented 11 months ago

For the Mack Trucks Navigation we have 2 possible solutions:

  1. Reusing the Volvo design, as described in vg-macktrucks-com-rd #70.
  2. Implementing a solution such as the https://www.toyota.com/ navigation.

After discussing with the team this is our feedback:

For number 1, the dropdown and header in Volvo were done in 2 different phases 3sp and 8sp each so if we wanted to reuse this design with the Mack branding it would be more or less the same estimate (we would also separate the development between the dropdown and the header, we have to create a new header from scratch so it would be also 3sp but for the dropdown we could reuse some of Volvo's code so maximun 8sp for Mack's dropdown).

For number 2, If we want to replicate the Toyota navigation, the estimation depends on the final decision of the actual design.

Image Image

We are missing requierements for this such as:

  1. Toyota has the "vehicles" section in the Navigation which displays a subcategory filtering option:

Image

Would we want this too? What categories would we display? Should we also have an "all trucks" subcategory? -> two tabs, one with trucks, one with segments (pictures to be provided for the latter)

  1. How does the experience tab look like? what does is display on click?

  2. What is the expected behavior for the navigation on mobile/table, is it the same as Toyota (a drilldown design)? Or would you rather keep the volvo mobile and tablet navigation design? -> follow Volvo mobile with expand design pattern

BeckyMedlin commented 11 months ago

@ZoeBeykirch Please follow up with Wendy on the requirements listed above. Thank you!

DanielaPedrochevd commented 11 months ago

https://github.com/Netcentric/vg-volvotrucks-us-rd/issues/100

WendyKruger commented 11 months ago

here is the Figma file for the navigation: https://www.figma.com/file/vbm7VB7UCWixbEasHh5zGp/macktrucks.com-reskin---navigation?type=design&node-id=0-1&mode=design&t=7MD70PgFGHEskaRD-0

Note: the mobile nav will stay the same as originally designed, with the exception that the menus will open full-width instead of partial. For tablet, the menu will open to the same width as the mobile.

For desktop the header bar will stay the same. I have mocked up the Trucks mega menu section. I am still working on the Solutions and Experience sections.