A 3-Month Design Sprint to Launch a Usable and Scalable MVP
In 90 days, I shaped the product’s design language, solved technical UX challenges, and helped bring GoMatch It to real users.
Task
UX Strategy, UI Strategy, MPV
Go Match It is a tool for building interactive diagrams representing complex processes. It is powered by strict table-based logic but designed with clarity, flow, and usability. I joined the project when an early version of the product already existed. It worked technically but lacked User experience thinking or cohesive visual design.
The goal was clear: We needed to transform this raw prototype into a scalable, user-friendly MVP within three months. I worked closely with Ariel, the founder and developer, to build a solid design foundation, creating both the visual language and the user experience from the ground up.
Throughout the project, I developed a complete design system: typography, color palettes, tokens, interface elements, building menus, interactive blocks, connection lines, and a dashboard — all connected through a unified mental model.
The result: a polished, intuitive, and technically sound MVP — with real users asking to start using it as soon as they saw it.
➡️ Clear mental model for users through structured menus and consistent UI
➡️ Full visual language built: typography, colors, tokens, icons
➡️ Canvas designed to fit technical grid limitations without harming UX
➡️ Dashboard built with strong hierarchy and seamless navigation.
I joined the GoMatch It project when the product was still in its early stages. Ariel, the founder, had already begun developing a basic working version.
My goal was to take the existing structure and build a new design in terms of visual interface (UI) and user experience (UX).
From my first conversation with Ariel, it was clear to both that UX would be the key differentiator between a product that users understand and want to use and one that feels confusing and uninviting.
I joined at a critical moment — while there was still room to make significant changes and define a clean, cohesive design language based on clear UX principles.
I worked closely with Ariel, who developed the product in real time.
The pace was fast — every design I created was implemented almost immediately. This dynamic collaboration allowed us to test ideas quickly, see what worked, get feedback, and iterate on the fly. It created a healthy design–test–refine loop that enabled fast and focused progress.
1. Creating an Intuitive Diagram Flow
The product enables users to build complex process diagrams. Initially, the menus for creating the Activity Blocks were randomly placed on the left side of the screen — with no clear hierarchy or logic.
I quickly realized the diagram flow was built from left to right, so creating a consistent mental model across the product was important.
I relocated the diagram-building menu to the bottom center of the screen, freeing up space on the sides and enabling a clearer, more open workspace.
When the menu opens, the block creation also flows from left to right, matching the diagram’s direction and reinforcing a unified user logic.
2. Designing Within Technical Constraints
The diagram was built on a strict grid-based structure: each Activity Block is placed on a row, and the arrows connecting them flow through columns.
This introduced apparent limitations — blocks couldn’t be placed freely on the canvas.
I had to design an open and flexible interface while fully adhering to the back-end’s rigid grid logic.
3. Reorganizing the Menus
The original design used the screen edges to display content, but in a way that was visually cluttered and functionally unclear.
The left-side menu opened nested layers on top of each other, which overwhelmed the user and broke the flow. I restructured the screen into four fixed zones, each with a clear function.
The main creation menu was moved to the center-bottom, improving layout clarity and freeing the canvas. I added clear hierarchy, iconography, and visual markers to enhance user orientation and recall.
4. Consistency Across Activity Blocks
Each Activity Block represents a flow of actions, so it was crucial to present information in a way that was instantly understandable.
We worked through multiple iterations to find the right combination of size, color, typography, and icons to convey the content and status of each block clearly at a glance.
In parallel, we also designed the connecting lines between blocks, ensuring that they look clean and communicate the logic of the process.
We defined all block and line interaction states — hover, select, click — so that users always understand what element is active, what actions are available, and how to interact with the system confidently.
The Canvas is the core of GoMatch It — an infinite workspace where users create diagrams made of Activity Blocks. Behind the scenes, the canvas operates on a strict grid system, where each block is placed on a row and connectors align through columns. This technical structure limited free placement but demanded a UI that still feels flexible and open.
We designed block groups and the visual logic of their connections, whether within a single group or between multiple ones. We focused on visual hierarchy to clarify relationships between elements and built a structured layout that’s easy to read.
We also defined interactive states for all blocks and connectors — including hover, click, and selection — to ensure that users could identify, understand, and interact with all components intuitively and efficiently.
Unlike the Canvas, the Dashboard was a more creative and enjoyable part of the project.
Its purpose was to organize complex data layers in a way that’s simple, accessible, and future-proof, supporting upcoming features such as notifications, quick sharing, and additional diagram metadata.
We worked through multiple versions to build an intuitive yet powerful experience.
We divided the dashboard into clearly defined areas, each influencing the others, and we used a flexible layout that adapts to context.
I reused the same design language, component libraries, and menus to ensure visual consistency with Canvas.
The result was a seamless continuation of the system — not a separate screen but a coherent part of the overall experience.
Typography
We chose Inter — a clean, readable, modern typeface that works well for headings and body text. I defined a clear typographic hierarchy to streamline development and maintain consistency throughout the product.
Color System
I created a balanced, scalable color palette called Primitive, which served as the foundation for all visual components in Figma and code.
Design Tokens
I built a detailed token system covering all elements — text, backgrounds, borders, icons, and buttons — enabling a consistent handoff from design to development.
Icons
We used an open-source icon library with a soft, full, and readable style. The icons remained clear even when zoomed out, aligning perfectly with the visual tone of the product.
The project goal was to launch a fully functional MVP within 3 months — with strong UX, clean UI, and the ability to demonstrate it to real users.
Thanks to our fast, collaborative workflow, we reached that milestone with a polished product that looks great and works smoothly.
Ariel was able to present GoMatch It to real users, who gave immediate feedback:
“We’re ready to start using this.”
It was a deep and rewarding process for me. I worked on a technically complex system, adapted designs to real-world constraints, and focused relentlessly on the user experience.
I delivered a fast, clear, and scalable result — a solid foundation for the next stages of growth.