Client Overview
Mettlesome, formerly known as SPUR Projects, underwent a comprehensive rebrand by DSR branding. Following this transformation, they engaged my services to swiftly develop a new website that would align with their fresh brand identity.
β
Project Scope
The project involved designing and developing a fully responsive website using Webflow, with a tight deadline of just 2.5 weeks for the initial launch.
β
Key Challenges
- Rapid turnaround time of 2.5 weeks for full site design and development
- Only the second Webflow site I had ever built from scratch with no template
- Seamless migration of existing content to the new CMS
- Integration of unique brand elements into functional web design
β
My Approach
- Collaborative Design Process: I worked closely with the Mettlesome team in Figma to create a homepage design that served as a framework for the entire site.
- Efficient Content Migration: Utilising Webflow and existing CMS collections, I efficiently transferred all existing content to the new CMS, streamlining the migration process.
- Innovative Navigation: I implemented a unique mega menu design integrated into the brand logo, featuring a simple red flag with a burger menu.
- Personalised Brand Elements: I incorporated hand-drawn circles created by each Mettlesome team member around various typography elements, adding a human touch to the brand and website.
- Animation of Elements: Subtle animations were added to the hand-drawn circles and to the mega menu to enhance user engagement.
- Color-Coding System: I proposed and implemented a color-coding system to distinguish between different types of content (Projects, Journal, and Resources), improving user navigation and content recognition.
β
Key Features
- Unique mega menu integrated into the brand logo
- Hand-drawn circle elements with subtle animations
- Color-coded content categorisation
- Responsive website design optimised for all devices
β
Results and Client Feedback
Despite the tight timeline, I successfully delivered a fully functional website that met Mettlesome's needs. The client expressed high satisfaction with my work and my ability to meet their demanding deadline.
β
Lessons Learned
This project, being only my second full Webflow site build, provided valuable learning experiences. While there are aspects I might approach differently given more time or budget, the overall outcome was successful and met the client's expectations.
β
Future Improvements
Given additional time and resources, potential enhancements could include:
- More complex animations for the hand-drawn circles, simulating a drawing effect
- Further refinement of the color-coding system
- Education for the client on how to manage the site into the future
β
Conclusion
The Mettlesome website redesign project showcases my ability to deliver high-quality results under tight deadlines. It demonstrates my skills in Webflow development, Figma concept creation, translating a rebrand into a new website, creative problem-solving, and effective client collaboration.