Dev Diaries: Jasmine's Experience with Framer
Aug 23, 2024
Updating a website is never easy, but when it's for a network as respected as SEPnet (South East Physics Network), it feels even more important to get it right. SEPnet is a collaboration of six universities in the South East of England, all working together to promote excellence in physics through various outreach programs. Their website plays a key role in this mission, serving as a go-to place for information, events, and resources. That's why making sure it's user-friendly and well-designed is so crucial.
The Project
The primary goal of the project was to redesign SEPnet's website using Framer, a no-code web development platform. The need for an update was apparent; as more content was added over the years, navigating the site became increasingly cumbersome.
SEPnet's brief outlined a clear vision: reduce the amount of text on pages, update the font, simplify the navigation bar, add dynamic interactions, and refresh the overall look of the site.
As the project lead, I oversaw the entire website redesign process. My tasks ranged from the initial planning stages to the final implementation. Utilising Framer, I was able to execute the project efficiently without needing to delve into complex coding. Framer’s user-friendly interface allowed me to focus on the design and functionality of the site, streamlining the process considerably.
The Process
The project began with a comprehensive analysis of the existing website. I used Miro to create a site map detailing all the current web pages and their URLs. After consulting with SEPnet, we decided which pages should remain and which should be removed; I then crafted a new site map for the updated website. Having these clear visual tools at my disposal made it easy to identify weak spots in the site's functionality and made discussing potential changes with the client all the more simple.s
SEPnet site maps before (left) and after (right) redesign
Using Framer, I implemented several key updates, including a more intuitive navigation bar, dynamic interactions, and a modernised design that aligned with SEPnet's brand. The process was methodical: after finalising the site map, I started building the new pages in Framer, focusing on creating a seamless user experience while incorporating feedback from the SEPnet team.
Challenges and Solutions
The current site is built on WordPress, and SEPnet has a substantial collection of blog posts dating back to 2015 that needed to be transferred to the new site. I encountered a significant challenge when attempting to download all the blog posts as a CSV file since WordPress's default export format is XML, which can be challenging to work with. Initially, I tried converting the XML files to CSV using an online tool, but this approach resulted in large amounts of incorrect data.
To address this, I explored using Python for the conversion, but this proved to be time-consuming. Given my previous experience with WordPress, I decided to take a different approach. I discovered that WordPress offers built-in plugins that can facilitate the export process. Using a CSV converter plugin and WeTransfer, I successfully transferred all the blog posts, including links, images, dates, and author information, into Framer. Framer's CMS feature then allowed for seamless integration of the blog pages within the updated website.
Experience with Framer
As someone who usually works with code, using Framer's no-code platform was a refreshing change; it allowed me to focus entirely on design without worrying about coding errors, which significantly sped up the process. Updating a site as complex as SEPnet's with code can be time-consuming, especially when trying to locate and fix errors. However, with Framer's platform, I could concentrate on refining the UI and improving the overall design. Although there was a learning curve since it was my first time using Framer, I found the platform to be intuitive and efficient once I got used to it. Having this tool available to me greatly enhanced both the quality and speed of the website update.
Collaboration and Feedback
Collaboration with the SEPnet team was integral to the project’s success. Their feedback was invaluable, helping to shape the final design and functionality of the site. The team was supportive throughout the process, providing insights and suggestions that ensured the updated website met their needs.
The final product was well-received by SEPnet and the end-users. The new design is not only more visually appealing but also easier to navigate, making it simpler for users to find the information they need.
Lessons Learned and Future Use
This project taught me the importance of flexibility and adaptability. While Framer was a new tool for me, its capabilities far exceeded my initial expectations, and I would highly recommend it to anyone working on similar projects. If I were to redo the project, I might spend more time initially familiarising myself with Framer’s features to reduce the learning curve; however, I think it is a fairly simple skill set to pick up, even for people without much web design experience.
Updating the SEPnet website with Framer was a rewarding experience that highlighted the platform’s potential for web development projects. The project not only resulted in a modern, user-friendly site for SEPnet but also expanded my skill set with a new, powerful tool. The lessons learned, and the positive outcome of this project has set a strong foundation for my future web development endeavours.