# Milan Samardzic – Senior Product Designer

> **Professional Profile**: Product Designer specializing in B2B SaaS, mobile products, design systems, and operational UX.
> **Website & Portfolio**: https://www.milansamardzic.me
> **Contact**: contact@milansamardzic.me
> **LinkedIn**: https://www.linkedin.com/in/milan-samardzic-b2a661145/

---

## 1. Summary & Specialization

I design everything from whiteboard sketches to final solutions, with a proven track record of UX impact

Milan is a seasoned product designer with deep expertise in transforming intricate operational and enterprise processes into clean, intuitive, and measurable product experiences.

### Profile Visual
![Milan Samardzic](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/hero%2F1788206759630_hero_image.png?alt=media&token=759ebe6e-cfdb-4164-9354-f8b71733c9dd)
*Visual Description: Profile photo of Milan Samardzic*

## 2. Core Capabilities & Design Stack

- UX / UI Design
- Design Thinking
- Prototyping
- Animation
- Design Systems
- User Research

## 3. Expertise & Strategic Pillars

### Design systems
Maintained cross-platform libraries

### AI Prototyping
Github, Codex and AI studio

### Strategy
Plan & Deliver

### Figma expert
Main design tool for years now

### Mobile apps
Platform native

### Motion Design
Bring delight to users

### UX Research
Documentation and Report

## 4. Featured Projects & Case Studies

### Project: FishingBOOKER (123)
**Overview**: 123

---

### Project: CAKE.com 
**Overview**: Leading UX projects on Clockify™ across web, desktop, and mobile platforms. Improved payment system, invoicing, data filtering and many other user flows.

#### Case Study: Clockify invoices 2.0
**Case Study URL**: https://www.milansamardzic.me/case-study/gdTYPyPAkrt7pznMyqKM/8dyYHm5eGMp4HONMutl9
**Executive Summary**: 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.

##### Case Study Cover Image:
![Clockify invoices 2.0 Cover](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fthumbnails%2F1781093664177_Invoices_thumb.jpg?alt=media&token=5f24c9f5-cb78-4999-8078-d901129c64cf)
*Image Description / Context: Visual preview cover for Clockify invoices 2.0 (CAKE.com)*

##### Case Study Visuals & Process Breakdown:

> Invoice editor re-designClockify 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 Artifact**: ![Main user painpoints ](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782661214547_Invoices_problems.png?alt=media&token=f6bcd0f2-57b0-4e99-a126-d23bba3f3435)
  *Image Description / Caption: Main user painpoints *
  *Display Mode: medium width*

> 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.

- **Design Artifact**: ![Competitive analysis](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782661015055_Invoices_competition.png?alt=media&token=1ed4032e-0dec-4d21-be95-01f0ffa81bd2)
  *Image Description / Caption: Competitive analysis*
  *Display Mode: medium width*

> 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 Artifact**: ![Concept design](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782768593891_New_features.png?alt=media&token=ea15800a-049e-4a87-a4d5-a9911636df0b)
  *Image Description / Caption: Concept design*

> Design solutionDifferent 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.

- **Design Artifact**: ![Invoice editor](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782769543892_Screenshot_2026_06_04_at_12.34.52.png?alt=media&token=59edee52-40d8-48b7-b6d7-cc131ca73dfd)
  *Image Description / Caption: Invoice editor*
- **Design Artifact**: ![Invoice preview](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782769459591_Screenshot_2026_06_04_at_12.34.40.png?alt=media&token=bb51d49a-8cf0-4659-9d7b-8fc82dc105d1)
  *Image Description / Caption: Invoice preview*

> 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.

- **Design Artifact**: ![Responsive design](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782660599616_responsive_invoice_editor.gif?alt=media&token=ccfe3a7a-d6e1-4b63-a944-2e0f144696d6)
  *Image Description / Caption: Responsive design*

> Validation and implementationThroughout 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.

- **Design Artifact**: ![Sidebar tabs & options](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782769677113_Screenshot_2026_06_04_at_12.35.07.png?alt=media&token=264db744-370d-4c8c-8c3a-0f2d80bf928e)
  *Image Description / Caption: Sidebar tabs & options*

#### Case Study: Data filtering experience
**Case Study URL**: https://www.milansamardzic.me/case-study/gdTYPyPAkrt7pznMyqKM/9GnjUuClcbTEwlEJxCvf
**Executive Summary**: 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.

##### Case Study Cover Image:
![Data filtering experience Cover](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fthumbnails%2F1786900613397_filters_plaky_thumb4.gif?alt=media&token=7fa3aebd-6a7c-455f-ba97-502dc8bb76c4)
*Image Description / Context: Visual preview cover for Data filtering experience (CAKE.com)*

##### Case Study Visuals & Process Breakdown:

> Context and problemPlaky 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.

