My responsibility in the Applecart project was to develop and enhance the Solutions and Careers sections of the website, as well as to implement a dynamic modal system. This system was crafted to offer detailed insights about the Applecart team, accessible from the homepage and the About page.
The task for the Careers page involved a simple integration and customization of a third-party plugin. Meanwhile, the Solutions page required a more intricate solution, specifically a React-like rendering feature that is not typically available in Webflow.
The modal system was designed to be distributed across (at least) two different pages and integrated into several team member profiles, necessitating a development approach that was efficient, scalable, functional, and aesthetically pleasing.
Pseudo Dynamic Rendering
The biggest issues when developing the pages I was in charge of, were figuring out how to effectively implement the functionality for the Solutions page, and the modals.
One of the primary hurdles in developing the Solutions page was the client's requirement for implementing dynamic rendering, similar to a React application—where content updates are triggered by user interactions.
This feature is not natively supported by Webflow. My task involved creatively using Webflow’s existing capabilities to replicate this rendering, in appearance, which required some innovative problem solving.
Rendering Through Interactions
Fortunately, Webflow's interactions offer extensive customization possibilities, which are straightforward to apply with the right strategy.
I began by constructing a flowchart that detailed the sequence of user interactions, from clicking an initial button, to achieving the desired functionality. This clear, step-by-step approach greatly simplified the implementation process, enabling the dynamic rendering capabilities akin to a React application.
Any intermediary steps that couldn't be achieved via the Webflow interactions panel were achieved via custom JavaScript.
A Versatile modal
Creating modals in Webflow is typically straightforward, but this project presented a unique challenge. The client specifically wanted the team modals to integrate seamlessly with the user experience, without redirecting users or using traditional pop-up modal approaches that might disrupt page navigation.
Additionally, I needed to ensure that the modals not only matched the designs provided in the Figma files but also were scalable enough to accommodate the profiles of numerous team members. This required a solution that could adapt to various content volumes and layouts without compromising the design integrity or functionality as the team expanded.
A Pliable Template
I first developed a single, versatile modal template. This template was designed to remain hidden by default and could dynamically display a team member's relevant information.
Next, I constructed a (hidden) CMS collection directly on the page, showcasing each team member's name, role, profile picture, and a link to trigger the modal. After properly formatting this collection, the initial setup was complete.
For the interaction, I used JavaScript and the Finsweet modal plugin to link the visible team member's CMS information with the modal template. This allowed the modal to populate dynamically upon clicking a team member's link. This kept the design lightweight and manageable, and ensured that the modal integration was seamless and aligned with the client's vision.
One of the highlights for me in this project was definitely putting together the Solutions page. Not only did we nail the client’s expectations, but they were really thrilled with the results. It was also a huge learning curve for me.
Tackling this project early on introduced me to some pretty complex challenges and seriously deepened my skills in dynamic web development. This whole experience has been a game-changer, boosting my confidence and gearing me up for even tougher projects down the road.