Where UX meets strong visual design
UX/UI & WEB DESIGNER

I design interfaces that balance clarity, usability, and strong visual identity — integrating AI to move faster and working closely with developers to ensure the final result matches the design.

View Work
4 +
Years of experience
100 %
Dev handoff quality
0
Random design decisions
UX/UI Design·Web Design·Product Design·Design Systems·App Design·Landing Pages·A/B Testing·AI-Assisted Workflow·Webflow·CMS Architecture·Figma Systems·Information Architecture·Conversion Optimisation·Hotjar & Analytics·Developer Collaboration·Prototyping·User Research· UX/UI Design·Web Design·Product Design·Design Systems·App Design·Landing Pages·A/B Testing·AI-Assisted Workflow·Webflow·CMS Architecture·Figma Systems·Information Architecture·Conversion Optimisation·Hotjar & Analytics·Developer Collaboration·Prototyping·User Research·
Experience
Background
Purpose Green
May 2025 — Now
UI/UX Web Designer

Designed and optimized Websites and Landing Pages, applying UI/UX Principles and improving layouts, components, and user flows based on User Behavior Analysis and Performance Data.

Led Website and Product Experience Improvements, designing scalable components, improving page structure and usability to ensure clarity, consistency, and high-quality digital interactions.

WebUX/UI
Kranus Health
Jan 2025 — Mar 2025
Lead UI/UX and Product Designer

Designing and Redesigning App Interfaces, including creating Prototypes for a new app in preparation for its launch.

Led the Design Team, overseeing all design materials (UX/UI, Print, Digital, Social Media) and making final decisions on their execution.

MobileHealthProduct
Expertlead
Jan 2021 — Oct 2023
UI/UX, Visual and Product Designer

Created Design Systems and Apps from scratch, delivering effective and consistent UX/UI Solutions across digital products in line with Expertlead's branding.

Used Figma and Adobe Creative Suite to design Interfaces, Prototypes, and a wide range of Marketing Assets.

SystemWebProductApp
Ertl-Yang
May 2019 — Apr 2020
Graphic Designer & Art Director

Designing Printed Material such as Brochures, Leaflets, Roll-Up Banners, Table Signages, ID Badges and Lanyards.

Designing Digital Material such as Digital Interactive Brochures, Social Media Banners and Video Editing.

GraphicBranding
Download CV
About
NO RANDOM DESIGN.
Who I am

Berlin-based UX/UI and web designer. I studied at the Academy of Fine Arts and have spent 4+ years designing digital products in Berlin startups and scale-ups. I work across product design, web, and visual — with a strong eye for UI and a mindset for systems.

How I work

I ask why before I ask what. I work closely with both product and marketing teams, challenge assumptions, and follow every project from first wireframe to live implementation. I collaborate directly with developers to make sure the design holds up in the real world.

AI in my workflow
AI-Native Designer

AI is part of how I think, not just how I work. I choose tools based on what each does best — Claude for layout logic and content structure, ChatGPT for rapid ideation, Lovable for structural prototyping, Gemini for research and synthesis. I stay ahead of what's emerging, test new tools early, and integrate them only when they sharpen the outcome. The standard is always the same: better design decisions, faster.

Principles
Clarity over decoration
UI quality matters as much as UX thinking
Simplify the complex — don't sanitise it
Design decisions need a reason
A design isn't done until it's live and right
Contact
Let's
Talk.

Open to full-time roles, freelance projects, and interesting collaborations.

Back to Work
Company / Purpose Green
Purpose
Green

UX/UI and web design projects — navigation systems, page redesigns, campaign landing pages, and A/B tested experiences for a B2B sustainability platform.

Web DesignUX/UIB2BProductMarketingAI-Assisted
Role
UX/UI & Web Designer
Company
Purpose Green
Tools
Figma, Webflow
See projects
Personas
The people using this
Marcus, 52
Portfolio Manager · Institutional Fund, Berlin
Context

