Video Preview
The User Experience Professional (freelance) for Digital Products in Munich.
write
call
Handy Hintergrund Handy Hintergrund

Thomas Senior UX Professional
write
call
+ 49 1713 491364
UX
Freelancer
in München
00+
Jahre Erfahrung als Freelancer (Contractor)
UX-Strategie, Konzeption und Design mit ihrem agilen Team
+
Jahre Erfahrung als Gestalter
+
Teams mit denen ich im Laufe der Zeit zusammen­gearbeitet habe.
Consultant - UX Integration und Optimierung in bestehenden Systemen
Omnichannel Customer Experience

UX Kernkompetenzen

Top-Fähigkeiten im Bereich User Experience und Service Design

  • Beratung UX Prozesse
  • Scrum
  • Iteratives Design
  • Iteratives Prozess Prototyping
  • Wireframing
  • User Journeys
  • Certified Professional for Usability and User Experience
  • UX/UI Design
  • Visual Design
  • Arbeiten mit Scrum
  • Interaction Design
  • Multidevice Experience
  • Konzeption
  • Benutzertests
  • Responsive Design
  • User Experience Design
  • Agile Methoden
  • Agile Softwareentwicklung
  • Design Thinking
  • Design
  • Prototyping
  • Papier-Prototypen
  • Senior UX Design
  • User Interface

Low Hanging Fruits, Relaunch oder Greenfield – was sind unsere nächsten gemeinsamen Schritte?

  • Analyse und Verstehen des Ist-Zustands der bestehenden Systeme
  • Integration und Beratung von UX im Unternehmen zur Verbesserung der UX Reife
  • Kontextbezogene Methoden zur Nutzerzentrierung im agilen Prozess
  • Ideenfindung mit dem interdisziplinären Team in Bezug auf Bestehendes – mit Design-Thinking, Wireframing und Prototyping
  • Iteratives Gestalten, Bauen und immer wieder Testen im Entstehungsprozess, aber auch nach dem Launch

Bernd Angermann
Bernd Angermann
ADAC
Head of Digital Products & User Experience
Als Head of Brand Management & User Experience habe ich mit Thomas bei Interhyp zusammengearbeitet. Thomas hat mit seiner Erfahrung sehr dazu beigetragen, die UX Reife im Unternehmen zu steigern. Durch seine Methoden- und Fachkompetenz hatte er als Mitglied eines Scrum Teams großen Anteil an einer effizienten Produktentwicklung.
Philipp Engelmann
Philipp Engelmann
Mytheresa.com GmbH
Head of Product Management
In meiner Rolle als Product Owner bei Interhyp durfte ich in einem Team mit Thomas zusammenarbeiten. Nach Beginn der Transformation zu agilem Arbeiten, wurde die Rolle des UX Designers in agile Teams integriert, was sich als sehr positiven Aspekt auf die Zusammenarbeit und damit auch auf time-to-market neuer digitaler Produkte ausgewirkt hat. In seiner Rolle als UX Designer war Thomas unser Auge am Kunden.
Marcus Koppenhöfer
Marcus Koppenhöfer
Hoffmann Group Munich
Digital Product Manager
Durch seine langjährige Erfahrung und Fachkenntnis im Bereich User Experience trug Thomas einen sehr wertvollen Anteil zur Integration und Positionierung von UX in unserem Produkt „Connected Manufacturing“ der Hoffmann Group bei. Sehr wichtig waren ihm tägliche Absprachen in unserem internationalen Dev Team, mit dem PO und speziell mit mir als PM. Das große Interesse am spannenden und komplexen Nutzerkontext in der Industrie 4.0 halfen ihm, unser Produkt zusammen mit dem Team – vor allem in Hinblick auf die Nutzerzentrierung – zu optimieren.
Bernd Angermann
Bernd Angermann
ADAC
Head of Digital Products & User Experience
Als Head of Brand Management & User Experience habe ich mit Thomas bei Interhyp zusammengearbeitet. Thomas hat mit seiner Erfahrung sehr dazu beigetragen, die UX Reife im Unternehmen zu steigern. Durch seine Methoden- und Fachkompetenz hatte er als Mitglied eines Scrum Teams großen Anteil an einer effizienten Produktentwicklung.
Philipp Engelmann
Philipp Engelmann
Mytheresa.com GmbH
Head of Product Management
In meiner Rolle als Product Owner bei Interhyp durfte ich in einem Team mit Thomas zusammenarbeiten. Nach Beginn der Transformation zu agilem Arbeiten, wurde die Rolle des UX Designers in agile Teams integriert, was sich als sehr positiven Aspekt auf die Zusammenarbeit und damit auch auf time-to-market neuer digitaler Produkte ausgewirkt hat. In seiner Rolle als UX Designer war Thomas unser Auge am Kunden.
Marcus Koppenhöfer
Marcus Koppenhöfer
Hoffmann Group Munich
Digital Product Manager
Durch seine langjährige Erfahrung und Fachkenntnis im Bereich User Experience trug Thomas einen sehr wertvollen Anteil zur Integration und Positionierung von UX in unserem Produkt „Connected Manufacturing“ der Hoffmann Group bei. Sehr wichtig waren ihm tägliche Absprachen in unserem internationalen Dev Team, mit dem PO und speziell mit mir als PM. Das große Interesse am spannenden und komplexen Nutzerkontext in der Industrie 4.0 halfen ihm, unser Produkt zusammen mit dem Team – vor allem in Hinblick auf die Nutzerzentrierung – zu optimieren.

