
Creating invoices on a smartphone is rarely just data entry. In reality, it is a **risk workflow**: done under time pressure, between appointments, with regulatory constraints and direct impact on cash flow and trust.

**Rechnungen+** was designed for exactly this reality. Not as a form app, but as a guided workflow that combines compliance, speed, and traceability.

## The Project in One Sentence

**Rechnungen+ is a mobile app (iOS/Android) that turns a fragmented invoicing process into a validated end-to-end workflow, from contacts and line items to ZUGFeRD PDF export with embedded XML.**

```insight title="Senior UX Focus"
The goal was not to hide complexity, but to translate it into clear, safe decision spaces: less uncertainty, fewer correction loops, and more reliable outcomes.
```
```mockup type="iphone" image="assets/einvoice/03.png" bgColor="#F5F5F7"
```
```mockup type="iphone" image="assets/einvoice/04.png" bgColor="#F5F5F7"
```

## Context

Small teams and solo professionals work on the go, often under time pressure. At the same time, formal requirements in B2B contexts keep rising:

- Mandatory data has to be complete and correct
- Status logic must stay understandable and auditable
- E-invoicing formats must be exportable and compatible

In many cases, "just sending a PDF by email" is no longer enough. The central UX question became: **How do we create speed without losing control, and correctness without domain jargon?**

## My Role (Senior UX/UI)

I shaped the product core from problem framing to interaction logic:

- Product strategy and problem framing
- Information architecture and end-to-end flow design
- UX/UI for core mobile workflows
- Content design and error microcopy
- Interaction model for status, history, and export
- Handover into a state-aware, validation-ready UI structure (design x logic)

## The Core Problem

Users rarely had a pure "UI problem." What they had was **uncertainty**:

- Is this invoice formally correct?
- Am I missing something important?
- Why was this document rejected?
- How do I get from work delivered to send-ready invoice without detours?

This led to a clear product focus: **reduce uncertainty early instead of fixing errors late.**

## Research Synthesis (Condensed)

I structured the domain around three segments:

- Freelancers and creatives
- Trade-adjacent small businesses
- Back-office roles in small teams

Recurring patterns:

- Mandatory fields and status logic are unclear
- Master data maintenance feels like friction
- Format terminology creates cognitive load
- Trust is built through visible PDFs, not abstract data models
- Errors are discovered too late, when corrections are already costly

```mockup type="iphone" image="assets/einvoice/06.png" bgColor="#F5F5F7"
```
```mockup type="iphone" image="assets/einvoice/05.png" bgColor="#F5F5F7"
```
## Product Strategy

I intentionally designed Rechnungen+ as a **safe workflow**, not as a traditional form sequence.

### 1) Task-First Instead of Format-First
Users start with the goal "create invoice," not with technical format decisions.

### 2) Progressive Disclosure
Complex input was split into focused subflows (details, text blocks, line items, attachments, PDF design) instead of forcing everything into one screen.

### 3) Safety by Design
Validation happens during input, not only at export: mandatory fields, duplicates, invalid items, and status consistency.

### 4) Speed by Reuse
Master data, templates, barcode scanning, and Assist reduce manual work in recurring steps.

### 5) Trust Through Transparency
PDF preview, history, and status timeline make changes easy to understand.

## IA and Product Structure

Navigation was structured as a productive workspace:

- Search
- Invoices
- Templates
- Products
- Contacts
- Assist
- Analytics
- Scanner
- Account

The invoicing workflow is modular and continuous:

1. Select or create recipient
2. Pull line items from products or add them manually
3. Set details (date, due date, currency, invoice number)
4. Add text blocks and attachments
5. Control status and process stage (quote, invoice, reminder, cancellation)
6. Generate, review, share, and version the PDF in history

## Key UX Decisions

- **Hero + detail sheets in the editor**: core status and context remain visible, while deeper input happens in focused sheets
- **Status as active control** instead of a static label (Open, Overdue, Paid, Cancelled), including timeline
- **Templates as content defaults** for intros, payment notes, and additional text
- **PDF design as a first-class feature** (layout, color system, typography, custom font, preview)
- **Assist as embedded support**: generate drafts from free text, suggest matching records, reduce uncertainty
- **Scanner flow** with quantity multiplier and direct handoff into invoice prefill state
- **E-invoice import** from XML or PDF with embedded XML for incoming documents

## Validation, Edge Cases, and UX Logic

Core safeguards in the flow:

- Prevention of duplicate invoice numbers
- Handling of empty or invalid line items
- Duplicate detection for contacts and products (including barcode)
- Data-loss protection for unsaved changes (discard vs draft)
- Export checks for existence and validity before sharing
- History clearly separates status changes from PDF versions

## Outcome

Rechnungen+ delivers an end-to-end mobile workflow from data capture to export-ready e-invoice, with a clear focus on:

