Mettlesome Website

Brave ventures for good.

Brave ventures for good.

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

  1. 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.
  2. Efficient Content Migration: Utilising Webflow and existing CMS collections, I efficiently transferred all existing content to the new CMS, streamlining the migration process.
  3. Innovative Navigation: I implemented a unique mega menu design integrated into the brand logo, featuring a simple red flag with a burger menu.
  4. 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.
  5. Animation of Elements: Subtle animations were added to the hand-drawn circles and to the mega menu to enhance user engagement.
  6. 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.

Project Images

Project image slider arrow pointing left
Project image slider arrow pointing right
View Website

Other client projects.

Project image slider arrow pointing left
Project image slider arrow pointing right
Back to top arrow pointing upwards