Project Overview

Streamstone is a Swedish organization that supports nonprofit and ideational organizations (“ideella och idéburna organisationer”) with digital strategies to engage donors, members, and stakeholders.

They needed a CMS-powered Webflow site that could handle diverse content types—events, insights, and organizational profiles—while being maintainable for a non-technical team.

This project was completed while I was employed at Stormfors, where I contributed Webflow development and CMS architecture to bring the design team’s vision into a robust, scalable site.

The Challenge

The project posed three main challenges:

  1. Complex content needs — Multiple content types (events, insights, organizational partners) had to be structured so editors could manage them without technical training.
  2. Design fidelity — The design team provided detailed mockups. The build had to match those designs with pixel-level precision, across devices and browsers.
  3. Maintainability — Nonprofit organizations often lack large dev teams. The site needed to be simple for editors to update while being flexible enough to grow over time.

My Role

At Stormfors, my responsibility was turning design into a maintainable Webflow system. My contributions included:

  • Webflow Development – Built the responsive site to production quality, ensuring clean structure and strong performance.
  • CMS Architecture – Designed and implemented CMS collections for Events, Insights, and Organizational Partners with editor-friendly fields.
  • Technical Implementation – Ensured responsiveness across devices, cross-browser testing, and smooth interactions.
  • QA & Maintenance – Cleaned up the build, verified CMS usability, and prepared for client handoff.

Services Rendered

  • Webflow development
  • CMS architecture & build-out
  • Responsive and cross-device QA
  • Technical implementation & build maintenance

Tech Stack

  • Webflow CMS — Dynamic content for Events, Insights, and Organizational Partners
  • Finsweet Client-First system — Scalable, consistent class naming across the build
  • Finsweet Attributes — For filtering, sorting, and CMS-driven interactivity
  • Relume Library components — Used as structural building blocks, customized to match Streamstone’s brand and design

Process & Approach

  1. Interpreting Designs
    • Collaborated with the Stormfors design team to ensure their mockups could be translated cleanly into Webflow.
    • Prioritized fidelity while also identifying where CMS structure could improve editor experience.
  2. CMS Build-Out
    • Created separate CMS collections for Events, Insights, and Organizational Partners.
    • Structured fields for flexibility (e.g., date ranges for events, partner details, categories for insights).
  3. Responsive Development
    • Built layouts that adapted seamlessly from desktop to mobile.
    • Conducted cross-browser testing to maintain design quality in real-world use.
  4. Handoff & QA
    • Documented CMS usage for the client’s editors.
    • Reviewed the Webflow project for naming consistency and clean structure, ensuring long-term maintainability.

Outcomes

The delivered site provided Streamstone with:

  • A maintainable CMS architecture — Editors can now add and update events, insights, and partner content without developer support.
  • Design fidelity — The build matched the original design vision with responsiveness and polish.
  • Scalability — By using Client-First and Relume, the project structure supports future growth.
  • Workflow improvements — With Finsweet Attributes, editors can publish new content and have it automatically organized and displayed without extra dev cycles.

Reflection

This project reinforced the value of pairing clean CMS design with advanced Webflow frameworks. For nonprofits with limited technical resources, scalability and editor-friendliness are as critical as frontend polish.

If I revisited this project, I’d push further on:

  • Accessibility auditing — Ensuring maximum inclusivity for diverse audiences.
  • Performance optimization — Prioritizing speed for regions with weaker internet connections.
  • Editor onboarding — Adding inline guidance or video tutorials to support content managers.