Rafał Zieliński

Product designer with an art director's eye.

Case study 1/4

From free tool to paid SaaS.

I redesigned a beloved free engineering tool into a paid SaaS product — without losing the community that made it valuable.

KalkulatorPro homepage after the redesign — free trial and 40+ engineering calculators
My Role
Lead UX/UI Designer / Product Strategy Advisor

Context

KalkulatorPro.pl is a free suite of engineering calculators that built a loyal community through word of mouth alone.

The challenge wasn't building a paywall — it was converting a trusted free tool into paid SaaS without breaking that trust.

3,000+
Engineers
40+
Calculators
99.9%
Uptime
PN/EN/DIN
Standards compliant
KalkulatorPro homepage before the redesign
KalkulatorPro homepage after the redesign
BeforeAfter

Solution

Signup only asks for email and password — '5 days free, no card required,' with billing deferred to the end of the trial.

A real phone number stays in the footer — a low-cost fallback for less digitally fluent users, still handled personally by the owner.

Problem — "Floating Form"

A small calculator form sat in the top-left corner above a large, empty white area. No instructions, no explanations, no supporting content. The page visually signaled "unfinished," making it hard to justify a paid subscription.

Solution — "Content Stack"

Every calculator page was rebuilt around a full content stack — a 3-step usage guide, recommended engineering values, formulas, comparison tables, and FAQ — wrapped around the calculator form.

KalkulatorPro gas calculator subpage before the redesign — form with large empty space below
Before — a small form above a large, empty white area.
KalkulatorPro gas calculator subpage after the redesign — full content stack
After — the same calculator wrapped in a full content stack.

Design Tokens Systematization

The visual system was rebuilt on Tokens Studio — semantic tokens for color, typography, spacing, radius, and shadow — replacing ad hoc, page-by-page styling across 40+ calculator pages. This keeps the product consistent as it scales and bakes WCAG contrast requirements into the system by default.

Results

Paid subscribers grew from ~100 to ~190 after launch — a coordinated release, so no single change can be isolated as the cause.

The dedicated B2B section now drives ~10 inbound inquiries a month — a channel that didn't exist before.

100 → ~190 (+90%)

Paid subscribers following the redesign launch

~10 leads / month

Inbound B2B inquiries via the dedicated "For Teams & Companies" section

Design Review Q&A

That's a real trade-off, made deliberately. A card-at-signup filters for purchase intent, but it also filters out exactly the audience this product needed most: existing free users who'd never paid and needed to re-experience the tool's value first. With usage data in hand, I'd want to see trial-to-paid conversion split by acquisition source before calling it settled.

Keeping the core interaction unchanged kept the perceived "betrayal" surface small. Once the paywall went live, students and university staff — never the monetization target — started dropping off as a side effect. That wasn't predicted upfront; the free-access path for that segment was a reactive fix, not a planned mitigation. I don't have churn data to prove this worked — only the owner's qualitative read that signups stayed steady and annual sales were strong.

I'm not claiming a measured lift — I don't have that data. What I can defend is the diagnosis: the "floating form" signaled unfinished quality right at the moment a user decides whether to pay, and content-rich pages are a well-documented pattern for building authority in exactly that moment.

Forty-plus pages built up ad hoc over years is exactly where design debt compounds fastest — and the product wasn't staying at 40 pages, it was adding account screens, pricing tiers, and billing. Skipping a token layer just means every new surface duplicates inconsistent styling or needs a redesign pass later, at higher cost than the token system upfront.

Case study 2/4

Data-driven skills dashboard.

I turned ~400 real job offers into an interactive dashboard that shows graphic designers moving into IT which skills the market actually expects.

My Role
Product Owner / UX Researcher / Product Designer / DesignOps
Tech Stack
Notion / Apify / Google Sheets / OpenAI / Figma / Cursor / GitHub / Vercel

Context

Analog and graphic designers struggle to break into IT because the tech skill gaps are unclear.

Before building anything, I audited design communities and forums to validate the pain point.

Process

Scraping Live Markets

Custom Apify scrapers collected 800+ live job descriptions.

Filtering Anomalies

Filtered out noise (e.g., Frontend roles tagged as UX), leaving ~400 relevant design offers.

Extraction Bottleneck

Extracting skills with the Gemini API in Google Sheets hit rate limits.

The Pivot

Switched to OpenAI via GPT for Sheets, which removed the bottleneck.

Solution

Designed in Figma: a multi-filter system that updates results instantly, with no apply button.

chcedo.it — UX/UI Designer: required tools table with the share of job offers for Junior, Regular and Senior
Required tools
chcedo.it — UX/UI Designer: required skills table with the share of job offers for each experience level
Required skills
chcedo.it — UX/UI Designer: work mode (on-site, hybrid, remote) by experience level, with a bar chart
Work mode
chcedo.it — UX/UI Designer: salary ranges (lower and upper limit) by experience level, with a bar chart in thousands of PLN
Salary ranges

Results

The MVP is live. User testing surfaced four clear areas for the next iteration:

Interaction & Layout

Filter changes gave no immediate visual feedback, so users had to scroll to check results. Fix: a sticky filter panel.

Data Transparency

The most frequent request: show data freshness and sample size per role — 100% based on 2 postings isn't the same as 100% based on 200.

Taxonomy & Filtering

The skill taxonomy felt fragmented (mixed PL/EN terms, duplicates). Users also asked for multi-select roles, since UX/UI and Digital Designer often overlap.

