Skip to main content

Start

Introduction#

This page type should be used to clarify and set up a task for a user at the beginning of a journey.

Purpose#

  • This page sets expectations.
  • It provides any contextual information that a user may need to complete their journey successfully.

For more information on how to bookend your journeys see the Confirmation page type.

Principles to follow#

CreativeTone of voiceKeywords
Modern and dynamicBe active, Be naturalPromotional, Informative

Example#

Content guidance#

The page composition below provides a suggestion of the typical content that is may be required at this stage in the user's journey. This is not prescriptive guidance, and the unique needs of each journey should always also be considered.

A dedicated start page may not be needed if users are coming from a page where their expectations have already been set. This page may also vary in shorter journeys, particularly where form elements may need to be present at the first step.

Page compositionDescription
Image of headerThis page will always start with nsx-header providing the primary navigation for the website, whilst also being our main brand presence.
Image of landmark-hillsideNext is ns-landmark which clarifies the task at hand for the user. This should have a welcoming tone.
Image of Bullet list Content plus CTABelow the Landmark is ns-content including an instructional heading with an unordered list to outline any information that the user needs to know to complete the journey. It also includes a prominent direct ns-cta.
Supplementary cardsThen there is a section with 3 ns-card components that link to relevant help and support content. It may also include signposting to a secondary journey, or action for frequently misdirected users. Decorative background elements should be adapted to create balance with the surrounding page elements.
Image of FooterFinally, there is nsx-footer which holds all required links and copyright information for the website. It is also an important SEO tool as it includes links to social channels and our mobile apps.

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.