Back to home page
Case Study Details

Charge Offshore Website Redesign & Webflow Development

Charge Offshore provides offshore charging systems that let electric and hybrid vessels recharge at sea using clean power from offshore wind infrastructure.

case-study-main-image

Project Overview

Charge Offshore needed a stronger digital presence to clearly and professionally communicate its technical offshore charging concept. The original one-page website provided only a basic overview and lacked the structure and detail required to convey the solution’s full value. For a company in offshore energy, clean power, marine engineering, and vessel charging, the website had to do more than look appealing. It needed to explain the technology, build trust, and guide technical buyers, partners, and stakeholders through the offering.

Vscale redesigned and rebuilt the website, transforming it from a basic one-page site into a structured, scalable, and professional platform. The new site was designed in Figma and developed in Webflow.

The existing case study introduces Charge Offshore as a business that provides offshore charging systems for electric and hybrid vessels using clean power from offshore wind infrastructure.

The Challenge

Charge Offshore offered an innovative solution, but the website did not reflect the business’s scale, credibility, or technical value.

The previous website’s single-page format made it difficult to:

  • Explain the offshore charging solution in enough detail
  • Separate key services, use cases, and benefits
  • Build trust with technical and commercial audiences
  • Support SEO with focused landing pages
  • Present the business as a credible engineering-led company
  • Guide visitors towards enquiries or further conversations

This structure limited the brand’s effectiveness as a technical B2B business. Visitors needed to quickly understand Charge Offshore’s offering, target audience, the importance of its technology, and its role in the offshore energy and marine electrification market.

Research & Competitor Review

Before starting the design, we reviewed the market to assess how similar companies in offshore energy, marine engineering, vessel electrification, renewable infrastructure, and clean power presented themselves online.

Our goal was to identify the essential elements of a credible website in this sector, not to copy competitors.

We looked at:

  • How competitors explain complex technical solutions
  • The type of language used across marine and offshore sectors
  • How service pages are structured
  • How trust signals are presented
  • How technical information is balanced with commercial messaging
  • How calls to action are placed across the user journey
  • What visual styles are commonly used in offshore energy and marine technology

This research informed the website’s direction. The final approach needed to be clean, technical, modern, and trustworthy, while remaining accessible to non-technical decision-makers.

Website Structure Strategy

A key improvement was replacing the single-page layout with a structured multi-page website.

We organised content into clear sections and dedicated pages, allowing each aspect of the business to be explained in greater detail.

The new structure was designed to support:

  • Better user journeys
  • Clearer service discovery
  • Stronger SEO opportunities
  • More detailed explanations of the technology
  • Easier future content expansion
  • A more professional brand experience

This approach enabled the website to serve various audiences, including vessel operators, offshore energy companies, engineering teams, commercial partners, and stakeholders interested in clean power infrastructure.

UX & Content Planning

The website needed to explain a technical solution clearly, without overwhelming users.

We structured the content for clarity and logical flow. Each page guided visitors from understanding the problem, to the solution, and then to the commercial and environmental value.

The messaging focused on:

  • What Charge Offshore provides
  • Why offshore charging matters
  • How clean offshore power can support electric and hybrid vessels
  • The benefits for vessel operators and offshore energy projects
  • The credibility of the wider engineering approach
  • Clear routes for enquiries and partnership conversations

Instead of vague marketing language, we used practical, sector-specific messaging appropriate for a technical marine and offshore audience.

Figma Design Process

We designed the website in Figma before development.

This allowed us to plan the visual direction, page structure, spacing, content hierarchy, and responsive behaviour before development in Webflow.

The design approach focused on:

  • A clean engineering-led visual style
  • Strong use of sections and spacing
  • Clear headlines and supporting copy
  • Professional layouts suitable for B2B audiences
  • Better visual hierarchy across technical content
  • Mobile-friendly page structures
  • A more premium and credible brand feel

Figma also made it easier to review and refine the design before development, ensuring the website balanced technical detail with commercial clarity.

Webflow Development

After finalising the design direction, we built the website in Webflow.

We chose Webflow for its professional design control, clean page structures, and ease of future management.

The Webflow build included:

  • Responsive page development
  • Structured sections for services and solutions
  • Reusable components for consistency
  • Clear navigation across the new multi-page structure
  • CMS-ready thinking for future content expansion
  • Optimised layouts for desktop, tablet, and mobile
  • Cleaner page hierarchy to support SEO

The result is a website that is easier to manage, scalable, and better suited to Charge Offshore’s long-term digital presence.

Before

The original website was a basic one-page site with limited depth. It introduced the company but did not fully explain the solution’s value or provide enough structure for technical buyers.

Key limitations included:

  • Too much information sitting on one page
  • Limited SEO potential
  • Weak separation between services, technology, and benefits
  • Less professional presentation of the company
  • Limited space to build trust
  • Harder for visitors to understand the full offering

After

The redesigned website established a clearer and more scalable digital presence.

The new website provides Charge Offshore with a stronger platform to explain its services, communicate its role in offshore charging, and present itself more professionally to partners, operators, and engineering audiences.

Key improvements included:

  • A clearer multi-page website structure
  • Stronger positioning for a technical B2B audience
  • Improved visual design and brand credibility
  • Better user journey from discovery to enquiry
  • More space to explain the technology and benefits
  • A Webflow build that is easier to maintain and expand

The Outcome

The final website provides Charge Offshore with a significantly stronger digital foundation.

It now presents the business as more credible, structured, and aligned with the offshore energy and marine engineering sector. Transitioning from a one-page to a multi-page Webflow website has provided a clearer platform for explaining the solution, attracting relevant enquiries, and supporting future growth.

The project helped deliver:

  • A more professional online presence
  • Clearer communication of the offshore charging solution
  • Improved structure for users and search engines
  • Stronger trust with technical and commercial audiences
  • A scalable Webflow website that can grow with the business

Webflow website redesign

Figma UX/UI design

Multi-page website structure

Recent case studies

case-study-image
ELSYS Consulting & Advisory Website Redesign

Webflow website rebuild

Figma UX/UI redesign

VAMOS™ product positioning

case-study-image
MJR Power & Automation Website Redesign & Webflow Development

Webflow website redevelopment

Figma UX/UI design system

SEO-focused content structure

whatsapp-image