Oversees a portfolio of 30+ commercial and residential properties across Germany. Answers to investors on ESG performance and long-term asset value.

Goals

Understand portfolio-wide risk at a glance. Find service providers he can trust. Make renovation investment decisions backed by data, not guesswork.

Behaviour

Scans before he reads. Arrives via LinkedIn or referral. Loses trust at visual noise or unclear hierarchy. Responds to concrete numbers and social proof.

Sandra, 44
Asset Manager · Private Real Estate Family Office
Context

Manages individual asset performance for a family office with mixed-use properties. Balances renovation budgets, tenant relations, and compliance requirements.

Goals

Quickly assess which properties need attention. Get actionable recommendations she can take to ownership. Stay compliant without needing to become an energy expert.

Behaviour

Detail-oriented but time-poor. Trusts structured, visual information over walls of text. Will drop off if the next step is not obvious.

AI in the Workflow
AI-Assisted

Claude for layout reasoning and content structure, ChatGPT for fast copy alternatives, Lovable for structural prototyping, Gemini for research. Each tool where it makes sense — always in service of a better design decision.

Projects
Select a project
01
Redesign
Structuring a Complex
Navigation System

Replaced a basic flat navbar with a structured mega menu — icons, product banners, and clearer user paths.

NavigationUX/UIProductRedesign
02
Redesign
From Text-Heavy to
Scannable Content System

Transformed a monotonous project list into a filterable, outcome-led case study system with visual data cards and CMS automation.

Web DesignUX/UIProductCMS
03
From scratch
Portfolio Analysis
Landing Experience

Full landing page built from scratch for a LinkedIn B2B campaign — structured for a pre-qualified audience.

Landing PageCampaignConversion
Curious about more?
Visual & Marketing Work

Beyond UX and web, I also created social media assets, campaign visuals, and marketing materials for Purpose Green — expo banners, LinkedIn templates, "Meet me at" cards, and social posts.

Social media banners, expo materials, campaign assets
Beyond the screens
Process, systems & tooling

Design at Purpose Green wasn't just about shipping screens — it was about making the whole team faster. I built infrastructure that lets marketing move independently, keeps Figma organised for cross-functional work, and removes recurring bottlenecks from the design process.

Landing Page System
Modular templates,
not blank canvases

Built a full library of pre-designed landing page sections in Figma — hero variations, content blocks, data highlights, CTA modules, testimonials, and footers. Marketing can now assemble a campaign page by plugging in copy and swapping images, without starting from scratch or waiting for a designer.

Social Media Templates BETA
Figma Buzz banner
system

Designed a complete social media template system inside Figma Buzz (still in beta) — 1080×1080 for LinkedIn posts, 1080×1350 for Instagram. Fully editable by non-designers: plug in headline, subheadline, CTA, swap the visual. No design knowledge needed, no approval delays for standard posts.

Figma Organisation
One source of truth
for the website

Reorganised the entire website Figma file by creating a dedicated "Current Website" page — a live, accurate overview of every page that exists on the site today. Eliminated confusion between old designs, new designs, and what's actually live. Faster for developers, faster for anyone joining the project.

The result

The marketing team went from needing a designer for every banner and landing page, to operating independently on standard formats. My time shifted from repeating the same executions to designing new things that actually move the needle.

Landing pages assembled without designer involvement
Social banners produced directly by marketing — zero back-and-forth
Figma file reorganised — single source of truth for live website
Purpose Green
Purpose Green · 01 / 03
Structuring a Complex
Navigation System

Replacing a flat, basic navigation with a structured mega menu — better hierarchy, icons, product banners, and clearer paths for every visitor type.

NavigationUX/UIInformation ArchitectureRedesign
Type
Redesign
Collaboration
Product & Marketing teams
Before — Old navigation
Old flat navigation bar

Flat horizontal list — no hierarchy, no icons, no product context.

After — Navigation Bar 3.0 · Click any screen to expand
Design Decisions
Component thinking, not just UI

