Project : Website Split

Three years ago, my client approached me to develop a Webflow landing page for their website. Since then, we have built a solid relationship and engaged in extended collaboration, working on multiple landing pages and providing ongoing maintenance support. Due to their business's rapid growth, my client made the strategic decision to split their operations into two distinct offers.

The decision to split the website into two separate offerings was driven by several factors, including:

1. Targeting specific customer segments: The two offers cater to different customer segments with unique needs. The split enables the client to create tailored offerings that are more appealing and relevant to each specific segment. This focused approach enhances customer satisfaction and drives better results.
2. Enhanced risk management: By having two distinct products, any negative impact on one product, such as reputational or operational issues, will have a lesser effect on the other product. This division ensures better risk mitigation and safeguards the overall business.
3. Improved operational management: The company had two teams working on their products, but there was significant overlap in their operations, leading to inefficiencies. The split allows for better management and streamlining of operations, increasing overall efficiency.
4. Upselling and cross-selling opportunities: By splitting the products, the company can leverage upselling and cross-selling opportunities. Each offering can be positioned to complement the other, enabling the company to generate additional revenue by selling related products or services to their customer base.

Since the Company's website was initially developed using Webflow, migrating from one platform to another was not necessary. Instead, a decision was made to transfer the educational offer to a new domain while retaining the service offer on the existing website.

Project Stages

The project was divided into three stages:

1. The development of the new website for the educational offer in Webflow. While a complete redesign was not necessary, we enhanced the visual appeal by updating the image assets with custom-shot professional photographs. Additionally, we modernized the vector assets, ensuring a more contemporary aesthetic. Furthermore, we made slight design adjustments to elements that appeared outdated, revitalizing the overall look and feel of the website.

2. Transition phase. During this stage we prepared the original website for the split, conducted QA testing for both websites, pushed new website and updated version of original website live, and performed post-launch tasks to ensure their good performance and address any issues.

3. The rebuilding of the original website. While I was engaged in the first and second stages of the project, the design agency concurrently developed a new design for the original website. In the third stage, my task was to rebuild the original website in Webflow, incorporating the newly created design.

Challenges

One of the main challenges was to analyze the existing content and decide how it would be divided between the two separate websites.

Over the years, my client has continuously enriched their website with a diverse range of valuable resources. These include an extensive collection of blog posts, news updates, event announcements, recorded sessions, and webinars. This commitment to providing a wealth of information and interactive content has contributed to their website's growth and enhanced user experience and the decision to split the value between original website and a new one was taken.

Another challenge involved creating a comprehensive list of redirects.

Creating redirects when splitting a website into two separate websites is important for several reasons:

1. User experience: Redirects ensure that visitors who access the old URLs are automatically redirected to the corresponding pages on the new websites. This helps maintain a seamless user experience and prevents users from encountering broken links or error messages.
2. SEO preservation: Redirects play a crucial role in preserving the search engine optimization (SEO) value of the original website. By implementing proper redirects, you can transfer the SEO authority and ranking signals from the old URLs to the new websites. This helps to maintain or even improve the search visibility and organic traffic of the newly created websites.
3. Backlink preservation: If the original website has acquired backlinks from other websites, implementing redirects allows you to preserve the value of those backlinks. Redirecting the old URLs to the relevant pages on the new websites ensures that the backlinks continue to drive traffic and contribute to the SEO efforts of the new websites.

Another challenge we encountered was to convert static pages into dynamic template pages whenever possible, which required careful consideration and implementation.

Using template pages rather than static pages offers several advantages:

1. Consistency: Template pages allow for consistent design and layout across multiple pages on a website. By using a template, you can maintain a uniform look and feel, ensuring a cohesive user experience throughout the site. Any changes made to the template will automatically apply to all pages using that template, saving time and effort in updating each individual page.
2. Efficiency in updates: When you need to make changes or updates to your website, using template pages simplifies the process. Instead of modifying each static page individually, you can update the template, and the changes will be reflected automatically across all pages using that template. This approach streamlines maintenance and reduces the likelihood of errors or inconsistencies.
3. Scalability: Template pages are particularly beneficial for larger websites or those with a significant number of pages. As the number of pages increases, managing static pages becomes cumbersome. With templates, you can easily add new pages by applying the desired template, ensuring a consistent structure and design across the site.
4. Time and cost savings: By utilizing template pages, you can save time and cost in website development and maintenance. Rather than designing and coding each static page separately, you can create reusable templates that can be applied to multiple pages. This efficiency not only speeds up the development process but also reduces the overall cost of maintaining the website.

As a result of this project, a total of 21 previously static pages were successfully converted into dynamic pages.

Project Milestones

1. Set-up of a new project in Webflow. Create a style guide and define basic styles and color palette.
2. Define page structure and user flow for the new website.
3. Create a list of all URLs, determine which will be moved, and define new URLs for redirects.
4. Evaluate the navigation structure and menu design to accommodate the split and ensure easy content discovery for users.
5. Design all reusable components in Figma (low-fidelity, visual list format).
6. Develop all reusable components in Webflow.
7. Import and optimize assets. As part of this project, image and vector manipulations were performed due to an update of visual assets.
8. Import the databases, transferring some collections completely and others partially. Optimize collection structures by reducing fields where possible, adding explanatory texts, and recording tutorials for the marketing team on collection maintenance and updates.
9. Develop the pages and hand them off to the marketing team to review and update the copy using Editor mode.
10. This project involved transitioning from HubSpot form styling to custom styling. Perform all necessary styling in Webflow and update settings in HubSpot accordingly.
11. Update internal links within the content to point to the new URLs.
12. Conduct usability testing on the new websites using a custom checklist to identify any issues or areas for improvement.

These are the main milestones, with additional tasks performed during the pre-launch stage.

Thanks to meticulous planning and effective implementation, we were able to achieve zero downtime during the project. The original website experienced only a seven-day period of no-publishing while the necessary changes were being implemented.

Post-launch Tasks

1. Set up Google Analytics, Tag Manager, Ads, and Search Console to track website performance and gather valuable data.
2. Review and optimize meta descriptions, SEO titles, and open graph tags for each page to improve search engine visibility and click-through rates.
3. Implement schema markup where applicable to enhance search engine understanding and display of relevant information.
4. Ensure a seamless lead capturing flow by testing and verifying its functionality.
5. Remove unnecessary collections, assets, and animations from the original website to streamline the overall website performance.
6. Thoroughly test and verify the effectiveness of redirects to ensure smooth navigation and proper indexing.
7. Validate each page against Webflow's audit guidelines to address any potential issues or areas for improvement.
8. Assess website speed using Lighthouse and make necessary optimizations to enhance performance and loading times.
9. Check the website for accessibility compliance and make improvements as needed to ensure inclusivity.
10. Monitor and analyze post-launch traffic, user behavior, and conversions on both websites to gain insights and identify areas for optimization.
11. Keep track of the indexing status of the new website using Google Search Console.
12. Update marketing materials and online channels to reflect the recent changes and redirect traffic to the appropriate sections of the split websites

These are the main tasks involved in the post-launch stage, and additional tasks may were undertaken.

‍

I am available for full-time contract work and dedicated to handling complex projects. By engaging in this type of collaboration, you can expect my undivided attention and commitment throughout the duration of the project. I will be online and readily available for communication, ensuring prompt responses and the ability to address urgent matters without delay. With my complete focus on your project, you can trust that I will prioritize its success and deliver high-quality results. Contact me.