Image optimization for a faster Webflow

Product DesignResponsiveDiscoveryFeature design

CompressFlow is a powerful tool within the Webflow ecosystem, built to enhance and streamline web design processes. With an intuitive interface and robust functionality, it lets users convert, compress and resize images efficiently.

Role
Product Designer
Type
Feature design
Platform
Web app · Responsive
Tools
Figma · Design System
01

01 — Problem & solution

From friction to flow

Problem

Large images and manual optimizations slow down sites and create inconsistent visual results across devices.

Slow load timesManual workflowInconsistency

Solution

CompressFlow automates conversion, resizing and quality tuning with a single, predictable workflow, saving time and improving performance.

One workflowAutomatedFaster sites
CompressFlow app mockup
02

02 — Process

User-centered design process

Design Thinking methodology to ensure the solution addressed real user problems.

1

Discovery

Analysis of current Webflow metrics and interviews to identify friction points.

User interviewsData analysis
2

Definition

Empathy maps and user journeys to ideate user-centered solutions.

User journeyWireframing
3

Design & prototyping

Development of a design system and interactive prototypes for usability testing.

FigmaDesign system
4

Validation

Usability tests with the prototype, iterating based on the results.

Usability testingA/B testing
03

03 — The solution

Final screens

Open prototype ↗
CompressFlow screen 1
CompressFlow screen 2
CompressFlow screen 3
CompressFlow screen 4
CompressFlow screen 5
CompressFlow screen 6
CompressFlow screen 7
CompressFlow screen 8

( drag / scroll → )