Key offering and services lift-ups

Key offering and services lift-ups

What

The key offering and services module displays a pre-selected set of forwarding paths for the user. The tabs provide the context for different tasks they're looking to complete or products or services they're looking for.

Where

Place on any pages that encourage discovery in order to help your users find their way.

DO

Call-to-action buttons
Use descriptive CTAs that communicate the functionality that is performed on click or should be performed after. Use the button for the preferred action and the text link for the optional action.

Tabs
If you're not using a text module that explains the key offering and services, it's recommended that the tabs have an actionable copy, e.g."make", "find", or "contact".

DON'T

Use as a single destination. If there's only a single destination for a single task, use another lift-up instead.

A single module can have 2-4 tabs and 2-4 lift-up blocks inside each tab. Style of lift-ups is chosen per tab.

Background color
Mandatory, the background color surrounding the open tab area can be freely chosen. The open tab content area is to always be white.

Icons in tabs
Mandatory, can be chosen in CMS from available icons.

Lift-ups styles
Mandatory, can be chosen in CMS. All parts of the chosen style are mandatory.

Color themes
Mandatory for the style that uses 4 lift-up blocks. Can be chosen in CMS from available themes.

Background color, tabs & CTA

The background color surrounding the tab area can be freely chosen from Fortum color palette. The amount of tabs minimun 2, maximum 4.
The maximum amount of forward paths that use a CTA button inside an open tab is three in order to keep the options manageable and not to overwhelm the user with too many strong visual items.

Forward paths

The maximum amount of forward paths inside an open tab is four in order to provide structured and approachable options for the users. Instead of CTA buttons, these elements include descriptive icons and an arrow.

Min. amount of forward paths

The minimum amount of forward paths inside an open tab is two in order to provide value in the form of options for the users.

Example

By combining the page intro module with key offering and services module, you can ‘pitch’ your case to the user to encourage engagement.

Fortum Tarkka contract, for the cost aware electricity user

When you select electricity with spot pricing, you always pay for electricity per hourly market price. Fortum Tarkka is great for you if you're ready to regulate your electricity usage and are willing to track prices. Pair Fortum Tarkka with the Oma Fortum app to stay on top of your energy consumption.

Max character

Header: 80
Admin title: N/A
Intro: 500

  1. Navigate to Manage → Content modules → Add custom block → Key offering and services.

  2. Add a value to the Block description field. This is used later when referencing the module from the admin UI, and will never show on the frontend. It should follow the naming convention: Section name_module type_description.

  3. Each tab is represented in the CMS by an Accordian item, it will need a Title and Icon.

  4. Each forward path is represented in the CMS by an Accordian path, each path will need a Subtitle, Sub-item body (max. 200 characters) and CTA. You can add between 2 and 4 Accordian paths.

  5. CTA fields must have values for URL and Link text.

  6. When ready, save your module. It will not show on the frontend until attached to a page.

Key offering and Services - CMS guide

Support

In case you can't find answers from this guide, you can contact Indiana support.

iCAT

Internet Change Advisory Team
www.fortum.com/indianasupport
icat [at] fortum [dot] com

Revisions