Project Overview

The project involved refactoring an existing Webflow website with poorly written underlying code, redesigning broken pages, and implementing a new news article page that integrates with the Webflow CMS and Instagram feed. The client's website had a visually appealing design, but the codebase was difficult to maintain and had several broken components. My role was to improve the codebase, fix broken pages, and design and implement a new news and Instagram feed page from scratch.

The website was initially created by a duo of freelance web developers who made the website in Webflow. The client wanted to keep the front-end of the website, but their developers abandoned the project. While the interface was beautiful, the code-base was poorly implemented and a nightmare to parse for a non-technical business owner. It was the equivalent of a house with a beautiful facade built on a poor structure held together by duct tape and glue. My job essentially was to keep the core of what the previous team had designed visually, but overhaul the code to be more friendly for non-web folk to edit without breaking anything.

Challenges Faced and Solutions Implemented

1. Poorly Written Codebase

Challenge: The existing codebase was disorganized, with redundant CSS, inline styles, and pages that were difficult to debug. This made it challenging to maintain and extend the website.

Solutions:

• Refactored the CSS by consolidating redundant styles into reusable classes and removing inline styles.

• Modularized JavaScript code by breaking it into smaller, reusable functions.

• Implemented BEM (Block-Element-Modifier) methodology for CSS to improve readability and maintainability.

• Used Webflow's built-in CMS capabilities to dynamically generate content, reducing the need for hardcoded HTML.

2. Visual Glitches and UI Inconsistencies

Challenge: Several pages on the website were broken or had inconsistent UI elements, which affected the user experience.
A couple of memorable examples were text strings in supposedly-identical sections that having inconsistent spacing, grid layouts with bad spacing, and different styled buttons between pages.

Solutions:

• Redesigned broken pages to match the client's branding and improve usability.

• Ensured consistency across all pages by creating a design system in Figma, which included typography, color schemes, and component styles.

• Tested all pages across different devices and browsers to ensure responsiveness and functionality.
• Aligned elements using simple flex-box CSS rules instead of previous developer’s manual padding and margin “magic” numbers.


3. Designing and Implementing the News Article Page

Challenge: The client wanted a new news article page that integrates with their Webflow CMS and Instagram feed. This required designing a new UI from scratch and implementing it in Webflow.

Solutions:

• Designed the UI in Figma, focusing on a clean and modern layout that aligns with the client's branding.

• Used Webflow's CMS to dynamically pull in news articles, allowing the client to easily manage content.

• Integrated the Instagram feed using Instagram's API and embedded it into the page, ensuring it was responsive and visually appealing.

• Added pagination and filtering options for the news articles to improve user experience.


4. Integrating Instagram Feed

Challenge: The Instagram feed integration required fetching data from Instagram's API and displaying it seamlessly on the website.

Solutions:

• Used Instagram's Graph API to fetch the latest posts from the client's Instagram account.

• Created a custom JavaScript function to parse the API response and dynamically generate HTML elements for each post.

• Styled the Instagram feed to match the overall design of the website, ensuring it was responsive and visually consistent.


5. Ensuring Maintainability

Challenge: The client wanted the website to be easy to maintain and update in the future.

Solutions

• Documented the refactored codebase, including CSS classes, JavaScript functions, and Webflow CMS setup.

• Provided the client with a style guide and documentation on how to update content in the Webflow CMS.

• Used Webflow's built-in features, such as symbols and reusable components, to make future updates easier.


6. Performance Optimization

Challenge: The website had performance issues, including slow load times and large file sizes.

Solutions

• Optimized images, videos, and other assets to reduce file sizes without compromising quality.

• Minified CSS and JavaScript files to improve load times.

• Implemented lazy loading for images and the Instagram feed to further enhance performance.

4. Integrating Instagram Feed

Challenge: The Instagram feed integration required fetching data from Instagram's API and displaying it seamlessly on the website.

Solutions:

• Used Instagram's Graph API to fetch the latest posts from the client's Instagram account.

• Created a custom JavaScript function to parse the API response and dynamically generate HTML elements for each post.

• Styled the Instagram feed to match the overall design of the website, ensuring it was responsive and visually consistent.


5. Ensuring Maintainability

Challenge: The client wanted the website to be easy to maintain and update in the future.

Solutions

• Documented the refactored codebase, including CSS classes, JavaScript functions, and Webflow CMS setup.

• Provided the client with a style guide and documentation on how to update content in the Webflow CMS.

• Used Webflow's built-in features, such as symbols and reusable components, to make future updates easier.


6. Performance Optimization

Challenge: The website had performance issues, including slow load times and large file sizes.

Solutions

• Optimized images, videos, and other assets to reduce file sizes without compromising quality.

• Minified CSS and JavaScript files to improve load times.

• Implemented lazy loading for images and the Instagram feed to further enhance performance.

Key Takeaways

Refactoring Legacy Code: Refactoring a poorly written codebase requires careful planning and attention to detail. It's important to document changes and ensure that the new code is maintainable and scalable.

Design Consistency: Creating a design system in Figma helped ensure consistency across all pages and made it easier to implement the new news article page.

Integration Challenges: Integrating third-party APIs, such as Instagram's API, can be challenging but is manageable with proper documentation and testing.

Client Communication: Regular communication with the client was crucial to ensure that the final product met their expectations and requirements.

Conclusion

This project was a great opportunity to apply my skills in UI/UX and CSS to a real-world scenario. Despite the challenges, I was able to deliver a refactored, maintainable, and visually appealing website that met the client's needs. The experience reinforced the importance of clean code, consistent design, and effective communication in web development projects.