Touchpoints in meiner persönlichen User Journey zum Senior UX Professional

Ab 2006 selbstständige Tätigkeit für diverse Agenturen, Netzwerke und Kunden - seit 2010 mit starkem Fokus auf User Experience.

Work Experience
ab 2020_04
MSD SHARP & DOHME GMBH

Omnichannel Customer Experience

ab 2019_06
Hoffmann Group

UX in der Industrie 4.0

2018
Ludwig-Maximilians-Universität, München

Lehrauftrag in Konzeption und Design

ab 2017_04
Interhyp AG

Digitalisierung der Baufinanzierung

2016
PLAY – SKY Innovation Hub, Sky Deutschland

App zur digitalen **Kunstvermittlung**

Education
2018_05
UXQB Certified Professional

For Usability and User Experience

Foundation Level

2015 – 11
Art Education (Bachelor of Arts)

Ludwig-Maximilians-Universität

2009 – 07
Design Culture (Master of Advanced Studies)

Zürcher Hochschule der Künste, Zürich

2007
Signaletik (Certificate of Advanced Studies)

Work Experience
ab 2020_04
MSD SHARP & DOHME GMBH

Consultant UX Prozesse zur Omnichannel Customer Experience

ab 2019_06
Hoffmann Group

Senior UX Professional in der Industrie 4.0

2018
Ludwig-Maximilians-Universität, München

Lehrauftrag

Konzeption und Design

ab 2017_04
Interhyp AG

Senior UX Professional und Beratung zur Digitalisierung der Baufinanzierung

2016
PLAY – SKY Innovation Hub, Sky Deutschland

Ideenentwicklung und Konzeption zur digitalen Kunstvermittlung

2016
1&1 Internet SE

UX / UI Design

ab 2013
SKY Deutschland

Senior UX / UI Designer für Video on Demand

ab 2006
Selbständig

für verschiedene Unternehmen und Agenturen:

Projektmanagement, Konzept und UX / UI Design

2006 - 02
Desing GmbH

Festanstellung als Kommunikationsdesigner

1999 – 01
Werbeagentur »Grafitti«

Teilzeit:

Layout und Reinzeichnung

Zeitstrahl
Education
Art
2019_02
Kunstausstellung »RHI ZOOM«

»Die Färberei« (Kreisjugendring München)

2018_05
UXQB Certified Professional

for Usability and User Experience, Foundation Level

2018_03
Kunstausstellung »Kondensationen«

»Farbenladen« (Feierwerk, München)

2015 – 11
Art Education (Bachelor of Arts)

Ludwig-Maximilians-Universität, München

2009 – 07
Design Culture (Master of Advanced Studies)

Zürcher Hochschule der Künste, Zürich

2007
Signaletik (Certificate of Advanced Studies)

Zürcher Hochschule der Künste, Zürich

2002 – 99
Staatl. gepr. Werbe- und Kommunikationsgrafiker

Berufsfachschule für Grafik und Werbung, München

1999 – 97
Ausbildung zum Schriftsetzer

Systemtechnik, Tegernsee