Every element was designed as an independent, reusable Figma component with clearly documented states: default, hover, and active. Auto-layout throughout — so spacing and alignment are structural, never manual. Built for handoff from day one.

Auto-layout throughout

Every column, row, and item uses Figma auto-layout — spacing, alignment, and resizing are structural, not manual.

Named states, not duplicates

Default, hover, and active states defined within a single component using variants — one source of truth.

Built for handoff

Component naming, layer structure, and documentation were built with the developer in mind from the start.

Figma component variants

Component variants — default / hover / active · Figma auto-layout

Approach
Architecture before aesthetics

Before opening Figma, I mapped the full product structure with the product and marketing teams. The goal was to answer one question: what does a visitor need to understand in the first 3 seconds? From that, a clear hierarchy emerged — primary services, secondary tools, contextual CTAs, and a product spotlight panel.

3
Primary service categories
1
Product spotlight per dropdown
2
States per component variant
Dev collaboration
Designed to be built, not just reviewed

Most design-dev friction happens when specs are incomplete or components aren't documented. I worked with the developer from the structure phase — not just at handoff. Every dropdown was defined as a self-contained Figma component with named variants, precise auto-layout specs, and interaction notes embedded directly in the file.

Named variants, not duplicates

Default, hover, and active states live inside a single component. One source of truth — no ambiguity about which file version is current.

Auto-layout throughout

Every column, row, and icon slot uses Figma auto-layout. The developer could resize any element and the structure would hold — no pixel-pushing needed.

Interaction notes in the file

Hover timing, animation easing, and focus states were documented inside Figma — not in a separate Notion doc that gets ignored.

Figma component variants — default hover active
Outcome
A nav that works as hard as the product
Orientation
3 seconds to understand the platform
Icons, category labels, and product spotlights give visitors immediate context — no reading required.
Scalability
Grows without breaking
New services slot into existing categories cleanly. The structure absorbs growth — it doesn't collapse under it.
Handoff quality
Zero back-and-forth with dev
Complete component documentation and named variants meant the developer could implement without a single clarification call.
Purpose Green
View more projects
View more from Purpose Green
Purpose Green
Purpose Green · 02 / 03
From Text-Heavy to
Scannable Content System

Redesigning a flat, text-heavy reference list into a filterable, outcome-led card system — with a CMS architecture that auto-generates every visual element from data.

Web DesignUX/UICMS ArchitectureData VisualizationRedesign
Type
Redesign
Platform
Webflow CMS
Before — Text-heavy blog format
Before — old references page
After — My redesign
After — new reference design
The data behind the decision
The page had the right content.
Just the wrong structure.

Hotjar scroll maps told a clear story: 70–75% of users reached the first reference entry. Below that, engagement collapsed. The content wasn't wrong — the format was. A blog-style layout designed for editorial content was being used as a proof page for B2B decision-makers. Those are two completely different reading behaviours.

Hotjar scroll data — old page
Above the fold
95%
First entry
72%
Second entry
28%
Third entry
9%

Users were dropping off before seeing Purpose Green's strongest projects. The problem wasn't the projects — it was the format forcing people to read before they could decide what to read.

My role covered the full redesign: information architecture, the card system, the energy bar component, and the CMS automation layer. I also worked directly with the Webflow developer to define how every visual element maps to a CMS field — so the system generates itself from data, with zero manual design work per entry.

Information architecture

Restructured the page around how asset managers actually scan — energy class change visible before clicking, not after reading.

CMS automation layer

Defined the full field mapping with the developer — energy class, CO₂, cost, status all render automatically from CMS input.

Filterable card system

Designed a category filter (Wohnen / Gewerbe) and status badges that update automatically from CMS option values.

Designed for the decision-maker
Every element answers a specific question the asset manager is asking

The target user — a portfolio manager or asset manager — arrives at the References page with one question: "Has Purpose Green done this before, and did it work?" The design is built to answer that in under 10 seconds, without requiring them to read a single paragraph.

