Page templates
Templates provide starting points for key page types and ensure information unfolds in a way users can clearly understand and follow.
Each page template has a specific hero component that heads the page. This is called the ‘masthead’. This should be used to make it clear where the user is and clearly explain the concept of the page narrative. The body of each template is flexible and can contain any combination of other website components but you can find recommendations of the best components to use for each template in Figma.
Homepage Template
The homepage uses the Landing Page template and sets the scope for new users while underlining OVO’s brand promise. The homepage hero is used to drive home messages at the top of the homepage. This component can only be used on the homepage.
Campaign Template
Campaign pages are designed to market OVO’s big promotions or specific offers. Content is typically concise, visually compelling, and often has focused CTAs that drive conversions. Examples include; /beyond, /tesco-offer and /audi-charge-anytime/company-car.
Product Overview Template
Product Overview pages act as parent pages and provide broader context around OVO’s products and services. They are designed to help users better understand what’s on offer and to continue their OVO journey. Examples include; /solar and /energy-efficiency.
Product Detail Template
Product Detail pages focus on a specific product or service, highlighting its key benefits and features in depth. Their goal is to educate and engage users in the awareness or consideration phase of the marketing funnel, while ultimately supporting long term conversion. Examples include; /smart-meters, /heat-pumps and /energy-experts.
Article Landing Page Template
The Article Landing Page is a parent page and should only contain a grid of articles to be linked to. The Hero provides space to promote one featured article. This should be a popular or high traffic article that users are likely to engage with. Examples include; /blog and /guides.
Article Page Template
The Article Page is designed for long-form content which is made up of text, images and/or video. This is used for guides and blog posts. For example; /blog/lifestyle/house-move-checklist and /guides/energy-guides/guide-for-smart-in-home-display-and-how-to-use-it.
Generic Page Template
The Generic Page is used for content that doesn’t fall into the other defined categories, such as Campaign, Product or Article. It’s commonly used for standalone content or functional pages. Examples include; /seg or /terms2025.
Tariff Template
The Tariff Template is designed for pages that show tariff cards and different plans. It helps users easily compare features, prices and benefits, and select the option that suit their needs. It features a simple top section with text, image and CTA. Examples include; /home-energy-plans.
Webpage Template
The Webpage Template uses an older design template and is used for Help content. It’s a simple layout made up of rich text and images. Examples include; /help/article/how-to-pay and /help/article/how-billing-works.