1996
Abitur

München

Beispielarbeiten aus dem Bereich UX Konzept und UI Design

Interhyp AG
  • Interhyp AG
  • Landing Page
Spotlight
  • Spotlight
  • Verlagswebseite
Spotlight
  • Spotlight
  • Landing Page
SKY Deutschland
  • SKY Deutschland
  • Video On Demand
Aicher Ambulanz Union
  • Aicher Ambulanz Union
  • Webseite

Planung der User Experience anhand des menschzentrierten Gestaltungsprozess nach DIN EN ISO9241-210

Verstehen und Spezifizieren des Nutzerkontextes
Pfeil nach rechts

Beschreiben des Nutzungs­kontextes, des Gruppen­profils, der Aufgaben­modelle und des Ist-Zustandes. Die Erstellung von Personas mit User Journey Maps.

Pfeil nach unten
Spezifizieren der Nutzer­anforderungen
Pfeil nach rechts

Ausformulieren der Erforder­nisse und der daraus resultierenden Nutzer­anforderungen.

Pfeil nach unten
Erzeugen von Gestaltungslösungen zur Erfüllung der Nutzeranforderungen
Pfeil nach rechts

Erstellung von Nutzungs­szenarien, Storyboards, der Informations­architektur und dem Wireframing – vom Low-Fidelity zum High-Fidelity Prototypen.

Pfeil nach unten
Evaluieren der Gestaltungs­lösungen aus Sicht der Benutzer­perspektive
Pfeil nach rechts

Durch­führung und Beobachtung von qualitativen Usertests – die Dokumentation der Erkennt­nisse mit Verbesserungs­vorschlägen.

Pfeil nach unten
Pfeile zurück Kreislauf

Iteration der nötigen Prozessschritte,
soweit Evaluierungsergebnisse Bedarf aufzeigen.

Pfeil nach unten
Grüner Haken

Gestaltungslösungen erfüllen die Nutzeranforderungen

Klick Flow - Eine User Journey am Beispiel einer Baufinanzierung

Markus König, 41 Markus König, 41

Markus König, 41

Routing in Angular Web Komponenten

Der Angular Router ist ein sehr leistungsfähiges Werkzeug und einfach in einem regulären Angular-Projekt einzurichten. Aber wie kann man seine Stärken in einer Angular Web Komponente nutzen?

Einführung

Stelle dir sich zunächst die folgende Anwendungsstruktur vor:

RootApplication
├── ComponentA
├── ComponentB
├── WebComponents
    ├── ElementA
    │    └── SettingsHome
    │    └── SettingsProfile
    └── ElementB
         └── ElementBComponent

Unsere index.html sieht in etwa so aus:

<app-root modules-to-load="element-a, element-b"></app-root>
<element-a></element-a>
<element-b></element-b>

Unsere Root-Anwendung ist dafür verantwortlich, dass unsere Webkomponenten langsam geladen und die Element-Tags der Webkomponenten bei Bedarf gefüllt werden. Sie implementiert auch das RoutingModul zum Routen zu ComponentA oder ComponentB.

In jeder Web-Komponente wollen wir jetzt auch den Angular Router verwenden, aber da es sich um eine gekapselte Angular Module handelt, wird die Sache hier etwas knifflig.

Kann ich nicht einfach RouterModule.forRoot() verwenden?

Da unsere Root-Anwendung bereits das RouterModule forRoot Angular verwendet, tritt ein Fehler auf.

Was ist mit RouterModule.forChild()?

Außerdem wird es nicht funktionieren, da unsere Webkomponenten wie kleine eigenständige Angular Applikationen sind und nicht wissen, ob es ein Root-RouterModule in einer anderen Angular App gibt.

Kann ich den Angular Router überhaupt in meinen Webkomponenten verwenden?

Ja und nein.

Da der Router den Pfad unserer URL modifiziert, müssten wir Routenänderungen von mehreren Outlets über die gesamte Seite verarbeiten.

Nehmen wir an, wir würden auf unserer Seite https://example.com zu ComponentA routen, indem wir zum Pfad /component-a navigieren. Die URL sieht nun wie folgt aus: https://example.com/component-a

Was aber, wenn wir gleichzeitig auch zu einer Komponente innerhalb einer Web-Komponente, z.B. ElementA, routen wollen?

