Darwin Header design

[fred-warburton]

What

To support the Oscar teams in delivering a new SpringerLink header, we will design a “unified header’ experience. This will mean creating a global header that will include:

• New SpringerLink logo - which appears in the top left
• Utilities such as search, login and the shopping cart
• A vertical list of navigational links, which appear underneath the logo
• A new visual design, based on the updated visual language

Will use UX best practices to create a generic design pattern that can scale to other platforms like Researcher Home, Snapp and improve the overall quality of experience when users visit our sites .

We will work closely with the Content Design team to ensure the visual navigation can best reflect the new IA.

We will approach this like any other design system component, working with the Discovery product team.

We will use existing design patterns / components as a starting point: Nature header documentation

Process

• Take content from Discovery team in search prototype (minus new additions)

Why

Problem Brief: SpringerLink header and footer

Done when

• [x] Design first versions are shared with wider workstream
• [x] Technical approach agreed with @ricky-lau, @saramorueta @cjmoneill
• [x] Interaction design finalised with @ricky-lau, @saramorueta, @cjmoneill, @fred-warburton, Agris and Gaynor
• [x] Content / IA options finalised with @cjmoneill, @fred-warburton , Agris and Gaynor
• [x] Design and Content reviewed

Design documents

• Miro board: https://miro.com/app/board/uXjVMYGDfwc=/
• Sketch design: https://www.sketch.com/s/c77d316e-76e5-403e-95b8-93021fc6c95e/p/E9AAD0AD-3F0A-47AC-B2AD-E6248BC1518F/canvas
• Glbal nav items: https://docs.google.com/spreadsheets/d/1LullaR0_CpGnWExbV6KObshwtOiI8lue05qWbgPnn-c/edit#gid=0
• Design prinicples: https://docs.google.com/document/d/1amatncbkOeiS_Pcrp8n-MXtY8JffuHQ9-8FPDiO3IUA/edit#heading=h.hcsgdm5jzm0k

References

• https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/

[foxintherain]

First design iteration @ricky-lau @saramorueta @cjmoneill