Website Migration and Redesign
What They Wanted
When HayMax initially came to us, over seven years ago, they were looking for a complete website rebuild that would better represent their brand identity.
The goal of the HayMax website was to increase brand visibility, direct more people to their local HayMax stockists, encourage more online sales and provide additional information about the HayMax product range.
When we delivered the initial website redesign, we adhered closely to the brand guidelines as laid out by HayMax, ensuring their strong brand identity was present throughout the website.
However, when we discovered that HayMax had been subject to an unfortunate ransomware attack in which the entire HayMax IT system was hacked, we reached out to offer the client solutions to fix the hack. While working to rectify the damage caused by the hack, we also suggested a refurbishment of the seven-year-old website.
They felt that undertaking work to recover and reinforce the security of the site provided the ideal opportunity to also give their ecommerce platform a refresh to bring the aesthetic of the site up to date.
Our experience in web design has taught us that technology and customer expectations develop and evolve quickly in the e-commerce sector.
So, when HayMax got in touch with us for a site refurbishment, we were more than happy to help out and revamp their digital platform to encourage more visitors and sales.
Despite our original website design being fresh and modern when it was first launched, seven years on it was in need of refurbishment to improve the user experience and bring the ecommerce platform in line with current customer expectations.
To get the most out of their ecommerce operation and to be able to generate more business via their online presence, HayMax needed to update their platform. Therefore, one of the challenges of this project was to migrate the HayMax site from an ageing platform to an up to date, more secure WordPress platform.
Alongside the performance enhancements that migrating to WordPress would provide, we also planned to update the website design to modernise the HayMax website.
However, the brand has firmly established brand guidelines which would need to be adhered to. Therefore, a secondary challenge of this project was to make improvements to the design and user experience of the website without compromising on the current brand guidelines.
By successfully addressing all these challenges in the website redesign, we would be able to produce a beautifully designed website that was geared towards enhancing the user experience, performed optimally and offered increased security, all within the existing brand guidelines.
What We Did
At Hedgehog Digital we always take a user-first approach to our work. From design to SEO and content; everything is focused on improving the user experience, satisfying their needs and solving their specific problems.
This user-focused approach is best seen in our work concentrating on search intent; the reason behind a user’s search.
By getting a better understanding of why a user is searching, rather than simply the words they use to search, we can help brands and businesses to better target their content for maximum results.
Therefore, our redesign work with HayMax was all geared towards improving the user experience for visitors to the website and solving their problems.
HayMax is situated in a specific area of the hayfever and allergy relief sector; all-natural, balm-based allergy relief.
By understanding who was searching for these products and, crucially, why they were searching, we were able to understand the needs of HayMax’s potential customers and could create a website design that addressed those needs.
Our research found that HayMax’s customers wanted to know more about how the hayfever relief balm worked, whether it was as effective as Vaseline, if it was safe for use during pregnancy and, importantly, where to purchase.
Once we had this understanding we could begin to redesign the HayMax website, we achieved this in a number of ways.
Our first step was to move the HayMax website from the ageing platform it had originally been developed on, to a more flexible WordPress platform.
WordPress is an incredibly powerful and versatile platform, especially for ecommerce sites, and our experienced web designers and developers are experts at crafting visually stunning, high performing WordPress sites.
For our work with HayMax, migrating to WordPress gave us greater control over the security of the site. It also offered continual automatic updates to the platform from the WordPress developers, as well as providing the flexibility to enable additional site features.
Building on WordPress gave us greater control over the design of the website and allowed us to improve the site’s loading times and page speed; all things which would improve the user experience and help to better serve the user’s needs.
We already had extensive experience in migrating websites to new platforms from our work with previous clients. Experience which we put into practice with this migration to make the move between platforms as efficient as possible, avoiding any potential problems with loss of traffic or other performance issues.
Mobile-First Website Design
Following our work migrating the site from its original platform to WordPress, we began our redesign work.
We know that people use their mobile devices more than ever to make searches and complete purchases.
In December 2019, mobile use overtook desktop for market share of internet usage for the first time in the UK. Meaning, more people now use mobile devices to access the internet than any other device in the UK.
Therefore, we knew we needed to take a mobile-first design approach, to give mobile users the best possible experience of the website when visiting the site on their mobile device.
Our mobile-first design provided a clean, responsive design which gave mobile visitors an optimised experience of the site through single columns of content that flowed smoothly through the page as they scrolled.
Prominent call to action items with well-spaced buttons helped to improve the mobile user experience, allowing mobile browsers to navigate through the site and click on buttons or items with ease.
Removing non-mobile-friendly features such as hover features and popups created a smoother interface and encouraged users to stay within the site for longer to ultimately progress to purchase.
One important consideration throughout all of our mobile-first design work was to reduce the load times and improve the site speed.
53% of mobile visitors will leave a page that takes longer than three seconds to load, so getting the load time down for HayMax could dramatically improve the number of users staying on site.
Therefore, all our work on the redesign of the HayMax site was undertaken with site speed in mind. We regularly checked that each new feature or adjustment improved the site speed, and if anything was detrimental to the load times, then it wasn’t implemented.
Defining Two Distinct Visitor Routes
Haymax had a dilemma with aligning the two distinct purposes of their website; to direct potential customers to physical shops that stock the products, and to encourage in-site purchases through their ecommerce platform.
As a brand, HayMax was aware that, while more in-site sales would be beneficial, they also needed to help direct customers to make a purchase from their stockists, including pharmacies, supermarkets and health stores.
To address this, we developed a landing page which immediately and prominently directed users in two distinct paths; to the site’s ecommerce platform to purchase on-site, or to a page featuring an interactive map and list of HayMax stockists.
Making this clear distinction between pathways for visitors looking to purchase in-site and visitors looking for directions to stockists helped to create a user experience that catered to two different intentions within one design.
Rebuilding The Purchasing Journey
Our work on HayMax focussed on functionality as well as appearance, with a concentrated effort being put into rebuilding the purchasing journey. This was another aspect of the website redesign which would work to improve the overall user experience of the site.
The ecommerce pathway provided a more natural flow for online shoppers to progress through the site from initial landing to product pages and ultimately the checkout. This would work to encourage more sales within the site.
Our web designers created a simple and logical purchase journey which directed the customer from the product page to the basket and through to the checkout.
The progressions from one section to the next were clearly signposted with simple but well-designed calls to action and buttons instructing the customer to ‘shop now’, ‘select options’, ‘add to basket’ and ‘checkout’.
As with our design work, the rebuild of the purchasing journey was created with mobile users in mind, leading to a route through the website which was as fast and functional on mobile as it was on desktop platforms.
This rebuilding work all centred on giving users an improved experience navigating through the site to purchase.
Simple dropdown menus allowed users to select the preferred packs of their chosen product on the product pages, and call outs to delivery information helped to answer any potential queries a customer may have before purchasing.
All of these elements simplified the buying journey and encouraged users to stay on the page rather than breaking up their journey by having to navigate to multiple pages to find the required information.
This rebuilt purchasing journey worked to give HayMax a professional ecommerce platform while staying true to their brand guidelines. It also helped to encourage more site visitors to purchase directly from the HayMax website with a simple journey through to completion and integrations with popular payment processor, Paypal.
Simple, Functional SEO
A beautifully designed, mobile-first website is no use to any business unless it gets visits from potential customers who are engaged and ready to convert to customers. This meant we needed to optimise the HayMax website to be attractive to and discovered by the search engines for keywords that were relevant to their potential customers.
We began with detailed keyword research to understand the terms that HayMax’s target customers were searching for. These keywords would form the basis for our search engine optimisation efforts.
But, knowing what terms audiences are searching for is only half the picture.
At Hedgehog Digital, we believe that going beyond the keywords used by searchers, to understand why people are searching and what needs they’re looking to satisfy is essential for success in the search engines.
Understanding the intent behind a search helps us to know what type of content would best serve the searcher in their moment of need to encourage them to engage with that content.
For HayMax, understanding the search intent of their target audience meant that we could create specific content which would serve them and solve their problems.
Catering For ‘Need To Know’ Moments
Research has found that 65% of people use their mobile phones in their ‘need to know’ moments, where they need information delivered to them immediately and in an easy to understand format.
For our work with HayMax, the searches made by potential customers in their ‘need to know’ moments were important to understand and address in the site content to help guide customers towards completing a purchase of a HayMax product.
We knew from our research into the search intent of the client’s target audience, that people were making searches for terms including; ‘Can you use HayMax when pregnant?’ and ‘Is Vaseline as good as HayMax?’.
These searches indicated that potential customers were looking for additional information about the product before committing to purchasing.
Therefore our SEO work centred on optimising the HayMax website to rank for these informational types of searches.
We prominently featured site content which answered these types of questions in a clear and concise manner while also including the relevant keywords.
This helped to serve the customers’ need for more information while also making HayMax attractive to the search engines, landing them higher positions in the search engine results page.
Our work with the HayMax website redesign was centred on improving the user experience of the website.
If users found it easier and more enjoyable to navigate through the website then they would be more likely to spend longer on site and ultimately make the conversion to become a customer.
We also worked hard to implement changes which would improve the speed and performance of the website to further improve the user experience. These changes would also make the website more attractive to the search engines who use site speed and performance as ranking factors when determining the order of the results page
The results of all our work on the HayMax website refresh were fantastic.
Our efforts to improve the website’s performance and speed were incredibly successful. In the month since the redesigned platform went live, HayMay’s website load time had reduced by 42.4% on average across all browsers.
On mobile browsers, the average page load time was even more impressive. Load times for the Safari in-app browser, the most popular mobile browser in the UK, reduced by 79.33% in the six weeks following the relaunch of the site.
As we’d built the website specifically with mobile browsing in mind, this was a great result and would have a positive impact on the user experience for HayMax’s mobile visitors.
Alongside this reduction in load times, our redesign efforts also worked to reduce the bounce rate on site. Bounce rate is the percentage of visitors who leave a site after visiting only one page.
Because one of HayMax’s goals was to encourage visitors to navigate naturally through the site to multiple pages and ultimately to find a stockist or make a purchase within the site, reducing the bounce rate was very important.
Our work to rebuild the purchasing journey through clear calls to action, logical user-friendly navigation through the site and improved integrated payment options all helped to bring the bounce rate down.
HayMax’s bounce rate reduced by 30.65% following our redesign efforts, in the six weeks since the relaunch of the site. Which is a great improvement for a website such as HayMax
For any business with a digital platform, one of the most important things is to get eyes on their content. Whether a website is used as a tool to build greater brand awareness, display a business’s authority in their sector or as a sales channel for their products or services, visitors are essential.
HayMax is no different. They need people to visit their site, consume the content featured on the site and, hopefully, commit to a purchase.
Our work to optimise the performance of the platform, improve the user experience, integrate strong SEO and refresh the design of HayMax’s website was all completed with the goal of bringing in more visitors to the site.
These efforts paid off as since we completed the work, HayMax’s page views had risen by 28.38% views in the six weeks following the relaunch of the site.
However, while increasing the page views is important, we also wanted to be sure we were bringing in more individual visitors rather than just repeat visitors.
Our research into the performance analytics of HayMax revealed that the unique page views had increased by 33%, following the relaunch of the site. Meaning more individual visitors were coming to the site than before our redesign efforts.