Im Moment denke ich, die beste Lösung dafür wäre, named router outlets innerhalb der Web-Komponente zu verwenden und sie an den aktuellen Pfad anzuhängen. Bei dieser Strategie kann die URL sowohl die Hauptroute als auch unsere sekundären Routen enthalten: https://example.com/component-a(elementA:settingsHome) (Mehr dazu später).

Die zweite Möglichkeit wäre, das Routing zu verwenden, ohne die Routenänderungen überhaupt in der Browser-URL anzuzeigen. Angular wird bereits mit einer großartigen Lösung hierfür ausgeliefert - der MockLocationStrategy.

MockLocationStrategy wird technisch nur zu Testzwecken eingesetzt, aber da sie simulierte Location-Events abfeuert, ist sie auch eine großartige Lösung für unser Routing-Problem. Das heißt, wenn wir zu SettingsHome innerhalb von ElementA navigieren, wird der Browser-Pfad nicht geändert und liest immer noch die vorherige URL. https://example.com/component-a

Einbindung

Richte zuerst deine Routen innerhalb der Web-Komponente ein, z.B. ElementA und definiere auch ein named router outlet innerhalb der Root-Komponente von ElementA.

element-a-routing.module.ts

const routes = [
      { path: '', component: SettingsHomeComponent, outlet: 'elementA' },
      { path: 'profile', component: SettingsProfileComponent, outlet: 'elementA' },
      { path: '**', redirectTo: '', pathMatch: 'full'}
    ]

element-a.component.html

<router-outlet name="elementA"></router-outlet>

Füge dann das RouterTestingModule (es enthält bereits die MockLocationStrategy) zu den Importen des ElementARoutingModule hinzu und rufe withRoutes(routes) auf, um die Routen einzurichten.

import { RouterTestingModule } from '@angular/router/testing';
import { NgModule } from '@angular/core';
import { SettingsHomeComponent } from './components/settings-home/settings-home.component';
import { SettingsProfileComponent } from './components/settings-profile/settings-profile.component';

const routes = [
      { path: '', component: SettingsHomeComponent, outlet: 'elementA' },
      { path: 'profile', component: SettingsProfileComponent, outlet: 'elementA' },
      { path: '**', redirectTo: '', pathMatch: 'full'}
    ];

@NgModule({
  imports: [
    RouterTestingModule.withRoutes(routes),
  ],
  exports: [RouterTestingModule],
})
export class ElementARoutingModule {}

Danach muss das ElementARoutingModul in das ElementAModul importiert werden.

import { NgModule, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ElementAComponent } from './element-a.component';
import { createCustomElement } from '@angular/elements';
import { SettingsHomeComponent } from './components/settings-home/settings-home.component';
import { SettingsProfileComponent } from './components/settings-picture/settings-picture.component';
import { ElementARoutingModule } from './element-a-routing.module';

@NgModule({
  declarations: [ElementAComponent, SettingsHomeComponent, SettingsProfileComponent],
  imports: [
    CommonModule,
    ElementARoutingModule
  ],
  entryComponents: [ElementAComponent]
})
export class ElementAModule {

  constructor(private injector: Injector) {
    const elementA = createCustomElement(ElementAComponent, { injector });
    customElements.define('element-a', elementA);
  }

  ngDoBootstrap() {}
}

Rufe schließlich initialNavigation() innerhalb der ElementAComponent auf, und schon kann es losgehen!

import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'element-a',
  templateUrl: './element-a.component.html',
  styleUrls: ['./element-a.component.scss']
})
export class ElementAComponent implements OnInit {

  constructor(
    private router: Router) {
  }

  ngOnInit() {
    this.router.initialNavigation(); // Manually triggering initial navigation for @angular/elements
  }

}

Jetzt kann man in ElementA zu den Routen innerhalb der Komponenten navigieren! Mit router.navigate:

this.router.navigate([{outlets: {elementA: 'ROUTE'}}]);

oder über die [routerLink] Direktive:

<button [routerLink]="[{outlets: {elementA: 'ROUTE'}}]"> Zu den Einstellungen</button>

Um zur leeren Route zu navigieren, verwende null anstelle des Namens der Route.

Mehr Infos

Noch mehr Informationen über das Thema erhältst du auf Medium oder auf GitHub