How This Design Hub Works

Motion and brand design work focused on systems, campaigns, and visual storytelling.

Crafting kinetic identities and motion systems that breathe life into digital brands, blending typography and animation seamlessly.

Motion & Brand Design

Motion and brand design projects focused on identity systems, campaigns, and high-quality visual storytelling.

Design (Motion & Brand) Work

Brand Design

Motion &

Building identities that move and scale across channels.

How This UX/UI Hub Works

UX/UI work with clear architecture, scalable systems, and conversion-focused user flows.

Designing intuitive, accessible, and pixel-perfect interfaces. Focused on human-centered experiences that look stunning and convert.

UX/UI Architecture

UX/UI case studies and product interface work with strong information architecture, usability, and design systems.

UX/UI Architecture Work

Architecture

UX/UI

Translating product complexity into clear user decisions.

How This Development Hub Works

Frontend and creative development with React, Next.js, WebGL, animation, and AI workflows.

Engineering robust, performant web applications. Turning high-end designs into reality using React, Next.js, and generative AI.

Creative Development

Frontend and creative development projects with React, Next.js, WebGL, animation, and AI-assisted workflows.

Creative Development Work

Development

Creative

Performance-first frontend engineering for ambitious digital experiences.


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”

```mockup type="iphone" image="assets/reminders-plus/IMG_3086.PNG" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/reminders-plus/IMG_3087.PNG" bgColor="#F5F5F7"
```

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

```list style="numbered" split="none"
- **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
```

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

```mockup type="iphone" image="assets/reminders-plus/IMG_3090.PNG" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/reminders-plus/streaks.png" bgColor="#F5F5F7"
```

```insight title="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.
```

# Calm, modern, and focused UX/UI Design

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

```mockup type="iphone" image="assets/reminders-plus/IMG_3089.PNG" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/reminders-plus/IMG_3088.PNG" bgColor="#F5F5F7"
```

# Development

So Reminders+ is built on React Native and local-first by design:

- 100% local storage, no cloud dependency
- “Data not collected” (App Store privacy)
- Fast & lightweight, with smooth navigation and animations

```palette
name="iOS-Blue" hex="#007EFF" rgb="0,126,255" usage="Primary" rank="1"
name="Off-White" hex="#F5F7FA" rgb="245,247,250" usage="Light Mode" rank="2"
name="Ink" hex="#0B1220" rgb="11,18,32" usage="Dark Mode" rank="2"
name="Red" hex="#F4512C" rgb="244,81,44" usage="Custom" rank="1"
name="Orange" hex="#F97316" rgb="249,115,22" usage="Custom" rank="3"
name="Green" hex="#22C55E" rgb="34,197,94" usage="Custom" rank="3"
name="Pink" hex="#FF2D55" rgb="255,45,85" usage="Custom" rank="4"
name="Violet" hex="#5856D6" rgb="88,86,214" usage="Custom" rank="4"
```

# Keeping clarity from the first click in Marketing

