The problem
Webflow users work with images constantly, and heavy files slow down their sites. Compressing them usually means jumping to external tools whose interfaces and interaction patterns are inconsistent, and which don’t feel part of the Webflow workflow.
THE CHALLENGES
Fitting into an existing ecosystem
Compresflow had to feel like a native part of Webflow, not a third-party add-on. I analyzed Webflow’s style guide and interactive components (color, typography, image treatment and shadows) and used them as the foundation of the interface.
Making the quality trade-off visible
Users need to decide how much to compress without guessing, and JPEG and PNG behave differently. The tool needed a live comparison between the original and the compressed image so users could choose the right balance between size and quality.
Keeping it familiar without losing functionality
In a sector with established patterns, users expect certain flows. The challenge was to make every function easy to discover while following those conventions. I benchmarked existing tools and validated the result with a heuristic evaluation and a moderated user test.
The process
FROM BENCHMARKING TO USER TESTING
THE SOLUTION
Compresflow is a web tool that takes users from sign-up to downloading optimized images in a few familiar steps.
Batch upload
Users can drop several images at once instead of compressing them one by one, which saves time when working with many files.
Live comparison
The original and the compressed image are shown side by side in real time. Users adjust the compression and see the result immediately, so they choose the balance between size and quality with confidence.
Format-aware compression
The tool reduces the size of JPEG and PNG files, taking into account that each format compresses differently.
Resize and crop
Users can set exact dimensions (width and height) and preview the crop before applying it, without leaving the tool.
Webflow-native look and feel
The interface is built on Webflow’s style guide and a dedicated design system, so Compresflow feels like a natural part of the platform and stays consistent as it evolves.
LEARNINGS
Familiar patterns beat novelty
In a sector with established flows, following them makes the tool more intuitive and shortens the learning curve.
Discoverability and full functionality can coexist
Every function had to be easy to find without losing any of the required features.
A design system pays off early
It sped up prototyping and left the project ready to scale.