Question 1 — "What type of property?"

Filter chips (Wohnen / Gewerbe) at the top let users immediately narrow to relevant projects. One tap, no cognitive load.

Question 2 — "How much did energy improve?"

The energy bar (e.g. G → B) is the first visual element on every card. The transformation is readable in under 2 seconds — no numbers needed.

Question 3 — "What were the actual numbers?"

CO₂ savings, renovation cost, and surface area appear in a consistent 2×2 data grid. Same layout every card — scannable, comparable, no reading required.

Question 4 — "Is this project finished?"

Status badges (Abgeschlossen / In Planung / Bewertet) are CMS-driven and visible on the card — so users know before clicking whether a project is a completed reference or a live case.

Outcome
A proof page that actually proves things
Scan time
Key data visible in <10 sec
Energy class, CO₂ savings, and project type are all readable before a single click — the card does the qualifying work.
Automation
Zero design per new entry
Marketing adds a reference by filling CMS fields. Every chart, bar, and badge generates automatically — no designer needed.
Scalability
5 or 500 references
Identical visual consistency at any scale. The system grows without maintenance — and without ever looking inconsistent.
Purpose Green
View more projects
View more from Purpose Green
Purpose Green
Purpose Green · 03 / 03
Portfolio Analysis
Landing Experience

A full landing page built from scratch for a LinkedIn B2B campaign — designed for a pre-qualified audience and built around one conversion goal.

Landing PageCampaignConversionFrom scratch
Type
From scratch
Campaign
LinkedIn — January 2026
purposegreen.de/portfolio-analyse
Portfolio Analysis landing page — full scroll

↕ Scroll to explore the full page

Context & Role

The marketing team provided a first Figma draft with all the required content. It was functional but visually dense — not ready for a paid LinkedIn audience that makes a trust decision in seconds.

After design, I worked directly with the developer to ensure accurate implementation and launched on time. Live within 48 hours of the campaign deadline.

User Flow
Clicks ad
LinkedIn
Hero + form
Register directly
Partner logos
Trust signal
Use cases
Bottom CTA
Outcome
Quality
Campaign-ready
Polished and aligned with Purpose Green's brand — ready for a paid B2B audience.
Hierarchy
One clear path
Each section has one job and hands off to the next.
Delivery
Live in 48 hours
Designed, reviewed, and handed to development within 48 hours of the launch deadline.
Purpose Green
View more projects
View more from Purpose Green
Back to Work
Company / Kranus Health
Oncology
App

Designing a mobile app home screen for oncology patients — clear, calm, and built to be used daily during active treatment.

MobileHealthcare UXProduct DesignApp Design
Role
Lead UX/UI & Product Designer
Company
Kranus Health
Platform
iOS / Android
App home screen — default state Default state
App home screen — selected state Selected state
Context & Role

Kranus Health was building a companion app for oncology patients undergoing active treatment — a context where every interaction has emotional weight. I was brought in as Lead UX/UI Designer to design the home screen from scratch, working alongside the product team and clinical advisors.

The core constraint: patients aged 45–75, many experiencing chemo-related fatigue and cognitive effects. Every tap, every label, every visual decision had to work for someone having a bad day — not just an average one.

The home screen is the most loaded view in the app — it's the first thing a patient sees every morning, and it needs to guide them through a check-in without feeling like a form. Calm, clear, one obvious next step at a time.

Lead designer — home screen, check-in flow, component system
Collaborated with clinical advisors on language and interaction logic
Designed for iOS & Android — accessibility-first from day one
Personas
Designed for two people — both under pressure
Thomas, 61
Patient · Active chemotherapy, Berlin
Context

Undergoing chemotherapy for colorectal cancer. Living at home, checking in with his care team remotely. Experiences fatigue, occasional brain fog, and fluctuating symptoms day to day.

Goals

Complete his daily check-in quickly without it feeling like medical admin. Feel heard by his care team. Know that someone is paying attention to how he's doing.

Constraints

