Milan Samardžić - Product Designer

Sr. Product Designer solving complex cross-platform problems through AI workflows, driving measurable UX impact

Official Website: https://www.milansamardzic.me | Contact: contact@milansamardzic.me

Projects & Case Studies

FishingBOOKER (123)

123

CAKE.com ()

Leading UX projects on Clockify™ across web, desktop, and mobile platforms. Improved payment system, invoicing, data filtering and many other user flows.

Clockify invoices 2.0

A new B2B invoicing and payment tracking flow for Clockify that improved usability, enabling users to create invoices 1.5x faster with significantly fewer errors, as validated in Maze tests.

Invoice editor re-design

Clockify invoices were made at first with intention of integrating core time tracking features with invoicing. However with the time users of significant volume were complaining on usability and visual design stating the competition solutions better.

Design audit revealed more than a few issues within main invoicing flows. The problems were revolving around unstructured information architecture making interaction flow of changing invoice status, adding tracked time and sending invoices slow and messy.

After extensive analysis of the user complaints and competitive landscape I've derived helpful conclusions and opportunities as well as inspirational direction based on good ux and practices of invoicing sistems across competitive solutions.

Design solution

Different layout was early communicated as a need to make invoice editor more airy and scannable. It also enabled me to introduce new UI element into our design system, the side sheet which was one of the main pillars of the new editor.

My goal was to find solution to improve the main invoicing flows with easier navigation and accessible tools inside right side sheet. This was introduced as a new component within Clockify design system, which was later used across the product.

Validation and implementation

Throughout the project, I validated most design decisions and kept the PM and VP of Product aligned at every stage, from initial direction to final execution. The new layout was a major shift, so I needed solid evidence that power users wouldn't lose speed.
We ran Maze usability tests with 20 users, 10 per version, comparing the current design against the new one. We tracked task completion rate and time on task. The new version outperformed the current one on both metrics by roughly 1.5x.
As a result, creating invoices in Clockify is now more streamlined and visually balanced, helping users move through payment tracking flows faster and with fewer errors.

Data filtering experience

New filtering experience inside Plaky app that improves data visibility, introduces advanced filters, and allows users to save prefiltered views. Significantly streamlining board view management across web and mobile platforms.

Context and problem

Plaky is a task and team management app that handles large amounts of data across boards. Through conversations with our ICPs, we found that users struggled to find their way around filters and customize the data they wanted to see. They weren't sure how to save views, who had permission to edit them, or how to work with data safely without the fear of losing something.

As a product designer, my task was to work with the PM to create a simpler, safer filtering experience.

I started by analyzing the header space in Plaky's web app and identified an imbalance between used and empty space. This created an opportunity to organize filtering options more efficiently and improve visual hierarchy, making them easier to distinguish from unrelated actions.

Since many users are already familiar with similar tools, I explored how competing products handle filtering and view management. I used those insights to shape a solution that fits Plaky. ClickUp inspired the approach to saved views and advanced filters, while Notion and Linear served as a reference for a clean and well-structured layout.

Concept design

These insights helped define the design direction and served as the foundation for early prototypes. I used them to refine the concepts, gather stakeholder feedback, and iterate on the solution. The final concept included Quick and Advanced Filters, micro-interactions for sorting, color coding, and column management.

After presenting the concept to the Product Manager, we reviewed it with developers and other stakeholders. The feedback strongly validated the proposed direction, with only a few adjustments needed to align the interactions with our design system before handoff.

Changes in design system

As part of this project, I introduced several new patterns and components to the design system. One of them was the Filter Chip, built to match the app's color theme and support different states across the product. I also standardized drag-and-drop behavior to match existing interaction patterns elsewhere in the app, and documented it to keep the experience consistent.

I was also responsible for communicating these changes to the entire design team. I did this through detailed, annotated documentation and by working directly with designers who also maintain our component library.

What this unlocks
Product metrics aren't available yet, since the feature is still to be implemented. From a design perspective, though, the solution introduces patterns that can be reused across the product beyond filtering, such as the refined drag-and-drop and the Filter Chip.
The experience is visually balanced, with a simpler mental model and clear active, saved and unsaved view states. Each filter tool manages its own states and interactions, which is a new pattern in the product. Quick Filters cover everyday filtering with single and multi-select, a selection counter and individual clearing. Advanced Filters give power users complex conditional logic in a separate mode, and turning it off asks for confirmation so users don't lose work by accident.
On mobile, the solution was deliberately simplified, since the product is desktop-first.