- **Clarity** in domain-heavy steps
- **Safety** through early validation
- **Speed** through reuse and guided flows

Senior-level impact of the project:

- Complexity was not "designed away," but segmented in a meaningful way
- Domain logic, UI states, and data model were integrated consistently
- Trust-critical areas (status, history, export) were designed explicitly
- Scope was managed deliberately: focus on EN16931/ZUGFeRD, with advanced tax cases defined as the next stage

```mockup type="iphone" image="assets/einvoice/01.png" bgColor="#F5F5F7"
```
```mockup type="iphone" image="assets/einvoice/02.png" bgColor="#F5F5F7"
```


## KPI Framework for the Post-Launch Product Phase

- Time-to-First-Invoice
- Completion rate in the editor
- Error rate before export
- Successful export/share rate
- Support cases per 100 invoices
- Correction loops per invoicing process

## Next Expansion Steps

1. Advanced tax cases (multiple tax rates, reverse charge, EU scenarios) with understandable UX abstraction
2. Visible readiness score with prioritized to-dos before export
3. Step-level in-app analytics to reduce drop-offs and error patterns
4. Guided onboarding for first-time users with domain-specific presets

With Rechnungen+, an error-prone form process became a reliable mobile workflow, ready for export in minutes.


Mobile UX case study for secure, fast B2B e-invoicing workflows

Native Invoicing Workflow for iOS

E-Invoicing as a UX Challenge for Small Businesses


The Eyes and Ears Awards are among the most respected recognitions in European audiovisual design, celebrating strong ideas, thoughtful craft, and collaborative work across motion graphics, broadcast design, and digital media. Being part of this community alone already means a lot.

## The Projects

I was very grateful to see our work nominated across several categories, including **Best programme lead-in: Culture & Documentary**, **Best programme spot: News**, and **Best promotion of election coverage**.

Together with an amazing team, two projects were ultimately awarded: the **EU Election trailer**, recognized for *Best promotion of election coverage*, and **Zeitreise**, which received *Best programme lead-in: Culture & Documentary*. Both projects are very different in tone and purpose, but they share a common foundation—curiosity, trust in the process, and a lot of teamwork.

The EU Election trailer was about translating a complex, political topic into a clear and energetic visual language. *Zeitreise*, on the other hand, was a passion project rooted in storytelling, history, and a strong editorial look. Seeing both approaches appreciated side by side was especially meaningful.

[projects:history-documentary-design, eu-election-trailer]

## What This Means to Me

Awards are never the goal, but they are a wonderful moment to pause and reflect. These projects represent many conversations, iterations, late tweaks, shared references, and collective problem-solving. They wouldn’t exist without the trust of colleagues, editors, producers, and everyone involved along the way.

## Looking Ahead

I’m genuinely thankful for the recognition—and even more for the people I get to work with. It’s motivating to know that careful design, strong concepts, and collaborative thinking are seen and valued. I’m excited to keep building on this, exploring new ideas, and creating work that feels relevant, thoughtful, and fun to make.

Grateful for the Work, the Process, and the People

Multiple Projects won an Eyes and Ears Award 2024


Some productivity apps are *too good* at letting you plan. You end up with perfect lists… and zero momentum.