Low energy on bad days. Can't process complex interfaces. Needs plain language — no clinical jargon. One obvious action at a time, or he won't complete it.

Dr. Müller, 38
Oncology Nurse · University Hospital, Hamburg
Context

Manages 15–20 remote oncology patients in parallel. Reviews daily check-in data each morning. Needs to spot deterioration early — before it becomes a crisis requiring emergency intervention.

Goals

See which patients need attention today at a glance. Trust that incoming data is complete and accurate. Intervene earlier and more efficiently than phone-based follow-up allows.

Constraints

No time for tools that require training. Incomplete check-ins are worse than none — they create false reassurance. Any friction that stops patients completing the flow directly reduces her ability to do her job.

User Flow
Daily check-in — step by step
Open app
Notification or habit
Entry
Dashboard
Day counter + greeting
Orientation
Select mood
5-option scale
Mood check
Log symptoms
Tap chips
Symptom log
Med confirm
Yes / No
Med check
Done
Data sent to care team
Complete
User Journey
What the patient feels, step by step
Step What the user does What they feel Design response
Opens app Sees their name, a day counter, one clear question Tired, wants this to be quick Warm greeting. "Day 21/90" creates a sense of progress and journey — not just a daily chore.
Selects mood Taps one of 5 facial expression icons Relieved — no text to write, no scale to interpret Visual scale, zero reading required. One tap and it's done.
Logs symptoms Taps the symptom chips that apply today Can actually find the right words — names are familiar Plain language, not clinical terms. Most common chemo symptoms shown first.
Medication confirm Taps "Yes, I did" or "No, I didn't" Simple. Clear. Done. Two large buttons, no ambiguity. Immediate visual feedback on tap.
Sees suggested content Scrolls past a personalised article or tip Feels supported, not just monitored "Suggested for You" connects the check-in to something useful — the app gives something back.
Opens app
DoesSees their name, a day counter, one clear question
FeelsTired, wants this to be quick
Design"Day 21/90" creates a sense of progress — not just a daily chore.
Selects mood
DoesTaps one of 5 facial expression icons
FeelsRelieved — no text to write, no scale to interpret
DesignVisual scale, zero reading required. One tap and it's done.
Logs symptoms
DoesTaps the chips that apply today
FeelsCan find the right words — names are familiar
DesignPlain language, not clinical terms. Most common symptoms shown first.
Medication confirm
DoesTaps "Yes, I did" or "No, I didn't"
FeelsSimple. Clear. Done.
DesignTwo large buttons, no ambiguity. Immediate visual feedback.
Sees suggested content
DoesScrolls past a personalised article or tip
FeelsSupported, not just monitored
Design"Suggested for You" — the app gives something useful back.
Design Decisions
Every choice made against a bad day

The constraint wasn't "make it simple." It was: make it completable by someone who is exhausted, in pain, and has no patience for confusion. That standard changed every single decision.

Emotion scale with icons

5 visual emoji-style options from very unwell to great — no text label needed. Accessible at a glance even when fatigued. One tap captures the most important signal of the day.

Symptom chips

Plain language labels (Fatigue, Bloating, Pain) — not clinical terms. Pre-populated with the most common treatment symptoms so patients tap rather than type.

Single-page interaction

Check-in, medication confirmation, and suggested content visible on one screen — no deep navigation required. The entire routine is completable in under 60 seconds.

Outcome
Clarity
One screen, one job
The daily routine is completable without opening any sub-pages — check-in, medication, done. No navigation, no friction.
Accessibility
Plain language throughout
No clinical terminology. Visual options where possible. Everything readable at standard font size — designed for a 70-year-old on a bad day.
Tone
Calm, not clinical
The interface communicates care rather than data collection — which matters when users are dealing with something genuinely difficult.
Back to Work
Company / Expertlead
Time Tracking
App

Designing a time tracking app for freelancers and contractors from scratch — built to make logging hours as frictionless as possible, while giving users the insights they actually need.