Accessibility & Visual Consistency

Gaps found: incomplete keyboard navigation, text contrast below 4.5:1, and Junior/Regular/Senior colors that don't match between filters and charts.

Next: shipping these accessibility and UI fixes, then adding analytics to measure how people actually use the dashboard.

Detailed feedback log, prioritization, and next iteration plans are documented in my Notion workspace.

Case study 3/4

Standardizing how AI works in marketing.

I'm building a micro-SaaS that gives AI a growing knowledge base about each client's brand — validating it manually with ad agencies before automating.

Klamra app — Structure view with client folders and copy fields
My Role
Founder / Product Designer
Tech Stack
Supabase / Adobe UXP / Google Stitch / Tailwind CSS / Cursor / Claude

Context

Agencies use AI daily for copy, research and strategy — but it starts from zero every time. Without lasting brand context, the output is generic and inconsistent.

Problem

Two related problems:

  • No persistent brand knowledge — every AI task starts from scratch, so the output is generic and the same briefing gets repeated.
  • Fragmented production — approved copy is pasted by hand between a text editor and Photoshop, causing errors and delays.

Solution

Klamra is built from four connected parts — from brand knowledge to the final design file.

Brand Voice knowledge base

Structured files per client: personas, communication rules and forbidden words. Meant to give any AI tool the same brand context, so nobody has to re-brief it from scratch.

Concierge MVP

Before automating, I prepare Brand Voice files by hand for real agencies — to learn what they actually need before writing more code.

Copy status panel

A web panel where copy moves from draft to approved — one place that shows which text is final.

Photoshop plugin

An Adobe UXP plugin synced with the copy panel: approved text lands directly on Photoshop layers, with no manual copy-pasting.

Validation

The first Brand Voice file went to the owner of a micro ad agency. His take: it would meaningfully cut research time for new clients — an early signal, not a metric. I'm now in conversations with more agencies to onboard the first clients.

Next steps

In progress: automated brand analysis and persona generation (a UI mockup for now). Planned: channel-ready copy from the Brand Voice, approved content feeding back into the knowledge base, and organization accounts.

Case study 4/4

Building a product from scratch.

I built an AI-powered QA tool that spots typos directly on marketing graphics — to shorten the feedback loop between managers and designers.

Micro SaaS app — scan results with a typo marked on a beer ad and a PDF report button
My Role
Founder / Product Designer / Product Strategist
Tech Stack
Figma / Cursor / GitHub / Next.js / Vercel / Cloudflare / Gemini 2.5 Flash

Context

In ad agencies, proofreading banners, social posts and ads is a manual bottleneck. I designed a tool that turns it into a 60-second automated scan.

Problem

Manual QA is slow and error-prone — one mistake can mean a costly reprint. Standard spell-checkers can't read text on flattened graphics.

SurveyProblem Validation

Is the problem addressed by this app important?

100%Yesn≈10

No 0%

I surveyed around 10 agency professionals — every one of them confirmed the need for automated asset checks.

SurveyStress & Responsibility

Stress level when approving large batches of visual assets.

~33%
~67%
12345
No stressExtreme stress
Respondents reported high stress when approving large batches of assets manually.

Solution

Three simple steps for fast-paced creative teams — no retyping text, no complex setup.

Drag & Drop Upload

Drop up to 15 graphics at once — the app compresses them automatically for faster scans.

Instant Error Spotting

Within 60 seconds, typos are marked directly on the image with pulsating markers.

One-Click PDF Reports

Managers export a PDF report mapping every typo — no more listing errors by hand.

Discovery and design process — handwritten sketches and workflow ideation
Mapping out core user journeys and technical architecture before coding.
Technical implementation — coding the verification engine in Cursor AI editor
Full-stack development loop: writing code in Cursor while monitoring deployed changes via GitHub.

Key decisions from MVP to live product:

01 — Initial Assumptions

Feedback showed that a plain list of typos forced users to hunt for each one on the canvas — defeating the point of automation.

02 — Iteration & UX

I added visual error mapping with pulsating markers, plus a multi-page PDF export as a bridge between managers and designers.

03 — Cloud Architecture & Security

Moving to the cloud (Vercel + Next.js), I removed password protection so recruiters and testers can try it freely — replaced by Cloudflare anti-bot protection and a 15-scan limit to control costs.

04 — Analytics Integration

Vercel Web Analytics tracks how and when the tool is used — input for the next iteration.

Next steps

  1. Discovery & Strategy

    • Problem Identification
    • User Research & Benchmarking
    • Solution Architecture
  2. MVP & Proof of Concept

    • UX/UI Design
    • Implementation (Vercel + Next.js)
    • Working Demo & Internal Testing
  3. Beta & ML Integration

    • Machine Learning Models Integration
    • Closed Beta (Target Audience Testing)
    • Feedback Collection & Mapping
  4. Launch & Scaling

    • Logic Refinement
    • Official Launch (Public Release)
    • Analytics Monitoring

The MVP is live and in testing, with a daily scan limit to keep it stable. I'm collecting usage data and feedback for the next iteration.

Craft

Designing emotions.

An unofficial passion project — a concept launch page for Diablo IV, exploring UI and motion design. No brief, no research: pure visual craft.

Fan concept, not affiliated with Blizzard Entertainment.

Diablo IV hero pre-order screen with Lilith
Diablo IV character classes screen
Diablo IV open world screen
Diablo IV Collector's Edition screen
Diablo IV editions comparison screen