MegaMenu: Engineering design support - data model validation

[RobertaJHahn]

User Story

As a [user role below]: DDS Designer working on the MegaMenu

I need to: have engineering support while working on the designs

so that I can: accelerate the design effort and improve the design quality

Additional information

• This issues is created for the engineers to be involved during the megamenu design to validate that the existing data model will work with the designs.
  • The duration of this work is for the second week of sprint 20-14. Support will also be needed in the first week of Sprint 20-15. This effort is included in issue (#3123)

Acceptance criteria

• [ ] Data model analysis and recommendation are provided to Olivia

[annawen1]

This is our current data structure for the masthead menu:

{
  links: arrayOf({
    title: string,
    url: string,
    hasMegapanel: boolean,
    hasMenu: boolean
    menuSections: arrayOf({
      heading: string,
      menuItems: arrayOf({
        title: string,
        url: string,
        megapanelContent: {
          headingTitle: string,
          headingUrl: string,
          description: string,
          quickLinks: {
            title: string,
            links: arrayOf({
              title: string,
              url: string
            })
          },
          feature: {
            heading: string,
            imageUrl: string,
            linkTitle: string,
            linkUrl: string
          },
        }
      })
    })
  })
}

Looking at the designs for model 3, I believe the current data structure will work for most of the design. We would need to add data sections/fields for the left section and the "View all ... " CTA.

To accommodate the left section panel and the view all links, proposed data structure below (it is pretty much the same as it is now, but with two new fields):

{
  links: arrayOf({
    title: string,
    url: string,
    hasMegapanel: boolean,
    hasMenu: boolean
    viewAll: { <---- field of the viewAll link
      title: string,
      url: string
    },
    highlightedSection: {  <----- field for left section panel
      menuSections: [{...}] // same structure of menuSection field seen below
    }
    menuSections: arrayOf({
      heading: string,
      menuItems: arrayOf({
        title: string,
        url: string,
        megapanelContent: {
          headingTitle: string,
          headingUrl: string,
          description: string,
          quickLinks: {
            title: string,
            links: arrayOf({
              title: string,
              url: string
            })
          },
          feature: {
            heading: string,
            imageUrl: string,
            linkTitle: string,
            linkUrl: string
          },
        }
      })
    })
  })
}

CC @jeffchew @oliviaflory @wonilsuhibm

[annawen1]

Example of how it will look like for the design in the comment above

{
  links: [{
    title: "Products & Solutions",
    url: "..."
    hasMegapanel: true,
    hasMenu: true,
    viewAll: {
      title: "View All Products & Solutions",
      url: "..."
    }
    highlightedSections: {
      menuSections: [
        {
          menuItems: [
            {
              title: "Top brands",
              url: "...",
              megapanelContent: {
                quickLinks: {
                  links: [
                    {
                      title: "IBM Cloud",
                      url: "...",
                    },
                    {
                      title: "Watson",
                      url: "...",
                    }
                    { ..... }
                  ]
                }
              }
            },
            {
              title: "Industries",
              url: "...",
              megapanelContent: {
                quickLinks: {
                  links: [
                    {
                      title: "Aerospace and defense",
                      url: "..."
                    }
                    { ..... }
                  ]
                }
              }
            }
          ]
        },
        {
          menuItems: {
            title: "Product payment plans",
            url: "...",
            megapanelContent: {
              quickLinks: {
                links: [
                  {
                    title: "Loans",
                    url: "..."
                  },
                  { ..... }
                ]
              }
            }
          }
        }
      ]
    },
    menuSections: [{
      menuItems: [
        {
          title: "Artificial Intelligence",
          url: "...",
          megepanelContent: {
            quickLinks: {
              links: [
                {
                  title: "Customer Service AI",
                  url: "..."
                },
                { ..... }
              ]
            }
          }
        },
        {
          title: "Blockchain",
          url: "...",
          megepanelContent: {
            quickLinks: {
              links: [
                {
                  title: "Blockchain Cross Border Payments",
                  url: "..."
                },
                { ..... }
              ]
            }
          }
        }
        { ..... }
      ]
    }]
  }]
}