Framer Projects
Quadzio – Interactive Form Redesign & Functional Upgrade
Overview:
Quadzio approached me with a unique challenge involving their student registration form. They needed a custom search and submission feature that their existing Framer form setup couldn’t handle.
The Challenge:
The client wanted users to be able to search through a drop-down list of schools, and if their school wasn’t listed, they should be able to add it manually, automatically saving the new entry to the list for future users. Since this functionality was beyond Framer’s built-in capabilities, it required a fully custom-coded solution.
The Solution:
I rebuilt the entire form using custom code while maintaining the same visual style and layout as the original Figma design. I integrated a dynamic search and add feature that allowed users to easily find or create their school entry in real-time. Along the way, I also refined a few visual sections, ensuring that the final build closely matched the Figma prototype in both aesthetics and responsiveness.
The Result:
The final implementation delivered exactly what the client envisioned, an intuitive, smooth, and scalable form experience that combined design precision with functional depth. The client was pleased with the result, especially given the custom coding and iterative collaboration involved in getting the search logic right.
Celebrity Chef – Recipe Website Development
Overview:
In October 2024, I was approached by a celebrity chef to build a completely new recipe website from scratch. The client already had an existing site but wanted something far more modern, dynamic, and user-friendly to showcase their wide collection of meal recipes.
The Challenge:
The most demanding part of the project was managing a large content database. The client had over 100 recipes, all of which needed to be organized and displayed dynamically using a robust CMS system. In addition, they wanted the site to feature multiple custom animations and micro-interactions that would make navigation feel lively and engaging.
The Solution:
I developed the entire website in Framer, creating a custom CMS integrated with Google Sheets for easy content management and updates. I designed complex animations and used Framer variants to create a sense of motion and personality across the pages. The build combined clean structure with dynamic visuals to give the chef’s brand a fresh, professional online presence.
The Result:
The finished website offered a seamless experience where every recipe was dynamically linked from the CMS. The client was thrilled with the visual appeal, interactivity, and smooth performance, especially the efficient Google Sheets integration that simplified content updates.
Bordafri – Safe Labor Migration Platform Prototype
Overview:
Bordafri is a forward-thinking company on a mission to make cross-border labor migration safe and transparent, starting with Africa. They aim to eliminate scams and human trafficking risks by building a secure digital platform where verified companies can connect directly with verified workers for legitimate overseas employment opportunities.
The Challenge:
The client needed a prototype website that could clearly communicate their vision to investors, partners, and early users. The website had to convey complex ideas, from secure recruitment to visa education, in a simple and visually engaging way. Additionally, the design required numerous animations to make the experience lively while still maintaining a professional tone.
The Solution:
I designed and built the prototype in Framer, creating a vibrant, animation-rich experience that told the Bordafri story clearly and convincingly. I also developed mock-ups showcasing how the future web app would function for both employers and job seekers, detailing the core flows, UI elements, and platform interactions. Beyond that, I crafted a custom color palette that reflected optimism, trust, and African vibrancy, aligning perfectly with the brand’s mission.
The Result:
The final prototype effectively communicated Bordafri’s vision of safe labor migration across Africa. The engaging animations, purposeful color scheme, and clear structure made it easy for stakeholders to understand the concept at a glance. It became a strong visual and functional foundation for their upcoming full product launch.
Priscilla Portfolio – Collaborative Web Design Project
Built with Framer | Collaboration · UI/UX · Branding
Overview:
This project was a collaborative build with a fellow freelancer, Priscilla, who wanted a portfolio website that would effectively showcase her work and attract new clients on Upwork. As two web designers, we combined our individual styles and experience to create a clean, modern, and visually balanced portfolio that reflected her professional identity.
The Challenge:
At the start, I was a bit skeptical about how well our collaboration would flow, especially since both of us were used to handling full projects independently. However, we quickly found synergy. The most technically challenging part of the project was creating realistic mockups for Priscilla’s past projects, which required using Photoshop to integrate website screenshots into laptop and device frames. We also needed to craft a unique logo and color palette that tied the entire brand together.
The Solution:
I handled the logo design using Figma, creating a simple yet elegant symbol that represented Priscilla’s personality and creative style. Together, we structured the layout in Framer, focusing on minimal design, smooth navigation, and subtle animations that kept the interface lively without overwhelming users.
The Result:
The final portfolio turned out beautifully, a sleek, functional, and conversion-focused website that Priscilla now uses to attract clients successfully. The visuals, animations, and brand identity all blend seamlessly, and the collaboration proved to be both inspiring and productive.
Yoggy – Template Customization Project
Built with Framer | Template Editing · Brand Integration
Overview:
The Yoggy project was a template customization task where the client provided a pre-designed Framer layout along with detailed brand guidelines. My role was to tailor the existing design to reflect their brand identity more accurately and create a cohesive visual experience.
The Challenge:
Because the structure and animations were already in place, the main challenge was ensuring brand consistency, updating fonts, colors, and images without disrupting the balance of the original template.
The Solution:
I refined the typography, color palette, content, and imagery according to the client’s specifications. The animations and CMS setup were maintained, optimized, and aligned with the new brand direction for a smoother, more unified feel.
The Result:
The final website looked fresh, professional, and on-brand. It preserved the integrity of the original template while showcasing Yoggy’s unique tone and visual identity, a straightforward but cleanly executed customization project.