- **Design Artifact**: ![Filters design audit](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782651014188_Design_audit.png?alt=media&token=96b2bd5c-c9ab-419f-b84c-bbc26aa28c4c)
  *Image Description / Caption: Filters design audit*
  *Display Mode: medium width*

> 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.

- **Design Artifact**: ![Competition patterns exploration](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782659798623_Screenshot_2026_06_28_at_17.16.16.png?alt=media&token=8819d029-e1d0-46df-857d-ac065a78139b)
  *Image Description / Caption: Competition patterns exploration*
  *Display Mode: medium width*

> Concept designThese 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.

- **Design Artifact**: ![Quick filters](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1791189127879_Screenshot_2026_10_05_at_10.23.39.png?alt=media&token=ffd187f2-c617-4c55-8616-77117289732a)
  *Image Description / Caption: Quick filters*
  *Display Mode: small width*
- **Design Artifact**: ![Advanced filters](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1791188985048_Screenshot_2026_10_05_at_10.23.16.png?alt=media&token=981298e0-0e38-466d-98ca-9fe43d25c983)
  *Image Description / Caption: Advanced filters*
  *Display Mode: large width*
- **Design Artifact**: ![Mobile](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1791188381941_Screenshot_2026_10_05_at_10.16.28.png?alt=media&token=e2588bc6-08e5-43a0-a58b-25e47cda5715)
  *Image Description / Caption: Mobile*
  *Display Mode: small width*

> 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.

- **Design Artifact**: ![Design system update](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782649325593_Screenshot_2026_06_28_at_14.15.45.png?alt=media&token=4fbc150b-5097-4158-afbd-ef5941cd2002)
  *Image Description / Caption: Design system update*
  *Display Mode: medium width*

> Changes in design systemAs 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.

- **Design Artifact**: ![Preview of the final screens](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FgdTYPyPAkrt7pznMyqKM%2Fsections%2F1782658949184_Screenshot_2026_06_28_at_17.02.02.png?alt=media&token=c99e986d-93d7-47b1-afe1-0926d6b625ea)
  *Image Description / Caption: Preview of the final screens*
  *Display Mode: large width*

> What this unlocksProduct 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.


---

### Project: FishingBooker (2021-2023)
**Overview**: FishingBooker™ is a platform for booking fishing charters around the globe. My role revolved around improving payment system, notifications and booking management.

#### Case Study: Today's trips
**Case Study URL**: https://www.milansamardzic.me/case-study/TBfAMcM0oN1wI5b4ARgD/xA8ROWTmEgebtvxBPla4
**Executive Summary**: New homescreen design of the Captains App introducing easy daily bookings preview, on the FishingBooker platform