App DesignProduct DesignUX/UIFrom scratch
Role
UX/UI, Visual & Product Designer
Company
Expertlead
Dashboard Dashboard
Timer running Timer
Monthly insights Insights
Context & Role

Expertlead needed a time tracking tool built specifically for their freelancer network — not a generic app, but something that understood how contractors actually work: multiple clients, hourly billing, monthly reporting. I designed it end-to-end, from research and personas to high-fidelity screens.

The core design challenge: time tracking is perceived as admin. The goal was to remove every possible source of friction — so that logging time felt as natural as checking your phone, not like filling out a form.

I ran the full design process — user research, competitive analysis, information architecture, wireframes, and high-fidelity UI. I also built the component library for the app within the Expertlead design system, ensuring visual consistency across product and web.

The Freelancers
Who this app is built for
Amir, 34
Senior Freelance Developer · Expertlead Network, Berlin
Context

Works across 2–3 client projects simultaneously. Bills by the hour and submits monthly reports to Expertlead. Tracking time is a requirement, not a preference — but he resents tools that slow him down.

Goals

Start and stop a timer in one tap. Know at the end of the day how many hours he's logged per project. Submit his monthly summary without having to reconstruct it manually.

Constraints

Zero tolerance for complexity. Forgets to log if the app isn't fast. If setup takes longer than 30 seconds — he won't use it.

Maria, 29
UX Designer · Freelance via Expertlead, Munich
Context

Splits her time between two long-term clients with different rate structures. At month-end, she manually reconciles everything — a process she finds painful and error-prone.

Goals

See a clear breakdown of hours per client, per week. Identify quickly if she's under or over her agreed hours. Export a clean summary she can send directly to clients.

Constraints

Doesn't trust data she can't easily verify. If the monthly report looks off — she'll do it manually anyway, making the app useless.

Design Decisions
Minimum input, maximum clarity
2-tap timer start

The dashboard shows a single prominent action: start tracking. One tap to open, one tap to confirm the project — and you're live. No form, no required fields, no friction at entry.

Contextual project suggestions

The app learns which projects you typically work on at which time of day. The most likely project appears pre-selected — most of the time, zero manual selection needed.

Progressive daily summary

At the end of each working session, a lightweight summary screen shows total hours logged, project breakdown, and a one-tap confirmation. The data is structured before it becomes a report.

Monthly insights as a first-class view

Not buried in settings — insights are a core tab. Per-client hours, weekly averages, and a direct comparison against contracted hours. Everything a freelancer needs before submitting their report.

Dashboard Dashboard
Timer running Timer running
User Flow
The daily tracking loop
Open app
Home screen
Entry
Start timer
2 taps
Tracking
Work
Timer runs
Background
Stop + tag
Project confirm
Log
Daily summary
Hours per project
Review
Monthly report
Auto-generated
Submit
Key Screens
High fidelity — all journeys

Every screen covers a specific step in the user journey — from first login to end-of-month reporting. No decorative screens — every view has a job.

Login
01 — Login
Dashboard
02 — Dashboard
Timer
03 — Timer
Sum Up
04 — Sum Up
Insights
05 — Insights
Also at Expertlead
Design system & web

The Time Tracking App was one part of a broader product role. In parallel, I built the Expertlead design system from scratch — token structures, component libraries, and documentation used across product and marketing. I also designed and continuously improved the company website.

Design system built from scratch — tokens, components, documentation
Company website — designed and continuously improved
Marketing assets — banners, one-pagers, social media, animations
Figma and Adobe Creative Suite across all deliverables
Outcome
Speed
Full log in under 30 sec
The 2-tap timer and contextual suggestions made daily tracking fast enough that users actually did it in the moment, not retroactively.
Clarity
Insights as a core view
Hours per client, weekly patterns, contracted vs logged — all visible in one screen. No manual reconciliation needed.
System
Part of the design system
All app components were built as part of the Expertlead design system — reusable across product and web, consistent from day one.