Frequently asked questions

Is the Shell MarketHub design an officially authorised use of Shell VI and brand?

Yes - the Markethub UX design and visual style has been signed-off by Shell CX for use by Shell sites within the MarketHub programme.

The MarketHub UX design is not an open standard and cannot be adopted by sites outside the MarketHub programme in place of existing oneShell VI. It is not, say freely open to adoption by Shell businesses operating B2B portals and tools outside the MarketHub programme.

What projects should use the Shell MarketHub Design Repository?

The elements in the Patttern Library and the Style Guide have been developed specifically for the MarketHub platform. However many aspects of the design are available to other Shell sites closely aligned with MarketHub (usually because they are complimentary or they share a core audience).

Sites hosted on the Markethub platform must make as close to 100% use as is practicably possible of the design and markup code in the Pattern Library.

'Associate' sites are those which are integrated with MarketHub through Single Sign-On (SSO) or because their core user audience is one shared with MarketHub.

How do I identify the correct level of technical integration with Shell MarketHub for my site?

The integration principles and decision flowchart for Shell MarketHub are available for download here as a PDF.

The decision flow chart is intended to help product owners and project managers to identify the likely level of integration they should seek with Shell MarketHub - and the correct Shell VI standard to follow as a result. An interactive version of the flow chart is available as a wizard on the Pattern Library homepage.

Note: The principles and flowchart are intended as a guide only. All technical integration decisions – as with any decision to adopt Shell MarkHub UX design – should be discussed with the MarketHub Standards & Integration Group:

Who owns the MarketHub UX Design?

The MarketHub UX Design Repository is an approved Shell standard curated by UK-based agency ; Shell's retained UX design partner for the MarketHub programme.

The primary Foolproof contact for the Shell MarketHub Design Repository is Rob Gillham, UX Design Lead, NextGen MarketHub.

The overall business owner of Shell MarketHub user experience is David House, Ecommerce Digital Capabilities Lead, NextGen MarketHub.

What is a Pattern Library? How should I use it?

Pattern Libraries address the requirement to assemble intuitive websites quickly for different audiences without losing consistency of user experience and visual identity. The trend towards quick, iterative development requires a well defined collection of UI elements allowing new pages to be built quickly without the need for unnecessary and costly design.

Pattern Libraries also promote good user experience by providing a central point of reference for user interface design. This creates benefits for developers and business stakeholders:

  • Promote a consistent, brand-compliant and familiar user experience across all Shell MarketHub sites
  • Allows new projects to make efficient reuse of MarketHub UI design, avoiding redundant design time and costs
  • Police quality of UI code thereby maintaining user experience and accessibility standards

Publicly available examples of Pattern libraries include: and . These pattern libraries share the same 'atomic design' approach to documenting user interfaces as Shell MarketHub. See the Tutorial in the Pattern Library homepage for more information about Atomic Design.

How can I see how a Pattern will look on mobile or tablet?

MarketHub has a responsive UI framework. This approach to web design uses a flexible grid and resizeable images which respond to the size of the user's screen. This means there is only one of every component, not multiple sites (and wildly different user experiences) for various mobile and tablet devices.

Every item in the Pattern Library and the entire Shell MarketHub Design Repository site uses the same responsive framework. To see how the various templates, pages and UI elements respond to different screen widths, simply resize the browser and the components will resize accordingly.

For reference, the major break-points (where the responsive layout makes accomodations for screen width other than just resizing the page) in Shell MarketHub are:

  • 'Mobile' width: up to 620 pixels
  • 'Tablet' medium screen: up to 820 pixels
  • 'Desktop' large screen: over 820 pixels

To help you visualise the way the UI elements change at different sizes, the Pattern Library displays a pixel-width ruler tool when you resize the browser window.

Information I have found in the Pattern Library contradicts what is live currently on Which is the correct version to use?

The Pattern Library is the ultimate guide for any stakeholder, designer or developer who wishes to understand the correct implementation of the Shell MarketHub user experience.

At any one time, there will inevitably be points of difference between the design and coding in a live MarketHub release and the pattern library. However it is incumbent on MarketHub releases to ensure over time they bring both their code and design inline with the contents of the pattern library.

When creating new pages for a new or existing release, developers should always make reference to this pattern library and not assume the contents of live releases are 100% aligned.

When faced with discrepancies between a live MarketHub release and the Pattern Library, developers should not propagate the incorrect design, but introduce the correct design wherever possible.

How is the Design Repository updated?

In the current version, the user experience design of MarketHub and the contents of this site are managed by Foolproof.

All contents of the Design Repository in this, and future iterations are subject to approval by the NextGen (MarketHub) Standards and Integration Group (contact David House).

How can I identify which patterns apply to my site?

The Pattern Library makes use of tagging to differentiate between UI elements which are exclusive to the MarketHub platform, and those which can be exploited by associate sites e.g. sites connected to MarketHub by Single Sign-On (SSO) links.

If you are a product or project manager who wishes to know whether your site can apply the MarketHub user experience refer to the integration decision support materials.

What operating systems/devices/browsers are supported by the MarketHub Pattern Library?

MarketHub has been designed to display the best user experience possible regardless of the browser, operating system or device being used to access the site. The user interface has a 'responsive' framework which adapts the layout to the user viewing environment by using fluid, proportion-based screens and flexible images.

While MarketHub aims to provide an optimal viewing experience across the widest possible range of devices and browser types, it has been tested and optimised specifically to support the following:

  • Chrome (latest)
  • Firefox (latest)
  • Internet Explorer IE 8 (including Compatability View)
  • Internet Explorer IE 9 (including Compatability View)
  • Safari 6 (iOS7)

Are the components in the Pattern Library accessible to users with disabilities?

Every effort has been made to ensure components and HTML markup in the Pattern Library have been coded to comply with the Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG 2.0). The designs and HTML in the pattern library conform to WCAG 2.0 AA standard. However this does not, and cannot guarantee they are 100% are accessible to all users under all situations.

Will the MarketHub Pattern Library guarantee my site meets accessibility standards?

No, meeting accessibility standards is dependent on a number of variables, of which the design of components is just one. Whilst the MarketHub Pattern Library components are WAI WCAG 2.0 compliant, it is possible to use them to construct a web page that is not accessible, or fails to meet AA compliance tests.

The format of content published on the site will also have a significant impact on accessibility. For further details on accessibility criteria see the W3C's published advice on .