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 Munich (GER)
00+
years of experience as a freelancer (contractor)
UX strategy, conception and design with your agile team
+
years experience as a designer
+
teams I have worked with
over the years.
Consultant - UX integration and optimization in existing systems
Omnichannel Customer Experience

UX Focus

Skills in user experience and service design

  • Consulting for UX Processes
  • Scrum
  • Iterative Design
  • Iterative Process Prototyping
  • Wireframing
  • User Journeys
  • Certified Professional for Usability and User Experience
  • UX/UI Design
  • Visual Design
  • Work with Scrum
  • Interaction Design
  • Multidevice Experience
  • Concept
  • User Testing
  • Responsive Design
  • User Experience Design
  • Agile Methoden
  • Agile Software Development
  • Design Thinking
  • Design
  • Prototyping
  • Paper-Prototyping
  • Senior UX Design
  • User Interface

Low Hanging Fruits, Relaunch or Greenfield - what are our next steps?

  • Analysis and understanding of the actual state of the existing systems
  • Integration and consulting of UX in the company to improve UX maturity
  • Context-related methods for user centricity in the agile process
  • Finding solutions with the interdisciplinary team in relation to the existing – with Design-Thinking, Wireframing und Prototyping
  • Iterative design, building and testing during the development process, but also after going live

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 my personal User Journey to a Senior UX Professional

Since 2006 freelance work for various agencies, networks and customers - since 2010 with a strong focus on user experience

Work Experience
ab 2020_04
MSD SHARP & DOHME GMBH

Omnichannel Customer Experience

ab 2019_06
Hoffmann Group

UX in Industry 4.0

2018
Ludwig-Maximilians-Universität, Munich

Lectureship

ab 2017_04
Interhyp AG

Fintech

2016
PLAY – SKY Innovation Hub, Sky Deutschland

App for digital art education

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 Processes to the Omnichannel Customer Experience

ab 2019_06
Hoffmann Group

Senior UX Professional in Industry 4.0

2018
Ludwig-Maximilians-Universität, Munich

Lectureship

Concept and Design

ab 2017_04
Interhyp AG

Senior UX Professional and consulting for Fintech

2016
PLAY – SKY Innovation Hub, Sky Deutschland

Idea and conception on digital art education

2016
1&1 Internet SE

UX / UI Design

ab 2013
SKY Deutschland

Senior UX / UI Designer for Video on Demand

ab 2006
Self employed

Working for various companies and agencies:

Project management, concept and UX / UI design

2006 - 02
Desing GmbH

Permanent employment as communication designer

1999 – 01
»Grafitti« advertising agency

Part time:

layout and final artwork

Zeitstrahl
Education
Art
2019_02
Art exhibition »RHI ZOOM«

»Die Färberei« (Kreisjugendring Munich)

2018_05
UXQB Certified Professional

for Usability and User Experience, Foundation Level

2018_03
Art exhibition »Kondensationen«

»Farbenladen« (Feierwerk, Munich)

2015 – 11
Art Education (Bachelor of Arts)

Ludwig-Maximilians-Universität, Munich

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, Munich

1999 – 97
Apprenticeship as a typesetter

Systemtechnik, Tegernsee

1996
Abitur

Munich

Examples from the field of UX Concept and 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

Planning of the User Experience based on the Human-Centered Design Process according to DIN EN ISO9241-210

Understanding and specifying the user context
Pfeil nach rechts

Describe the usage context, the group profile, the task models and the current state. Creating personas with User Journey Maps.

Pfeil nach unten
Specify user requirements
Pfeil nach rechts

Defining the needs and the resulting user requirements.

Pfeil nach unten
Creation of design solutions to match with user requirements
Pfeil nach rechts

Creation of usage scenarios, storyboards, information architecture and wireframing - from low-fidelity to high-fidelity prototypes

Pfeil nach unten
Evaluation of the design solutions from the user perspective
Pfeil nach rechts

Implementation and observation of qualitative user tests - documentation of the findings with suggestions for improvement

Pfeil nach unten
Pfeile zurück Kreislauf

Iteration of the necessary process steps

Pfeil nach unten
Grüner Haken

Design solutions meet user requirements

Klick Flow - User Journey using the example of FinTech

Marcus King, 41 Marcus King, 41

Marcus King, 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