Compresflow: Design, test & improve
Compresflow: Design, test & improve
The goal of this project was to design the graphical interface of a web-based image compression tool.
This tool had to be integrated into the Webflow ecosystem, so the platform’s style guide was used to inform the design.
In addition, and prior to designing the prototype, it was necessary to build a Design System to ensure visual consistency — both during the prototyping phase and for future updates>/strong> that might be needed to address new user needs.
Briefing
The design requirements specified that the tool should include the following features and functionalities:
- Reduce the file size of .jpeg or .png images (taking into account the different compression characteristics of each format).
- Upload multiple images simultaneously.
- Offer a live comparison between the original and compressed image to help users decide the level of compression.
- Resize the image to specific dimensions (width and height) and preview the crop.
- Users must register to use the tool.
- It must be a web-based tool that works on both desktop and mobile devices.
- A navigation system needs to be created, as more tools are expected to be added in the future
Research & interaction mapping
The project began with a benchmarking analysis to study interaction flows and patterns of existing tools and understand how users interact with them.
Next, I analyzed Webflow’s style guide and interactive components — including color, typography, image treatment, and shadows — to ensure that Compresflow would integrate seamlessly into the Webflow environment.
Finally, user interaction flows were mapped, tracing the journey from registration to successfully compressing images, defining the key steps and touchpoints along the way.
Colors
Typographic scale
Design system
Seeing users in action
After designing the prototype, we evaluated its usability through both a heuristic evaluation and a moderated user test.
First, the heuristic evaluation was conducted using Jakob Nielsen’s 10 usability heuristics to identify potential issues.
After addressing these issues, a moderated user test was carried out to observe how users interacted with the tool and whether they understood its functionality. The test focused on:
-
Understanding of the tool’s icons and functions.
-
Detecting any interface inconsistencies.
-
Evaluating whether the interface was effective and efficient.
Screens
Desktop
Mobile
Prototype
Desktop
Mobile
What this project taught me
This project strengthened my Figma skills, improving both speed and fluency in interactive design.
I learned that following established action flows in this sector is crucial, as users are already familiar with these patterns, which makes interaction more intuitive.
A central design goal was to ensure that all functions were easily discoverable while maintaining full system functionality in line with the project requirements.
Paying close attention to user familiarity and design conventions can significantly improve usability and reduce the learning curve for new tools.