Back to home page
Case Study Details

MJR Power & Automation Website Redesign & Webflow Development

MJR Power & Automation delivers marine electrical engineering, automation, power conversion, offshore energy solutions, shore power, hybrid propulsion, installation, commissioning, and service support to the global marine and offshore industries.

case-study-main-image

Project Overview

MJR Power & Automation required a website that reflected the company’s scale, technical expertise, and reputation.

While the previous website offered valuable information, its structure made it difficult for users to quickly grasp the full scope of services, products, solutions, and project experience. Given MJR’s broad operations in marine electrical engineering, automation, offshore energy, and related fields, the website needed to serve more effectively as both a commercial and technical platform.

Vscale redesigned the website in Figma and rebuilt it in Webflow, delivering a modern, structured, and scalable platform that better represents MJR Power & Automation’s position in the marine and offshore sectors.

The project extended beyond a visual update. It included a comprehensive review of the existing site, content reorganisation, user journey improvements, a stronger design system, and a Webflow structure designed to support future growth in services, products, solutions, and case notes.

The challenge

Despite MJR Power & Automation’s strong reputation and technical capabilities, the previous website did not clearly communicate the company’s full value.

Although the previous site contained useful content, it resembled an information archive rather than a modern digital platform. While users could identify MJR’s involvement across various sectors, navigation between these areas needed to be more intuitive.

The challenge was to transform a technically complex business into a website that is easier to navigate, builds trust, and serves diverse visitor needs.

The website needed to:

  • Present MJR Power & Automation as a leading marine power and automation specialist
  • Make services, products, solutions and projects easier to discover
  • Improve how technical capabilities were explained
  • Support stronger SEO via clearer page structures
  • Give case notes and project experience more visibility
  • Create a more polished brand experience across desktop and mobile
  • Make future content updates easier through Webflow

As MJR works with vessel operators, offshore energy companies, engineering teams, shipyards, and technical partners, the website needed to convey capability and credibility from the outset.

Research, Audit & Planning

Before designing the new website, we reviewed the existing MJR site, current content, competitor websites, and the broader marine and offshore engineering market.

Our goal was to determine the optimal organisation of MJR’s technical offerings and how the website could better guide users through services, products, and project experience.

The research focused on:

  • How marine engineering and automation companies structure their websites
  • How offshore energy and vessel technology companies communicate technical services
  • How products and solutions should be separated from general service content
  • How case notes could be used to build trust and show delivery experience
  • How users should move from the homepage into services, products, solutions and enquiries
  • How the website could support search visibility through clearer page targeting
  • How to modernise the brand without losing the industrial, engineering-led feel

This planning phase established a clearer direction: the new MJR website needed to be technical, established, modern, and commercially focused, while remaining practical for engineering audiences.

Website Structure & Content Move

A key aspect of the project was restructuring the website into a clearer Webflow build. The previous site’s broad information was reorganised into more focused sections, moving away from general pages and lengthy content blocks to support clearer user journeys.

The new structure provided MJR with dedicated sections, making the website easier to use and allowing each business area to better communicate its value.

The content migration was managed carefully to preserve important technical information. It was reorganised into a streamlined structure, making it easier for visitors to understand MJR’s services, locations, and capabilities across marine and offshore environments.

UX & Figma Design Process

The website was first designed in Figma, then developed in Webflow.

This approach enabled planning of layout, page hierarchy, visual direction, components, and responsive behaviour before development. The design needed to be advanced and polished, while remaining rooted in MJR’s industrial and engineering background.

The Figma process focused on:

  • Creating a stronger homepage journey
  • Improving navigation among products, solutions and services
  • Designing reusable page sections to promote consistency
  • Giving technical content more breathing space
  • Improving mobile and tablet layouts
  • Creating clearer calls to action
  • Making case notes and project work easier to browse
  • Building a visual system that could scale across future pages

This design phase transformed a complex service offering into a clearer, more structured website experience.

Webflow Development

Once the Figma direction was agreed, the website was developed in Webflow.

Webflow enabled the creation of a responsive, CMS-driven website that is easy to update. This flexibility allows MJR to expand the site with new case notes, services, products, solutions, vacancies, and company updates.

The Webflow build included:

  • Responsive development for desktop, tablet and mobile
  • CMS structures for extensible content management
  • Reusable components across key page types
  • Product and service page templates
  • Case note layouts for project-led content
  • Clearer enquiry and contact pathways
  • Improved page hierarchy for SEO
  • A stronger structure for future website expansion

The new build provides MJR with a flexible platform, simplifying website maintenance and eliminating reliance on rigid or outdated structures.

Visual Experience & 3D Interaction

The new website also delivers a stronger visual experience.

Instead of relying solely on static pages, the redesign incorporates visual depth, stronger imagery, clearer layouts, and interactive elements to create a more engaging website.

A key feature is the 3D vessel visual, which communicates the company’s marine and offshore expertise in a compelling and memorable way.

This approach modernises the website while maintaining relevance for MJR’s technical audience.

The visual improvements helped:

  • Make the website feel more premium and engineering-led
  • Improve engagement on key pages
  • Support clearer storytelling around marine and offshore capability
  • Make technical services easier to connect with real-world vessel environments
  • Strengthen the overall impression of the brand

Before & After

Before the redesign, the MJR website contained valuable content and technical information, but its structure and presentation made it feel outdated and difficult to navigate.

After the redesign, the website became a clearer digital platform with improved navigation, enhanced service discovery, greater project visibility, and a more professional visual identity.

Key improvements included:

  • A clearer split between products, solutions, services and projects
  • A stronger homepage with more focused messaging
  • Better use of project and case note content
  • A more polished design system
  • Improved mobile responsiveness
  • More professional presentation of technical services
  • A scalable Webflow CMS structure
  • Stronger foundations for SEO and future content

The redesign transformed the website from an information-heavy site into a structured digital platform that supports commercial growth, technical credibility, and ongoing content development.

The Outcome

The redesigned MJR Power & Automation website provides the business with a stronger, more scalable digital presence.

It now presents MJR’s engineering depth, technical capabilities, and sector experience more clearly. Visitors can easily navigate between products, solutions, services, and case notes, while the business benefits from a Webflow platform that is simple to update and expand.

The project helped deliver:

  • A more modern and credible website experience
  • Stronger communication of marine power and automation services
  • Better structure across products, solutions, services and projects
  • Stronger visibility for case notes and project experience
  • Improved user journeys for technical and commercial audiences
  • A scalable Webflow website built for future growth
  • A more polished brand presence across desktop and mobile

The final result is a website that more accurately reflects the quality, scale, and technical value of MJR Power & Automation’s work in the marine and offshore sectors.

Webflow website redevelopment

Figma UX/UI design system

SEO-focused content structure

Recent case studies

case-study-image
Charge Offshore Website Redesign & Webflow Development

Webflow website redesign

Figma UX/UI design

Multi-page website structure

case-study-image
ELSYS Consulting & Advisory Website Redesign

Webflow website rebuild

Figma UX/UI redesign

VAMOS™ product positioning

whatsapp-image