MEDHA

Medha is a trailblazer in electric propulsion technology, providing innovative solutions for transportation across rail, road, and marine industries. Renowned for its commitment to sustainability and cutting-edge engineering, Medha plays a pivotal role in driving the adoption of greener technologies worldwide. However, as an industry leader, Medha’s online presence lagged behind its technological achievements, and the company sought a modern, user-centric website to match its forward-thinking ethos and global ambitions.

The vision

The primary goal of the project was to create a website that reflected Medha’s leadership in electric propulsion technology and its commitment to sustainability. Medha envisioned an online presence that would not only highlight their innovative solutions but also engage diverse audiences, from stakeholders to customers and industry professionals.

Key objectives included:

1. Showcasing Medha’s advanced technology and sustainability initiatives through compelling storytelling.
2. Enhancing usability and user experience with a streamlined, intuitive design.
3. Strengthening brand identity with refreshed aesthetics and interactive features.
4. Equipping the internal team with tools for easy content updates and management.
   

Butterfly’s role was to translate these ambitions into a cutting-edge website that combined functionality, aesthetics, and engagement.

The challenges

Like any transformative project, the Medha website redevelopment posed unique challenges:

1. Conveying technical excellence: Medha’s products are highly specialised, making it crucial to present complex technical information in an engaging and accessible manner.
2. Balancing aesthetics with functionality: The design needed to strike a balance between bold visuals and intuitive navigation to cater to diverse user groups.
3. Ensuring seamless content migration: Medha’s existing content, hosted on a Joomla platform, had to be carefully migrated to WordPress without data loss or disruption.
4. Achieving high performance: The site required fast loading speeds, even with dynamic features like animations and interactive elements.

The process

Butterfly’s approach to the Medha website redevelopment was systematic, collaborative, and innovative, ensuring that every detail aligned with the project’s vision. Below is a detailed look at the process:

1. Discovery and strategy workshops

Butterfly conducted a series of workshops with Medha’s stakeholders to:

• Identify user needs and pain points.
• Understand Medha’s products and their applications in rail, road, and marine industries.
• Define the goals and priorities for the website, including its storytelling and practical functionalities.

These sessions informed the creation of an information architecture (IA) that would guide the structure of the site, ensuring it was intuitive and user-friendly.

2. User-centric design and branding

The design phase began with a focus on creating a visual identity that reflected Medha’s brand values of innovation and sustainability. Key elements included:

• A refined colour palette, retaining the iconic black and red scheme while introducing nuanced applications to avoid visual overload.
• Updated typography and design templates for a cohesive, modern look.
• Interactive storytelling elements, such as an animated train showcasing Medha’s products in action.

3. Development with WordPress and Elementor

To empower Medha’s team with easy content management capabilities, Butterfly utilised the WordPress CMS with Elementor Page Builder. This setup provided:

• A robust, scalable platform for content updates.
• Custom templates for landing pages, product catalogues, and sector-specific sections.
• Advanced features, such as:
  • Product search and filtering tools.
  • A responsive design optimised for mobile, tablet, and desktop.
  • GDPR compliance features, including a cookie consent banner.
    

4. Integration of advanced features

The new website included several standout features designed to enhance user engagement and functionality:

• Interactive animations: An animated transparent train visually demonstrated the components Medha supplies, making complex technology relatable and engaging.
• Product catalogue: A dedicated section allowed users to easily explore Medha’s offerings, complete with search and filtering capabilities.
• High performance: The team implemented tools like WP Rocket to optimise CSS, JS, and image loading, ensuring fast page speeds even with dynamic content.
  

5. Quality assurance and testing

Butterfly’s rigorous quality assurance process ensured the website met industry best practices for accessibility, performance, and security. Key measures included:

• Compliance with WCAG standards for accessibility.
• Structured testing cycles to catch and resolve bugs.
• Load time optimisation to ensure pages loaded within three seconds.
  

6. Collaborative project management

Throughout the project, Butterfly maintained clear communication with Medha using tools like Jira, Slack, and Google Meet. A dedicated digital producer oversaw the project, ensuring timely delivery within budget while accommodating iterative feedback.

The outcome

The launch of the new Medha website marked a significant milestone in the company’s digital transformation. Here are the key outcomes:

A modern, engaging online presence

The website’s refreshed design and interactive features effectively convey Medha’s innovation and sustainability, making a strong impression on visitors.

Improved usability and navigation

With a user-centric IA and advanced search functionalities, the website offers an effortless browsing experience, allowing users to quickly find the information they need.

Enhanced brand identity

The updated branding—including a refined colour palette, typography, and templates—strengthens Medha’s position as an industry leader.

Seamless content management

Medha’s internal team can now effortlessly update and manage content, thanks to the intuitive WordPress and Elementor setup.

Increased engagement and accessibility

Interactive elements like the animated train and sector-specific pages bring Medha’s technology to life, while WCAG-compliant design ensures the site is accessible to all users.

Stronger market position

The new website bolsters Medha’s global standing, effectively communicating its technological expertise and commitment to sustainability to a broad audience.