```mockup type="safari-tab" image="/assets/reminders-plus/landing.png" bgColor="#F5F5F7" url="https://reminders-plus.vercel.app/"
```

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/) and
[download in the App Store](https://apps.apple.com/ng/app/reminders/id6758573672).

![assets/reminders-plus/-1.jpg|assets/reminders-plus/-2.jpg|assets/reminders-plus/-4.jpg]


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

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

Building habits with Streaks


Building on the original **mobile UX** of the [streaming news app](../welt-tv-app-handoff), the next step was translating the product to the **big screen** in the living room. Instead of redesigning the experience from scratch, the goal was to extend the existing product architecture to TV platforms while preserving familiar interaction patterns.

```small
The resulting TV application brings the core functionality of the [mobile and tablet product](../welt-tv-app-handoff) to Apple TV, Android TV, Samsung TV, Fire TV and Roku. It includes a hero-driven home screen, program detail pages, a continuous livestream, search and essential settings - all adapted for remote navigation, lean-back viewing and large-screen readability.
```

```mockup type="tv" bgColor="#F5F5F7" image="assets/vr/TV - 3.png"
```

## Designing for TV required adapting the interaction model rather than reinventing the product.

Touch-driven navigation was translated into a **focus-based remote interface**, while the content architecture of the existing app remained largely intact.

```small
The home screen highlights current programming through a large hero stage and editorial content rows. From there, users can enter program detail pages, browse topics or immediately start the livestream: maintaining the same editorial hierarchy already familiar from the [mobile experience](../welt-tv-app-handoff).
```

![assets/vr/TV - 4.png]

### Core TV Experience

- Hero-based home screen highlighting current programming and editorial picks
- Continuous livestream as the primary entry point into the product
- Detail pages for programs, topics and editorial video content
- Search for shows, topics and videos across the catalog
- Basic account and app settings
- Focus-based navigation optimized for remote control and lean-back viewing

```mockup type="tv" bgColor="#F5F5F7" image="assets/vr/TV-4.png"
```

While the TV application focuses on extending the existing product to the living room, the project also explored how the same content ecosystem could  **evolve on emerging spatial platforms**.

## Exploring VisionOS and Immersive News Experiences

On Apple Vision Pro, the concept shifts from a screen-based interface to a **spatial news environment**. Instead of a fixed layout, the livestream becomes a floating focal point surrounded by contextual information layers and immersive environments.

![/assets/vr/Video VisionOS.png]

![https://f33qiggog7gxjoua.public.blob.vercel-storage.com/projects/video-visionos-mmjhl4dg-961da1.webp]

```small
Users can watch news while standing inside **360° environments** captured from real locations: city squares during elections, reconstruction sites after natural disasters, or scientific expeditions. Documentary formats expand this concept further by offering fully **immersive storytelling** spaces.
```

- Floating live broadcast window with contextual data panels
- 360° environments from news locations (cities, events, crisis zones)
- Immersive documentary worlds: oceans, wildlife habitats, engineering sites
- Spatial article layers with charts, maps and timelines
- Ambient environments during ad breaks to keep viewers engaged

Together, these explorations outline two complementary directions: a production-ready TV application that scales the existing mobile product to living-room platforms, and a forward-looking spatial concept that rethinks how live news, data and documentary storytelling could be experienced in immersive environments.

## Reference

[projects:welt-tv-app-handoff,automating-brand-assets]


Building on the original mobile UX of the streaming news app, the next step was translating the product to the big screen. Instead of redesigning the experience, the goal was to extend the existing product architecture.

UX/UI Design for TV Interface and Explorations with Apple VisionOS

From Mobile News App to Living-Room Platform


Creating invoices on a smartphone sounds simple, but in reality it is a **risk-sensitive workflow**. Freelancers and small businesses often create invoices quickly between meetings while navigating increasingly strict regulatory requirements. Since 2026, electronic invoicing has become **mandatory for B2B transactions in Germany**, turning what used to be a simple administrative task into a compliance-critical process. Poor UX in this context is not just inconvenient - it can lead to rejected invoices, delays in payment, or financial errors. 

# Not a Form App, But a Guided Workflow.

### This was not a form design problem.

```small
What users described during research was not frustration with fields or layouts, but uncertainty. They were unsure whether their invoice was correct, whether something important was missing, or why invoices were sometimes rejected.

Typical patterns emerged quickly:
```
- Required fields and validation logic were unclear
- Errors often appeared too late in the process
- Trust did not come from the data model — it came from the final PDF

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

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

```insight title="UX requirement"
The goal was not to hide complexity, but to translate regulatory logic into clear and safe decision points.
```

## A guided workflow instead of a form.

The product strategy focused on turning invoicing into a structured workflow rather than a long form. Validation was integrated early in the process, complex inputs were broken into focused steps, and the interface provided continuous feedback about status and correctness.

```small
Instead of presenting all information at once, the system progressively reveals decisions as they become relevant. This reduces cognitive load while still allowing users to maintain control over the process.
```

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

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

```small
The central question was: how do you translate regulatory complexity into clear decision spaces without overwhelming or micromanaging users? The answer lay in the interplay of early validation, progressive disclosure, and trust through transparency.
```

## Structuring the product around real work.

```small
The navigation was designed as a productive workspace rather than a traditional app menu. Users can move between invoices, templates, contacts and products, while the invoicing flow itself remains modular and consistent.
```

- Select or create the invoice recipient
- Add line items manually or from saved products
- Define details such as dates, currency and invoice numbers
- Attach text blocks or supporting documents
- Manage the process state (offer, invoice, reminder, cancellation)
- Generate, review and export the final PDF

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

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

## Translating regulation into clarity.

The core design challenge was translating regulatory complexity into understandable steps without overwhelming the user. Early validation, progressive disclosure and clear status indicators work together to create transparency throughout the process.
```small
Rather than hiding complexity, the interface segments it into manageable decisions. This approach allows users to maintain confidence that their invoice is complete and compliant before sending it.
```

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

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

# Outcome

**Rechnungen+ provides a mobile end-to-end workflow from data entry to export-ready e-invoice.** The product focuses on clarity in regulation-heavy steps, trust through transparent status handling and efficiency through reusable structures such as templates and product catalogs.

```small
The key lesson from this project is simple: in complex domains, good UX does not remove complexity: **it organizes it into decisions users can confidently make**.
```

Since 2026, electronic invoices are mandatory for B2B transactions in Germany. For freelancers and small businesses this introduces regulatory complexity and uncertainty. This case study shows how the Rechnungen+ app translates that complexity into a clear, mobile-first workflow.

Designing a secure, regulation-ready invoicing experience for freelancers and small businesses

Turning E-Invoicing into a Clear Mobile Workflow


# How can a portfolio become more than a static showcase?

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

```mockup type="macbook" bgColor="#F5F5F7" image="assets/upload/draft1-mmip2act-139d43.webp"
```

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.

![assets/upload/bildschirmfoto-2026-03-09-um-13-38-13-mmj6sw6w-b28f60.webp] {shadow="false" radius="false"}

```small
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
name="Blue" hex="#009EDC" rgb="0,158,220" usage="Brand" rank="3"
name="Cyan" hex="#00ECEB" rgb="0,236,235" usage="Highlight" rank="3"
name="Gallery-White" hex="#F2F2F2" rgb="242,242,242" usage="Background" rank="1"
name="Black" hex="#000000" rgb="0,0,0" rank="4"
```

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

```code type="javascript"
<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} />
```

```mockup type="macbook" bgColor="#F5F5F7" image="assets/bt/three.mp4"
```

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.

```mockup type="macbook" bgColor="#F5F5F7" image="assets/bt/transition.mp4"
```


A Frontend Developement Project opening Perspectives with three.js

Developing a Next.js-Portfolio for a Product Designer


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 Decap CMS**.

```mockup type="macbook" image="assets/rk-1.png" bgColor="#F5F5F7"
```

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

# Why Gatsby & React make the perfect JAMstack.

**Gatsby** delivers 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.

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

```mockup type="safari-tab" bgColor="#F5F5F7" image="https://f33qiggog7gxjoua.public.blob.vercel-storage.com/projects/decap-cms-mmjiomas-dc9185.webp"
```

## Content Editing Made Simple

Behind the scenes, **Decap 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

![assets/upload/bildschirmfoto-2026-03-09-um-12-33-18-mmj3vpmk-14c3de.webp]

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

## Confidence meets Clarity in Design

```small
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
name="Dark-Blue" hex="#172340" rgb="23,35,64" usage="Primary" rank="1"
name="Cyan-Blue" hex="#258EA6" rgb="37, 142, 166" usage="Secondary" rank="1"
name="Light-Blue" hex="#33457C" rgb="51,69,124" usage="Highlight" rank="3"
name="Paper" hex="#E9ECF6" rgb="233,236,246" usage="Fond/Background" rank="3"
name="White" hex="#FFFFFF" rgb="255,255,255" rank="4"
```

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

```mockup type="iphone" bgColor="#F5F5F7" image="assets/rk/rk.png"
```

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)

## Update: 2026

```small
For the coming future a redesign of the page is in the works as of 2026. We are developing a Brand Identity reflecting on the transparancy element of the name Rechtsklarheit (legal certainty/transparency).
```

![assets/rk-5.png]


Future-proof, performant, and editor-friendly: This Berlin law firm now runs on Gatsby with Decap CMS, combining React components with simple content editing.

Frontend Development and Digital Transformation

Relaunching a Lawyer's Website with React


Designing the **WELT TV mobile app** meant structuring a complex streaming product rather than simply designing screens. The app combines documentaries, series, news clips and live broadcasts within a single platform, while also integrating editorial logic, brand requirements and monetization features such as Plus access and paywall elements.

```small
From the beginning, the focus of the project was to create a system that external development teams could implement without ambiguity. Instead of treating each screen as a standalone layout, the product was designed as a **structured UX architecture** that defines how content, components and navigation behave across devices.
```

![assets/upload/components-1-mmin00li-ea4d09.webp]

```insight title="Design must survive implementation"
A polished interface is only successful if it can be implemented reliably. Clear rules, documented behavior and defined edge cases turn design from visuals into a buildable product.
```

The foundation of the project was a documented **design system** that structured the visual language and interaction patterns of the app. Rather than designing isolated layouts, UI elements were organized into reusable components and states that could scale across the entire product.

```palette
name="Blartz" hex="#171B2D" rgb="23,27,45" rank="1"
name="Orange" hex="#F18825" rgb="241,136,37" rank="1"
name="Background" hex="#0E101B" rgb="14,16,27" rank="3"
```

- Brand-aligned color, typography and spacing systems
- Navigation patterns adapted to both iOS and Android conventions
- Defined component states such as loading, empty and error conditions
- Responsive rules for phone and tablet layouts, portrait and landscape
- Consistent media teaser and thumbnail hierarchies for editorial content

![assets/upload/group-165-mmjfesd9-ee81dc.webp|assets/upload/group-178-mmjfilo9-887a59.webp] {shadow="false" radius="false"}

# Screens alone don’t explain how a product behaves.

Beyond the visual system, the project included a detailed screen-by-screen specification describing how the interface behaves in real scenarios. These notes document logic that cannot be derived from static UI layouts.

- Home screen with editorial highlights and program navigation 
- Video detail pages for shows, series and news segments
- Streaming player with live and on-demand video
- Live broadcast section including EPG integration
- Authentication, account and profile flows
- Settings, notifications and platform-specific variations

```mockup type="iphone" bgColor="#F5F5F7" image="assets/upload/iphone-11-pro-mmjg1xbs-6cdb26.webp"
```

```mockup type="iphone" bgColor="#F5F5F7" image="assets/upload/serie-mmjgcv2c-72ea61.webp"
```

```small
Together with a component library containing more than one hundred component states and a device matrix covering phones and tablets across both platforms, the product became a coherent UI system rather than a collection of layouts.

Stakeholders from marketing, editorial, brand and management were involved throughout the process. User flows were mapped and reviewed iteratively to ensure that not only the visuals but also the structure and navigation of the product worked reliably.
```

## The outcome: a dev-ready design handoff.

The final deliverable was a structured package of components, rules and screen specifications that allowed the external development team to start implementation quickly and with minimal ambiguity.

```small
Instead of handing over design files, the project translated the product into a system developers could build with confidence.
```

![]

![assets/vr/epg.png] {shadow="false" radius="false"}


Designing a streaming news app is not only about the interface — it is about building a system that developers can implement reliably. This case study shows how a mobile and tablet streaming product was translated into a documented design system, component library and dev-ready handoff.

UX/UI Architecture

Core Methods

What I Build

UX/UI Projects