**Reminders+** is my attempt to fix that with one simple rule: **do at least one thing every day** — and let the streak do the heavy lifting. It’s a clean, fast, local-first iOS app we designed together with **Max Möckel** and built in **React Native**.  [App Store](https://apps.apple.com/ng/app/reminders/id6758573672)


# The idea: “one task a day” beats “a perfect plan”

Instead of pushing you into huge lists, Reminders+ is intentionally built around consistency:

- **Tasks** for the stuff you need to get done
- **Routines** for habits (daily / weekly / monthly)
- **Projects** for bigger goals
- **Streaks** as the motivator — your progress stays visible and tangible  [App Store](https://apps.apple.com/ng/app/reminders/id6758573672)

That mechanic sounds small, but it changes how you use the app: you stop aiming for “finish everything” and start aiming for “show up today”.


```insight title="Streaks as UX: motivation without gamification noise"
The streak isn’t a badge explosion — it’s just a calm, persistent signal: “you’re building something.” The UI stays minimal so the feedback loop stays strong.
```
```mockup type="iphone" image="assets/light-00001.webp" bgColor="#F5F5F7"
```
```mockup type="iphone" image="assets/Reminders-habit.webp" bgColor="#F5F5F7"
```

## UX/UI: calm, modern, and focused

We designed Reminders+ around a few principles:
- Fast capture (getting a task in should never feel like work)
- Clear hierarchy between Tasks / Routines / Projects
- A UI that stays out of the way, so your attention stays on doing, not organizing

```palette
iOS-Blue #007EFF rgb(0,126,255) usage=Primary
Off-White #F5F7FA rgb(245,247,250) usage=Background
Ink #0B1220 rgb(11,18,32) usage=Text
```
```animationSequence
videoPath: assets/reminders-8.mp4
safariVideoPath: assets/reminders-8-safari-scrub.mp4
frameCount: 5607
```
## Development: React Native, local-first by design

From day one, we wanted the app to feel instant — and to be something you can trust with personal planning.

So Reminders+ is built to be:
- 100% local storage, no cloud dependency
- “Data not collected” (App Store privacy)
- Fast & lightweight, with smooth navigation and animations

On the landing page we also made sure data is portable — including flows like download/import for your tasks.

## Iteration shipped: what changed after launch

We kept polishing the core flow with real-world use in mind — especially around managing bigger task structures:
- Compact subtasks
- Improved drag & drop
- Smoother animations & refined navigation

We also expanded accessibility of the UI experience through broader language support (including RTL improvements and more locales).

## Landing Page: clarity from the first click

![Reminders+ Landing Page](/assets/reminders-plus-landingpage.png)

The landing page serves as a visual extension of the app's minimalist philosophy. It was designed to communicate the value of privacy and simplicity immediately, using clean layouts and interactive previews to demonstrate the fluid navigation and the "no-account-required" onboarding flow. [Visit the landing page](https://reminders-plus.vercel.app/)


Habit-building task app for iOS, built with React Native

Reminders+ a local-first habit & task app for iOS

Building habits with Streaks


# Building strong brands at scale isn’t just about great visuals anymore. It’s about systems.

At the Premium Gruppe, I’m currently designing and building an automation platform that connects brand design, production and distribution into one coherent workflow.  
The goal is straightforward: make high-quality brand assets for streaming platforms faster, more reliable, and easier to scale — without losing craft or consistency.

This project lives exactly where my work tends to end up: between **brand design, automation and real-world production pressure**.


## The Challenge

We produce and maintain **hundreds of key visuals** across multiple streaming platforms:

- JOYN  
- Pluto TV  
- Amazon Prime Video  
- KDG / Vodafone  
- client platforms (welt.de, WELT mediathek and apps)

Each platform comes with its own reality:
- different aspect ratios  
- different technical specs  
- different deadlines  
- constantly shifting program schedules  

None of this is conceptually complex — but at scale, it becomes fragile. Traditionally, a lot of time went into manual checks:  
availability, resizing, gap tracking, deadline coordination across teams.

The bottleneck wasn’t creative quality.  
It was **orchestration**.



## The System

I designed a workflow that connects data, logic and creative production into a single pipeline, using **n8n as the orchestration layer**.

The system is built to:

- **Detect missing assets** automatically per platform and format  
- **Generate structured tasks** with clear ownership and timing  
- **Scale, crop and validate existing key visuals** based on platform rules  
- **Trigger fast-turnaround production** for missing or breaking content  
- **Keep delivery states in sync** across internal tools and endpoints  

Instead of reacting late, the workflow now **anticipates gaps** before they surface downstream.

Editorial planning, brand design and delivery no longer operate as separate silos — they’re part of the same system.



## About the Tools

The tools matter, but only insofar as they stay out of the way.

For orchestration, I use **n8n** because it allows complex logic to remain readable, adaptable and debuggable — even as workflows grow.  
For generative visuals and explorations, I integrate APIs like **OpenAI / Gemini**, combined with internal design systems and validation steps.

The guiding principle is simple:  
automation should be **transparent**, not magical.

Especially when brand consistency is involved, teams need to understand *why* something happens — not just that it does.



## Design Meets Automation

This project isn’t about replacing designers.  
It’s about **protecting design quality under scale**.

By automating repetitive and error-prone steps, the system creates space for what still requires judgment:
concept, typography, composition and storytelling.

Brand systems don’t live in Figma alone.  
They live in **processes**, **decisions** and **tools** that support those decisions.

In that sense, this workflow treats brand design as a living system — not a static set of rules.



## What I Learned

- Brand consistency scales best when logic is explicit  
- Designers are well positioned to shape the systems they work with  
- Automation isn’t the opposite of creativity — it’s a multiplier  
- The best systems fade into the background while raising overall quality  

Most importantly:  
Strong brands aren’t defined only by how they look, but by **how smoothly they operate**.



## Why This Matters

I’m deeply interested in how brand design evolves in an automated, AI-assisted production landscape.

The most meaningful work, for me, happens one level above individual assets — where systems, tools and design intent meet.  
Building this workflow didn’t feel like “process work”.  
It felt like **brand design at a different level of abstraction**.

And that’s the direction I want to keep exploring.

Key Visuals for Streaming Services

Automating Production for Brand Assets

For the Berlin law firm Rechtsklarheit and lawyer Tarik Sharief, the relaunch wasn’t just about aesthetics - it was about building a fast, reliable, and editor-friendly digital foundation. The new brand identity set the tone, but the real strength lies in the **frontend stack: Gatsby, React, Netlify, and Netlify CMS**.

A rebranding and web development project where corporate gravitas meets the flexibility of a modern JAMstack approach.


![assets/rk-1.png|assets/rk-2.png]

## Why Gatsby & React?

**Gatsby** delivers blazing-fast static pages with strong SEO benefits, while **React** components allow for a modular system: legal content, services, and blog posts all follow the same design logic.  

Hosting on **Netlify** ensures global CDN delivery, continuous deployment from Git, and automated builds — meaning every change goes live within minutes.  

## Content Editing Made Simple

Behind the scenes, **Netlify CMS** empowers the firm’s team to manage their own content without touching code.  
- Blog posts, service pages, and updates can be added through a simple UI.  
- The CMS writes directly to the Git repository, keeping the workflow consistent and version-controlled.  
- Editors enjoy a clean, structured dashboard tailored to their needs.  
- Contact forms flow directly into the E-Mail inbox of the law firm.


## Performance & Scalability

- **Performance**: Lighthouse scores consistently above 90  
- **Scalability**: New practice areas or features can be added easily thanks to React components  
- **Accessibility**: WCAG 2.1 AA compliance built into the design system  
- **Security**: HTTPS/SSL by default via Netlify  

The result is a site that looks professional, performs brilliantly, and is easy for the firm to maintain long term.  


## Confidence meets Clarity

The visual language is simple and strong: A deep blue establishes trust and reliability, while subtle turquoise accents add a modern twist. The logo feels calm and confident, designed for flexible use across all media. The typography is clean and structured, ensuring excellent readability – especially on mobile.

```palette
Dark-Blue #172340 rgb(23,35,64) usage=Primary
Cyan-Blue #258EA6 rgb(37, 142, 166) usage=Secondary
Light-Blue #33457C rgb(51,69,124) usage=Highlight
Paper #E9ECF6 rgb(233,236,246) usage=Fond/Background
```


## Built for Daily Use

The design system is modular, allowing dynamic layouts for service pages, legal content, or blog posts. The site is built with Next.js, hosted via Vercel for top performance, and content can be edited easily via a lightweight CMS.

The result: A consistent, flexible system that looks professional and can grow with the firm's needs – whether it’s expanding legal topics, adding blog posts or publishing updates. 

Check it out here: [rechtsklarheit.de](https://rechtsklarheit.de)


For the coming future a redesign of the page is in the works as of 2025. We are developing a Brand Identity reflecting on the transparancy element of the name Rechtsklarheit (legal certainty/transparency).
![assets/rk-5.png]


Frontend Development and Digital Transformation

Relaunching a Berlin Lawyers Website with Gatsby & Netlify

# Film Production for Artist Editions
Designing a film that behaves like a moving exhibition — that was the task for the WELT Künstlerausgabe in 2024. Instead of leaning on narration, the piece lets space, light, and composition carry the message. The result is a focused, under-one-minute film that’s effortless to present at events or embed online.

![assets/kunstlerausgaben-2.jpg|assets/kunstlerausgaben-3.jpg]

The visual language places front pages of DIE WELT in minimalist, architectural interiors: illuminated cubes, suspended frames, and open gallery halls. Clean geometry and generous negative space give each edition the presence of a standalone artwork while keeping the environment quiet and unobtrusive.

The color palette stays restrained — cool blues, soft whites, and neutral grays in the rooms — so the editions themselves provide the bursts of color and texture.

```palette
Deep-Navy #003a5a rgb(0,58,90) usage=Brand Color
Gallery-White #F2F2F2 rgb(242,242,242) usage=Background
Neutral-Gray #A9A9A9 rgb(169,169,169) usage=Accents
```


Text elements are minimal and functional. Headlines and labels appear only where needed, aligning with the newspaper layout and keeping the moving image as the primary voice. The compact runtime and measured pacing make the piece adaptable — from exhibition screens to web and social.


# The Trailer
[video](assets/Künstlerausgaben.mp4|assets/kunstlerausgaben-4.jpg)


Film Production

Creating a Trailer for the artist edition of DIE WELT



The starting point for this project wasn’t a tool – it was a **camera idea**.

I wanted a shot that feels instantly cinematic:  
a smooth **camera move straight through an airport body scanner**, revealing the title **“Airport Security USA”**. A shot that would normally be expensive, hard to shoot and full of logistical hurdles. Similar stock footage was nit available  – perfect territory to explore what AI can actually contribute to professional trailer production.

### From idea to image

I began the process very traditionally: with a **rough sketch**. Just enough to define perspective, framing and the moment where the title should appear. This sketch then became the basis for my Midjourney prompts.

I generated **lots of variations** – tweaking scanner design, lighting, lens feel and crowd density. The goal wasn’t realism alone, but something that already felt like a frame from a TV production.

Once I had a promising base image, I moved into **Photoshop**. Here I cleaned up the composition, removing unnecessary people and visual noise to make the camera path clearer and the focus more intentional.

![assets/airport-01.avif|assets/airport-02.avif]

### Turning stills into motion

Next stop: **Runway AI**.

I defined a **dolly move straight through the scanner**, describing the camera motion, speed and depth in detail. It took a few attempts to get a usable result – some versions felt too floaty, others broke perspective – but eventually I landed on footage that felt grounded enough to work with.

With that clip in hand, I switched back to familiar territory: **After Effects**.

Even though the footage was AI-generated, I treated it like real camera material:
- tracking the camera move  
- stabilizing and refining the motion  
- placing the title cleanly into the scene  

On top of that, I added small details that sell the realism:
- a **subtle blinking light** on the scanner  
- restrained depth blur  
- cinematic color grading  
- a touch of grain to break the “too perfect” AI look  

All of it aimed at making the shot feel like something that could have been filmed on a real set.

### Why this matters

This project wasn’t about replacing traditional production – it was about **extending it**. AI helped me prototype a complex shot, iterate quickly and arrive at a result that would otherwise require a full location, extras and VFX work.

Used thoughtfully, these tools don’t lower quality – they **unlock ideas** that were previously out of reach.

# The Packshot
[video](assets/airport.mp4|assets/airport-03.jpg)

Using Midjourney, Chat-GPT 4o Image Generation and Runway to create Footage

AI in professional Trailer Production

# Developing a Next.js-Portfolio for a Product Designer
How can a portfolio become more than a static showcase? That was the question driving this project for a product designer. Instead of relying on flat galleries or PDF presentations, I built an interactive web experience that brings his objects and furniture designs into a spatial, almost tangible environment.

![assets/bt-1.jpg|assets/bt-2.jpg]

The site was developed with **Next.js** as the framework and **three.js** for rendering 3D visuals directly in the browser. This combination allowed us to merge robust performance and SEO with immersive, GPU-accelerated graphics. Every piece of furniture can be rotated, zoomed, and experienced in context, turning the website into a lightweight digital exhibition.

The design language is kept clean and minimal: white backgrounds, cyan highlights, and large-scale imagery let the organic forms of the furniture stand in the foreground. A modular grid organizes news, objects, exhibitions, and partners — giving the designer full flexibility to expand the portfolio over time.

```palette
Blue #009EDC rgb(0,158,220) usage=Brand Color
Cyan #00ECEB rgb(0,236,235) usage=Highlight Color
Gallery-White #F2F2F2 rgb(242,242,242) usage=Background
```


From a technical perspective, the challenge was to create a smooth 3D experience without heavy loading times. We used optimized GLTF models, lazy loading, and fine-tuned lighting settings to ensure that every scene runs fluidly on both desktop and mobile devices. The Next.js architecture provided the foundation for fast builds and scalable hosting.

```javascript title="Three.js Canvas"
<Canvas
  shadows
  linear
  dpr={[1, 2]}
  camera={{ position: [camPos.x, camPos.y, camPos.z], fov: 65 }}
  onCreated={({ gl, scene }) => {
    gl.shadowMap.enabled = true;
    gl.shadowMap.type = PCFSoftShadowMap;
    gl.toneMapping = ACESFilmicToneMapping;
    gl.toneMappingExposure = 1.2;
    gl.physicallyCorrectLights = true;
    scene.background = null;
  }}
>
  <Preload all />
  <Scene items={items} targetIndex={index} />
```
The result is more than just a portfolio website — it’s a **digital stage for design**. By blending frontend development with immersive 3D presentation, the project opens new perspectives on how product designers can present their work online: as interactive, living objects instead of static images.

```three
preset="city"
autoRotate="true"
height="90vh"
model="assets/chair/Bubble Chair Model.glb"
scale="4"
position="0, 0, 0"
rotation="0, 45, 0"
```


A Frontend Developement Project opening Perspectives with three.js

Developing a Next.js-Portfolio for a Product Designer


For the 2024 EU election campaign, I created a trailer that frames Europe as a vibrant, forward-looking idea. The color palette is rooted in the EU flag: a deep blue with a turquoise twist and that unmistakable golden yellow.

```stats
12::Rotating Stars
20+::European Cities
3::Brand Colors
```

![assets/Europawahl Trailer Frame 182.jpg]

```palette title="EU Color Palette" description="Primäre Trailer-Farben (Blau, Türkis & Gold)"
Deep-Navy #003a5a rgb(0,58,90) usage=Brand Color
Turquoise #00728f rgb(0,114,143) usage=Brand Color
EU-Gold #E6A105 rgb(230,161,5) usage=Sterne/Highlight
```

```font name="Inter" styles="Medium, SemiBold, Bold" bgColor="#F5F5F7" color="#E6A105"
```

One standout detail: the twelve stars. They rotate in opposition to the overall scene while staying perfectly horizontal within the viewport. It's a subtle effect powered by After Effects expressions – but visually, it makes all the difference.

```javascript title="After Effects Expression"
-thisComp.layer("EU FLAG ROTATION").transform.rotation
```

## The trailer also includes:

- the packshot
- an animated bar chart showing political stats
- visuals of EU buildings in Brussels  
- a ticker of European cities, countries and flags
- stylish split screens for pace and variety
- a cinematic color grade to tie it all together

```mockup type="tv" video="assets/Eu Wahl Loop.mp4" bgColor="#F5F5F7"
```

![assets/Europawahl Trailer Frame 290.jpg]


The result? A motion-driven trailer full of structure, rhythm and European energy – and yes, it got nominated for the **2024 Eyes & Ears Award**.

# The Trailer
[video](assets/TR000X5A.mp4|assets/EU_wahl.webp)


My Trailer for the 2024 EU Election

Europe in Motion


Designing for a history format that feels fast, fresh and not like a museum tour? Yes, please. When the production company asked me to take on the show’s visual identity, I knew this would be something fun to dig into.


![assets/Zeitreise Logo.avif|assets/Zeitreise_1.avif]
![assets/Zeitreise_2.avif|assets/Zeitreise_3.avif]

The first idea came from the reference book and "Der Bader-Meinhof-Komplex", paired with those gritty 90s Spiegel TV graphics. Rough textures, Helvetica, punchy cuts – that raw, documentary feel was the core vibe I wanted to channel.

![assets/Zeitreise_7.jpg]

The color palette leans into black and white images and warm rust tones – like old film footage that’s been sitting on a shelf a little too long. There’s nostalgia, but also a sharp digital clarity that keeps it grounded in the now.

![assets/Zeitreise_4.avif|assets/Zeitreise_5.avif]
```palette
Rust-Red #CD412D rgb(205,65,45) usage=Primary
Off-White #F5F5F5 rgb(245,245,245) usage=Background
Charcoal #121212 rgb(18,18,18) usage=TextBG
```

For the typeface, I chose **Berthold Block** – bold, boxy, full of character. It screams “headline” in the best way. And whether it’s in the opener, lower thirds, or on the site, it holds its ground.

![assets/Zeitreise_6.avif]


# The Opener
[video](assets/Zeitreise_Opener.mp4|assets/Zeitreise.webp)


Show Design for a German History Documentation Series

Zeitreise


The project was designed for the business department of the German news media brand WELT, aiming to attract young employees through an internal magazine by Axel Springer. The creative brief was to embody the claim "Erfolg beginnt mit neuem Denken" (Success begins with thinking new), integrating a QR-code.

## Discovering Stable Diffusion

Just as this project came to my desk, I started exploring Stable Diffusion and Midjourney.

I delved into its different models, plug-ins, inpainting features, and most notably, ControlNet. This tool revolutionized the way I could integrate images into the generation process, allowing for pixel-perfect inclusion of logos, typography, and even machine-readable QR-Codes.

## Inspiration from TikTok
Sometimes, inspiration comes from unexpected sources. For me, it was while scrolling through TikTok. I stumbled upon a video showcasing Stable Diffusion-generated artworks that seamlessly incorporated QR-codes into their designs. This experience opened my eyes to the full potential of AI in the creative process.

## The Creative Process

My workflow involved generating countless visuals, tweaking and experimenting with the outputs. Not all attempts were successful; some QR-codes were unreadable by my iPhone, while others lacked visual appeal or were distorted.

I focused on refining three core ideas using ControlNet and careful prompting:

- Up in the Sky - A theme that elevates the concept to new heights.
- Micro Chip - Reflecting the intricate, technology-driven aspect of our brand.
- Company Headquarters - Emphasizing our foundation and stability.

![assets/qr-1.jpg::Bits and Bytes|assets/qr-2.jpg::Office Headquarters|assets/qr-3.jpg::Connectivity and Ideas|assets/qr-4.jpg::Micro-Chip 01|assets/qr-5.jpg::Micro-Chip 02|assets/qr-6.jpg::Up in the Sky]

## Final Touches in Photoshop
The last step was to outpaint, upscale, and composite the image using Photoshop. This stage was crucial for placing the campaign claim and brand logo, correcting colors, and preparing a printable PDF that met the specifications of the print company.

![assets/qr-0.jpg]


## Reflections on AI in Creative Design

This project was a pivotal moment for me, demonstrating how AI can serve as a versatile tool in virtually any workflow. The thrill of integrating such cutting-edge technology into a printed magazine campaign continues to inspire my work.

Through this experience, I've seen firsthand the transformative impact AI can have on creative design, making the once-impossible a reality. It's an exciting time to be at the intersection of technology and creativity, and I look forward to pushing these boundaries even further.


Ad-campaign leaveraging Generative AI in Design

Generating QR-Codes with Stable Diffusion

My Motion Design for the Earth Week 2023

Earth Week


Strong brands don’t happen by accident – they’re built through thousands of small, consistent decisions.  
With the **WELT Brand Guidelines**, my goal was to create a clear, practical framework that helps teams make exactly those decisions, every day, across print, TV and digital.

This wasn’t about reinventing WELT, but about **sharpening what’s already there**: a confident, journalistic brand with a strong visual voice.

## One brand. Many touchpoints.

WELT operates across a wide range of platforms – from television studios and mobile apps to print products, social media and physical merchandise. The challenge was to translate one brand identity into rules that work reliably everywhere, without killing flexibility.

The guideline brings everything together in one system:
- logo usage and edge cases  
- color logic for print, screen and broadcast  
- typography rules that scale from headlines to UI  
- naming conventions across products and platforms  

Not theoretical brand talk – but concrete answers to real production questions.

## The logo as a system, not just a mark

At the center is the WELT logo with its characteristic lowercase “e”. The guidelines clearly define when to use the positive version, the negative version or the WELT tile – and just as importantly, when *not* to.

Clear dos and don’ts help avoid common mistakes like recoloring, stretching or decorative misuse. This keeps the logo recognizable and strong, even in fast-paced production environments.

## Color with intention

WELT Blue remains the anchor of the brand. Around it, the guideline defines:
- an activating accent color (WELT Orange)  
- a structured set of secondary colors for charts, podcasts and thematic content  
- precise values for print, digital and TV  

This allows designers to create variety and hierarchy without drifting away from the core brand.

```palette
WELT Blue #003A5A rgb(0,58,90) usage=Primary
WELT Orange #F18825 rgb(241,136,37) usage=Accent
WELT Blue Light #246EA7 rgb(36,110,167) usage=Secondary
```

## Typography that carries the tone

The typographic system combines FF Mark for clarity and modernity with Freight Display for editorial weight and storytelling. Together, they balance precision and character – a perfect fit for a news brand that wants to inform without feeling cold.

Clear usage rules ensure consistency across headlines, captions, UI elements and long-form content.

## Naming things right

One surprisingly important part of the guideline: language.
How do we write WELT? When do we say WELT TV? What about WELTplus or WELT AM SONNTAG?

The brand manual defines these details precisely, because consistency in naming is just as important as visual consistency – especially for a media brand that lives in text.

## A tool for everyday work

More than anything, this brand guideline is meant to be used.
Download links, templates and contact points are integrated directly, making it easy for designers, editors and external partners to stay aligned.

The result is a living system that supports fast production while protecting the brand – and helps WELT look like WELT, no matter where it appears.

Sometimes the most impactful design work isn’t the loudest. It’s the structure that makes everything else work smoothly.

My Brand Guidelines for WELT

Brand Manual for German News Media Brand


This project is a short 3D book sequence created as part of a promotional trailer for a space-themed book. The goal was not to over-stylize the object, but to give a familiar book a slightly cinematic, almost weightless quality that fits the tone of the subject matter.

The animation appears only briefly in the final trailer, but a lot of care went into making the movement feel calm, physical, and believable.

## Project Overview

The focus of this piece was the page-turning motion. Books are deceptively complex objects: pages bend, overlap, collide, and never move in a perfectly clean way. Capturing that behavior in a controlled but natural-looking animation was the main challenge.

The book was fully modeled and animated in **Blender**, with particular attention paid to scale, proportions, and how light interacts with paper and the cover material.

## Animation & Rigging

Each page was rigged using an **armature setup**, allowing controlled deformation while still being influenced by physics. Subtle simulations were layered on top to avoid overly rigid motion and to introduce small imperfections that make the movement feel more organic.

Rather than aiming for dramatic motion, the animation stays restrained and precise — letting the pages open smoothly and settle into place without drawing attention to the technique itself.

## Pipeline

- **Modeling & Animation**: Blender  
- **Rigging**: Armature-based page setup  
- **Physics**: Subtle simulations for natural movement  
- **Rendering**: Image sequence export  
- **Compositing & Color**: After Effects  

Rendering was done as an image sequence to keep full control in post-production. In **After Effects**, the shots were composited, gently color-corrected, and integrated into the overall look of the trailer.

## Technical Details

- **Frame Count**: 501 frames  
- **Frame Rate**: 24 fps  
- **Output**: Image sequence → final video  
- **Resolution**: High-definition  

## Reflection

Even though the sequence is short, it was a great opportunity to dive deeper into character-like rigging for non-character objects and to combine controlled animation with physical behavior. Projects like this are a reminder that small moments in a trailer often benefit the most from careful detail work.

# The Render
[video](assets/book.mp4|assets/book.avif)


A Short Cinematic 3D Sequence for a Space Book Trailer

Book 3D-Modeling & Animation for TV Spot


For this HbbTV spot, the goal was simple: make the red button feel like an invitation, not a technical feature.

I redesigned the app layout to feel clearer, bolder and more TV-native, then translated that design language into motion. Instead of cutting between static screens, the camera moves through the interface — diving into menus, gliding across navigation levels and pulling focus onto what really matters: the content.

Key visuals from WELT shows take center stage. Faces of the channel appear directly within the UI, anchoring the app emotionally and making it feel alive rather than abstract. The motion language is intentionally smooth and continuous, creating the impression that the app already exists inside the TV — you just need to enter it.

To tie the digital world back to the living room, the spot ends with a short 3D sequence built in Blender: a remote control in close-up, the red button clearly highlighted. One press, one action. The message is immediate and intuitive — press red to start.

The result is a compact, high-energy promo that connects broadcast, interface design and motion into one clear story: the WELT app is right there, just one button away.

# The Spot
[video](assets/HbbTV.mp4|assets/red-button.avif)


HbbTV App Promotion

Promotional Spot for Digital Red Button

<p>Some productivity apps are <em>too good</em> at letting you plan. You end up with perfect lists… and zero momentum.</p>
<p><strong>Reminders+</strong> is my attempt to fix that with one simple rule: <strong>do at least one thing every day</strong> — and let the streak do the heavy lifting. It’s a clean, fast, local-first iOS app we designed together with <strong>Max Möckel</strong> and built in <strong>React Native</strong>.  <a href="https://apps.apple.com/ng/app/reminders/id6758573672">App Store</a></p>
<h1>The idea: “one task a day” beats “a perfect plan”</h1>
<p>Instead of pushing you into huge lists, Reminders+ is intentionally built around consistency:</p>
<ul>
<li><strong>Tasks</strong> for the stuff you need to get done</li>
<li><strong>Routines</strong> for habits (daily / weekly / monthly)</li>
<li><strong>Projects</strong> for bigger goals</li>
<li><strong>Streaks</strong> as the motivator — your progress stays visible and tangible  <a href="https://apps.apple.com/ng/app/reminders/id6758573672">App Store</a></li>
</ul>
<p>That mechanic sounds small, but it changes how you use the app: you stop aiming for “finish everything” and start aiming for “show up today”.</p>
<pre><code class="language-insight">The streak isn’t a badge explosion — it’s just a calm, persistent signal: “you’re building something.” The UI stays minimal so the feedback loop stays strong.
</code></pre>
<pre><code class="language-mockup"></code></pre>
<pre><code class="language-mockup"></code></pre>
<h2>UX/UI: calm, modern, and focused</h2>
<p>We designed Reminders+ around a few principles:</p>
<ul>
<li>Fast capture (getting a task in should never feel like work)</li>
<li>Clear hierarchy between Tasks / Routines / Projects</li>
<li>A UI that stays out of the way, so your attention stays on doing, not organizing</li>
</ul>
<pre><code class="language-palette">iOS-Blue #007EFF rgb(0,126,255) usage=Primary
Off-White #F5F7FA rgb(245,247,250) usage=Background
Ink #0B1220 rgb(11,18,32) usage=Text
</code></pre>
<pre><code class="language-animationSequence">videoPath: assets/reminders-8.mp4
safariVideoPath: assets/reminders-8-safari-scrub.mp4
frameCount: 5607
</code></pre>
<h2>Development: React Native, local-first by design</h2>
<p>From day one, we wanted the app to feel instant — and to be something you can trust with personal planning.</p>
<p>So Reminders+ is built to be:</p>
<ul>
<li>100% local storage, no cloud dependency</li>
<li>“Data not collected” (App Store privacy)</li>
<li>Fast &#x26; lightweight, with smooth navigation and animations</li>
</ul>
<p>On the landing page we also made sure data is portable — including flows like download/import for your tasks.</p>
<h2>Iteration shipped: what changed after launch</h2>
<p>We kept polishing the core flow with real-world use in mind — especially around managing bigger task structures:</p>
<ul>
<li>Compact subtasks</li>
<li>Improved drag &#x26; drop</li>
<li>Smoother animations &#x26; refined navigation</li>
</ul>
<p>We also expanded accessibility of the UI experience through broader language support (including RTL improvements and more locales).</p>
<h2>Landing Page: clarity from the first click</h2>
<p><img src="/assets/reminders-plus-landingpage.png" alt="Reminders+ Landing Page"></p>
<p>The landing page serves as a visual extension of the app's minimalist philosophy. It was designed to communicate the value of privacy and simplicity immediately, using clean layouts and interactive previews to demonstrate the fluid navigation and the "no-account-required" onboarding flow. <a href="https://reminders-plus.vercel.app/">Visit the landing page</a></p>
