Beyond the Mockup: A Figma to Webflow Evolution
Magic Design Bridges the Gap Between Design and Development
Introduction
Planted, an Impact SaaS company based in Cologne, Germany, approached Magic Design with a compelling challenge. Dedicated to the fusion of CO2 management, environmental reporting, and the promotion of German forests, Planted sought to revamp its online presence. In this endeavor, they turned to Magic Design for a comprehensive solution.
Introduction
Planted, an Impact SaaS company based in Cologne, Germany, approached Magic Design with a compelling challenge. Dedicated to the fusion of CO2 management, environmental reporting, and the promotion of German forests, Planted sought to revamp its online presence. In this endeavor, they turned to Magic Design for a comprehensive solution.
17
Uniquely designed pages
4 weeks
From design to website launch
10
Migrated collection lists
The Challenge
Planted’s goal was ambitious: transforming a Figma design into a fully functional Webflow website within a stringent four-week timeframe. There were numerous hurdles. The existing website, developed by another team, suffered from scalability issues and subpar quality. Moreover, Planted’s design team was still fine-tuning elements, requiring simultaneous development and design phases. A critical shift in aesthetics towards a more serious tone, aligned with their Ideal Customer Profile (ICP), was necessary. The project demanded a highly complex and customized CMS setup, coupled with the imperative to preserve their SEO ranking during the transition.
Message from our client
Cindy Schüller
(
CMO
)
Magic Design's Solution
Magic Design took a comprehensive custom web development approach to address each facet of Planted's challenge.
- Custom JS was employed to introduce functionalities not natively supported by Webflow.
- Close collaboration with Planted’s design team facilitated parallel development and design phases.
- Reusable components were created to ensure future scalability, diminishing dependency on developers.
- The FinSweet client-first naming convention was instituted for optimal scalability.
- SEO strategies for high-ranking pages were meticulously migrated.
- Over 10 Collection lists were seamlessly transitioned.
- The integration of a custom Google Maps API and rigorous QA testing on top browsers guaranteed a universal and smooth user experience.
- A flexible CMS was developed, allowing Planted to effortlessly adjust and scale content, covering areas such as Glossary, Team, FAQ, Blog, and Pricing/Feature tables.
Outcome
Magic Design’s collaboration with Planted resulted in a transformative outcome that surpassed expectations. Planted now boasts a fully optimized Webflow site with reusable components, ensuring a seamless and scalable user experience. The SEO ranking was successfully preserved, safeguarding Planted’s online visibility. The development quality achieved ensures effective scalability for the website. Planted now possesses a CMS that empowers them to effortlessly adapt and scale content, reducing reliance on developers. Complex layouts, critical for Planted’s unique needs, were successfully implemented. The new website design resonates directly with Planted’s Ideal Customer Profile. The collaboration culminated in the creation of 17 new pages, expanding Planted’s online presence.
Magic Design’s success with Planted exemplifies our commitment to turning challenges into opportunities, providing innovative solutions that elevate our clients’ digital presence. If you’re seeking a partner to bring your design visions to life and drive impactful results, Magic Design is here for you. Contact us today to explore how we can transform your digital landscape.