##### Case Study Cover Image:
![Today's trips Cover](https://framerusercontent.com/images/djBZbIfzXw8iOvrhQgOuYni0Ao8.gif?width=500&height=280)
*Image Description / Context: Visual preview cover for Today's trips (FishingBooker)*

##### Case Study Visuals & Process Breakdown:

> 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.

- **Design Artifact**: ![Bookings page vs homepage bookings](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1782772153735_dxZM4nnvx4PMEGUqh60B51vcktY.jpg?alt=media&token=3cd8c8b2-bcae-4475-81ee-8a7fa51d4ad4)
  *Image Description / Caption: Bookings page vs homepage bookings*

> 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.

- **Design Artifact**: ![Design critique](https://framerusercontent.com/images/FWiu4WCVNqJo1bHHZPVuH5bRvzs.png?width=1058&height=503)
  *Image Description / Caption: Design critique*
  *Display Mode: medium width*

> Less is moreDuring 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.

- **Design Artifact**: ![Today's trips - Visual Solution](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1782772317940_v1.gif?alt=media&token=8cb8a39c-607a-4edd-83d1-11faa3d8c348)
  *Image Description / Caption: Design artifact showcasing UI/UX solution for Today's trips*
- **Design Artifact**: ![Today's trips - Visual Solution](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1782772329339_v2.gif?alt=media&token=732389c6-bebf-4008-b9f7-18daf6aa5fb3)
  *Image Description / Caption: Design artifact showcasing UI/UX solution for Today's trips*
- **Design Artifact**: ![Today's trips - Visual Solution](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1782772332035_v3.gif?alt=media&token=47e9c018-1272-4604-9e1d-211708b5509d)
  *Image Description / Caption: Design artifact showcasing UI/UX solution for Today's trips*

> 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.

- **Design Artifact**: ![Today's trips - Visual Solution](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1782772398604_refresh.gif?alt=media&token=6d0f54b5-d708-4f2b-a09c-9170b2ce5a89)
  *Image Description / Caption: Design artifact showcasing UI/UX solution for Today's trips*
- **Design Artifact**: ![Today's trips - Visual Solution](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1782772406086_skeleton.gif?alt=media&token=d652eb9e-260f-45c2-bf8c-d4767b3eff80)
  *Image Description / Caption: Design artifact showcasing UI/UX solution for Today's trips*

> New feature - more opportunitiesThe 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.


#### Case Study: Direct Bookings
**Case Study URL**: https://www.milansamardzic.me/case-study/TBfAMcM0oN1wI5b4ARgD/IZMcbnHiN6nNaP4rGxWV
**Executive Summary**: 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.

##### Case Study Cover Image:
![Direct Bookings Cover](https://framerusercontent.com/images/dHpfOdx5kKhXe6vOoQKQvCNFQQ.png?scale-down-to=512&width=553&height=326)
*Image Description / Context: Visual preview cover for Direct Bookings (FishingBooker)*

##### Case Study Visuals & Process Breakdown:

> My role on the projectFishingBooker 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.

- **Design Artifact**: ![Context](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1786893443422_Img_1.webp?alt=media&token=ed685ae7-55c2-4727-b54e-83cee5111222)
  *Image Description / Caption: Context*
  *Display Mode: medium width*

> 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

- **Design Artifact**: ![Concept design](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1786893453301_img_2.webp?alt=media&token=24234e4b-f65e-4b53-8b99-e877bf930fe8)
  *Image Description / Caption: Concept design*

> Prototyping and validationTo 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.

- **Design Artifact**: ![v1](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1786893671634_img_3.gif?alt=media&token=b7daef27-296b-43c4-985e-3b606501a306)
  *Image Description / Caption: v1*
- **Design Artifact**: ![v2](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1786893675314_img_4.gif?alt=media&token=53a18ffa-da30-4351-aac6-54fc476e5256)
  *Image Description / Caption: v2*
- **Design Artifact**: ![Responses](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2FTBfAMcM0oN1wI5b4ARgD%2Fsections%2F1786893494925_img_5.webp?alt=media&token=148da8b9-9520-4961-9ce3-e85e16758cdb)
  *Image Description / Caption: Responses*

> 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.


---

### Project: Personal projects (asd)
**Overview**: Experimenting with AI prototyping stack (Codex, Google AI Studio, Gemini, Vercel) to build experiences and make design workflow more efficient.

#### Case Study: Vinyl simulator
**Case Study URL**: https://www.milansamardzic.me/case-study/ok8IFKPYcDwZjtepZElu/UaH2bSvF3m5gN98FUyAD
**Executive Summary**: Testing limitations of AI prototyping with deliberate UI and complex 3D interactions to bring authentic analogue experience of vinyl records to digital space.

##### Case Study Cover Image:
![Vinyl simulator Cover](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fthumbnails%2F1790814941275_vinyl_project_thumb.jpg?alt=media&token=d027d01e-2576-4dd9-bcbd-ca704e0c7fa9)
*Image Description / Context: Visual preview cover for Vinyl simulator (Personal projects)*

##### Case Study Visuals & Process Breakdown:

> From simple prototype to full stack appIn 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:

- **Design Artifact**: ![Stack](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790123519327_Screen_Recording_2026_09_23_at_02.15.58.gif?alt=media&token=bba7498a-8e0e-4732-8f96-84ef2cf816d9)
  *Image Description / Caption: Stack*
- **Design Artifact**: ![Cards](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790123434251_Screen_Recording_2026_09_23_at_02.20.12.gif?alt=media&token=e8f32f4c-c065-4a65-9024-5d7869387f4c)
  *Image Description / Caption: Cards*
- **Design Artifact**: ![Books](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790123526864_Screen_Recording_2026_09_23_at_02.05.20.gif?alt=media&token=040e96a2-3448-44f0-899f-36e05646d13e)
  *Image Description / Caption: Books*

> 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 limitationsThe 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.

- **Design Artifact**: ![Archive page - vertical](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790812127674_archive_image.jpg?alt=media&token=f68e94e7-2ff1-478f-8cb9-2f58ff9b7aff)
  *Image Description / Caption: Archive page - vertical*
  *Display Mode: small width*
- **Design Artifact**: ![Turntable page](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790855874750_player_demo_image.jpg?alt=media&token=899ae83c-580b-4e66-ae11-93542ab43e14)
  *Image Description / Caption: Turntable page*
  *Display Mode: small width*

> Going full-stackBringing 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

- **Design Artifact**: ![Flip animation](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790813161298_flip_anim.gif?alt=media&token=66ae2c54-ddff-438a-a580-0c54eed70a78)
  *Image Description / Caption: Flip animation*
  *Display Mode: small width*
- **Design Artifact**: ![Album loading](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790813761035_vinyl_load.gif?alt=media&token=ecc1c128-e6e9-4be7-8fd4-cc63efdb857e)
  *Image Description / Caption: Album loading*
  *Display Mode: small width*
- **Design Artifact**: ![Tonearm & scratch](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790814064566_tonearm_mechanics.gif?alt=media&token=fa1cd3da-5d0d-4f76-8b30-fad68bf1ebbc)
  *Image Description / Caption: Tonearm & scratch*
  *Display Mode: small width*

> 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 takeawaysWhen 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

- **Design Artifact**: ![Manual code tweaking - Ai Studio](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790769704836_ai_studio_code_archive.gif?alt=media&token=6054c84a-77e0-4d5b-a3d2-f5d398498328)
  *Image Description / Caption: Manual code tweaking - Ai Studio*
  *Display Mode: small width*

#### Case Study: Sketching UX in Figma
**Case Study URL**: https://www.milansamardzic.me/case-study/ok8IFKPYcDwZjtepZElu/ADCtRGwee1FJBAPGLTsS
**Executive Summary**: A lo-fi component library enabling creation of fast, pixel-unperfect designs that solve real problems, helping designers to communicate and validate early ideas.

##### Case Study Cover Image:
![Sketching UX in Figma Cover](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fthumbnails%2F1789501655863_ux_sketching_cover.jpg?alt=media&token=7c501595-66e2-4f32-b255-dcebdfb7a8ae)
*Image Description / Context: Visual preview cover for Sketching UX in Figma (Personal projects)*

##### Case Study Visuals & Process Breakdown:

> ProblemEarly 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.

- **Design Artifact**: ![This was not going well...](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1789483963278_Screen_Recording_2026_09_14_at_12.24.24__1_.gif?alt=media&token=eed769ed-36b3-45d0-b08f-50d377885c51)
  *Image Description / Caption: This was not going well...*

> 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 approachSince 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.

- **Design Artifact**: ![Live editing](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1789502343832_Modal_interaction_opt.gif?alt=media&token=080aa281-fab2-40c1-b68c-132aa598e618)
  *Image Description / Caption: Live editing*

> 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.

- **Design Artifact**: ![No copy, no problem :)](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1789484202205_no_problem.png?alt=media&token=cd737d48-0e33-4d40-ae0a-2e527bc4bec3)
  *Image Description / Caption: No copy, no problem :)*
  *Display Mode: large width*

> 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.

- **Design Artifact**: ![Annotations](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1790722035725_1789553243772.png?alt=media&token=c96e3a3c-4d81-48ef-ad2c-8a1557d83a4f)
  *Image Description / Caption: Annotations*
  *Display Mode: medium width*

> After all, you are the designerSix 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.

- **Design Artifact**: ![Example flow ](https://firebasestorage.googleapis.com/v0/b/citric-scope-387309.firebasestorage.app/o/projects%2Fok8IFKPYcDwZjtepZElu%2Fsections%2F1789502153917_Screenshot_2026_09_15_at_21.52.57.png?alt=media&token=0e2f0c59-5758-4e15-bb83-96671e1e2a54)
  *Image Description / Caption: Example flow *
  *Display Mode: medium width*

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


---

## 5. Work Experience Timeline

### Product Designer at Holoscope (2019-2021)
Design studio from Banja Luka dedicated to building client solutions and internal products, a selection of which were acquired by HTEC.
*Key competencies: UI/UX, AR, Web*

### UX Designer at GoUrban (2021 - 2021)
B2B SaaS mobility platform from Vienna empowering fleet operators to offer shared mobility services for cars, bikes, mopeds, and scooters.
*Key competencies: Saas, Mobile*

### Product Designer at FishingBooker (2021 - 2023)
FishingBooker is the world's largest online marketplace for booking fishing charter trips globally. Often described as the Airbnb for fishing.
*Key competencies: Marketplace, B2B*

### Senior Product Designer at CAKE.com (2024 - Present)
CAKE.com is a Silicon Valley unicorn company that provides solutions designed to enhance team communication, task and time management.
*Key competencies: Saas, Web*

## 6. Frequently Asked Questions (FAQ)

### Q: Design has goals
**A**: I design not just for visuals but to make life easier for real users. Every feature is tied to a clear goal from improving usability to boosting conversion metric. That way design is a big part of any product success.

### Q:  Team culture is strong
**A**: As a team player cross-functional collaboration is my productive zone, where ego is set aside and focus stays on the team work. In addition working alongside others seems to be the right way to learn and grow.

### Q: Feedback is welcome
**A**: My process relies on fast-paced iteration and prototyping to quickly explore directions and validate ideas. Open feedback is essential to keeping this workflow effective and expectations aligned.

## 7. Direct Links & Attribution

- Official Website: https://www.milansamardzic.me
- AI Feed (Summary): https://www.milansamardzic.me/llms.txt
- AI Feed (Complete): https://www.milansamardzic.me/llms-full.txt
- Sitemap: https://www.milansamardzic.me/sitemap.xml