FishingBooker (2021-2023)

FishingBooker™ is a platform for booking fishing charters around the globe. My role revolved around improving payment system, notifications and booking management.

Today's trips

New homescreen design of the Captains App introducing easy daily bookings preview, on the FishingBooker platform

Booking management is not easy, doing it while on the boat and fishing is even harder.

Captains use the mobile application to check on booking requests and upcoming trips pretty much every day. However, this process was a bit difficult for captains with busy calendars since they needed to navigate through the bookings page and apply filters to get the desired information.

Research revealed a challenge with booking status labels changing after a trip ends. Since interviews showed that captains often revisit completed bookings to collect cash payments, I iterated on the concept and validated the solution through a design critique session.

Less is more

During the design critique, concerns were raised that complex interactions and animations could be distracting for captains using the app while on the water. Based on this feedback, I simplified the experience to prioritize clarity, making daily, ongoing, and upcoming trips easier to scan at a glance.

I introduced a compact booking card and highlighted it in a new Today's Trips section. To reduce unnecessary interactions, I removed filters and separated upcoming trips into their own section, making both easy to scan at a glance.

I handed off the solution to the mobile engineer and we started development in parallel with design. While the implementation was underway, I finalized the loading and empty states and supported the process through implementation reviews before QA.

New feature - more opportunities

The new home screen provided faster access to daily bookings, although it was too early to measure its impact before the peak fishing season. Early feedback from captains suggested expanding the empty states with useful content, such as platform tips, payment shortcuts, and business insights, to make the home screen more valuable during quieter periods.

Direct Bookings

Boosted adoption of a direct booking feature for fishing charters through strategic product placement and trustworthy copy, driving higher charter signups and direct booking growth.

My role on the project

FishingBooker launched 'Direct'—a new product enabling boat captains to handle direct bookings using the platform's infrastructure. After initial market tests showed a drop-off in conversion, I joined a PM and Data Engineer to analyze the funnel and solve why captains were hesitant to adopt the value proposition.

The main friction was confusing messaging around commission fees. To solve this, I proposed a design solution using low-fidelity concept sketches that introduced an interactive product preview—allowing captains to test the tool before opting in, backed by clearer value positioning and a streamlined onboarding flow

Prototyping and validation

To ensure the effectiveness of the solution, I conducted a usability testing that involved two design variations. Six users were selected to navigate through the flow and assess their level of comprehension and recollection of the information presented. To minimize bias, the test was divided equally, with half of the users experiencing one version while the remaining half experienced the other version.

Testing confirmed that v1 provided much clearer messaging, while the alternative carousel layout created unnecessary interaction friction. Based on these insights, I moved forward with v1.

To refine the UX copy, I collaborated with a copywriter and validated our tone and wording with native English speakers to ensure the value proposition landed properly. Finally, I prepared the design specs for developer handoff and worked with our Data Engineer to establish event tracking metrics. This resulted with additional 14% boost of direct bookings through the fishingbooker by the end of the season.

Personal projects (asd)

Experimenting with AI prototyping stack (Codex, Google AI Studio, Gemini, Vercel) to build experiences and make design workflow more efficient.

Vinyl simulator

Testing limitations of AI prototyping with deliberate UI and complex 3D interactions to bring authentic analogue experience of vinyl records to digital space.

From simple prototype to full stack app

In this project I tested several vibe-coding services like Chat GPT Canvas, Gemini Canvas, Open AI Codex, v0 by Vercel

As an experiment I wanted to see if it would be possible to code a prototype inspired by real-life shelves of books and records. Initial attempts with CSS just weren't good enough. They lacked that tactile depth, warmth, and feel you get when you actually hold a record in your hands. Realizing flat UI weren't going to get the job done (preview LINK), I decided to test whether AI could handle Three.js to pull off a proper, immersive 3D scene with fluid animations.

Early inspiration and direction:

My first attempts to create vinyl archive was not going smooth. Getting an AI model to understand exactly how an object should move, how quickly it should accelerate, where the camera should sit, or how a shadow should behave often required more than a good prompt.

My experience working with 3D assets for web and mobile helped me bridge that gap. I could recognize what felt wrong and make more precise adjustments instead of relying entirely on generated output. After several iterations, the Three.js scene started to feel much closer to the physical experience I was trying to recreate. Example below ⬇

Challenges and limitations

The archive was only half of the idea. The goal wasn't simply to make a 3D record player look convincing. I wanted the interaction itself to follow the logic of a physical player: speed switching, manual scratching, tonearm mechanics, tactile sound feedback and manually flipping the record. Also, instead of automatically continuing to the next side, the player stops and asks the user to physically flip the record. It's a small detail, but it preserves the ritual that makes vinyl different from simply pressing play on a digital music app. After a lot of iteration, I had two separate experiences that worked well independently: the archive and the player.

The next challenge was making them feel like one experience.

The two scenes needed to share data, states, interactions, and animations. Gemini Canvas was no longer giving me enough control, so I pushed the project to GitHub and moved development into a local environment. This is where Codex became useful. I could work with branches, isolate features, inspect the codebase more directly, and gradually bring the two experiences together.

Going full-stack

Bringing in a backend introduced an entirely different set of problems.Data would sometimes disappear from the cache, inputs would stop responding, and uploads would fail without an obvious reason.

At this point, the project was no longer just about generating a visual prototype. I had to start thinking about the system behind it. I approached these issues by breaking them down into smaller problems: reproducing the bug, isolating the relevant part of the system, using targeted prompts to investigate the cause, and testing each fix before moving forward.

After months of on-and-off work in my free time, I had a working full-stack setup.Now, record metadata is handled by Firebase, Cloudflare R2 takes care of file storage, and the frontend is built with Three.js, HTML, CSS, and JavaScript.

Animations and micro interactions

As the project grew, Codex became increasingly expensive in terms of token usage and less practical for smaller finishing tasks.

For the final stage, I switched to Google AI Studio. It gave me a faster, lighter environment for making targeted changes and helped me polish the remaining interactions and visual details before deploying the project to Vercel.

Key takeaways
When I started working on this prototype, I had no idea where it would lead. Driven by curiosity, I just kept pushing from one challenge to the next. Whenever the canvas crashed, I continued with a new one. When the visuals felt off, I jumped straight into the code to fine-tune animation and timing, adjust camera angles, tweak lighting, or fix shadow behavior.

It took time, but it was worth the effort. I gained valuable experience with multi-environment AI prototyping and built something deeply personal that can grow over time, allowing other users to create their own vinyl collections. Even though this is just a prototype, some of my vinyl-nerd friends are already using and enjoying it.

You can try it on this LINK

Sketching UX in Figma

A lo-fi component library enabling creation of fast, pixel-unperfect designs that solve real problems, helping designers to communicate and validate early ideas.

Problem

Early stage ideation and concept exploration often suffer from tooling friction. Some have iPads, some whiteboards but as a product designer in remote environment facing tight deadlines, trying to draw freehand wireframes using a mouse or trackpad proved slow, messy, and frustrating.

On the other hand, polished high fidelity designs took too long to build and often distracted conversation with stakeholders, steering toward surface-level aesthetics rather than core logic and user flows.

My approach

Since we are not leaving Figma any time soon (believe me), I decided to make Figma more usable for these kind of scenarios. I created a component library in Figma designed specifically to look like handwritten whiteboard frames, screens and flows. The initial set included basic set of icons, inputs, buttons alongside frames for mobile and web coupled with a selection of arrows to easily map out flows and annotations.

An essential part of this wireframing approach is minimizing the use of real fonts. Instead, relying on scribble lines encourages designers to focus on the structural problems the UX needs to solve. With zero grids, typography, color styles, or variables, this approach welcomes component detachment and customization for whatever scenario you are tackling.

I shared the kit with the team to test it out and gather feedback. They quickly ran into limitations, as a lot of elements were missing, requiring designers to sketch things out on the fly. But that also was the point, it should grow with you, around your specific use case and after a while it becomes your best companion.

After all, you are the designer

Six months later, the library grew to include additional icons, surfaces and sheets, as well as refined flow mapping parts. Even with these additions, the core purpose stayed identical: focusing on practical, rough looking designs that help teams communicate and validate early concepts with speed and confidence.

Check it out on figma community and try yourself:
https://www.figma.com/community/file/1613705212626529946/ux-sketch-kit