Video Preview
The User Experience Professional (freelance) for Digital Products in Munich.
E-Mail
Call
Handy Hintergrund Handy Hintergrund
Thomas Senior UX Professional
E-Mail
Call
Thomas Eichinger Profilbild
Thomas Eichinger Senior UX Professional
E-Mail
Call
Kontaktieren Sie mich direkt
+ 49 171 3 49 13 64
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.

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

HTTPS für die lokale Entwicklung

Mit Hilfe von mkcert lassen sich schnell und einfach SSL-Zertifikate für die lokale Entwicklungsumgebung erstellen

Es ist oft hilfreich Projekte und APIs lokal mit HTTPS zu starten, um eine Produktionsumgebung zu simulieren. Wie man HTTPS mit einem eigenen SSL Zertifikat für seinen localhost einrichtet, möchte ich im folgenden Artikel zeigen.

Vorbereitung

Für HTTPS benötigt man ein SSL-Zertifikat, das über kryptografischen Schlüssel die Authentizität und Integrität einer Vebindung bestätigt. Da es oft sehr schwer ist Zertifikate von echten Zertifizierungsstellen (CAs) für die lokale Entwicklung zu nutzen, gibt es die Möglichkeit eine eigene lokale Zertifizierungsstelle zu erstellen, die lokal vertrauenswürdige Zertifikate ausgeben kann.

Um diesen Prozess zu vereinfachen wurde das Tool mkcert entwickelt. Damit kann über simple Kommandozeilenbefehle das eigene Zertifikat verwaltet werden. mkcert kann über einen Paketmanager einfach installiert werden:

MacOS

brew install mkcert

Windows

choco install mkcert

Linux

sudo apt install libnss3-tools
brew install mkcert

Danach wird über mkcert -install die Zertifizierungsstellen im System hinterlegt.

Mkcert

Damit ist die Vorbereitung abgeschlossen und es können Zertifikate für das jeweilige Projekt erstellt werden.

React (CRA)

Um in seiner React Anwendung HTTPS zu nutzen sind nun ein paar Einstellungen nötig.

Zuerst müssen in der .env Datei folgende Variablen hinzugefügt werden:

HTTPS=true
SSL_CRT=./.cert/cert.pem
SSL_KEY=./.cert/key.pem

(Falls noch keine .env Datei existiert kann diese einfach im Root des Projektes angelegt werden)

Diese werden beim Start des Entwicklungsservers automatisch ausgelesen und somit HTTPS aktiviert. Da das Zertifikat und der dazugehörige Schlüssel aber noch nicht angelegt wurde, wird die Seite noch als unsicher angezeigt, wenn man auf https:// wechselt.

Um dieses nun anzulegen kann in der package.json ein neues Skript hinzugefügt werden. Dadurch muss man den Befehl nicht auswendig lernen und kann nach dem klonen des Repository schnell im HTTPS Modus arbeiten:

  "scripts": {
    ...
    "create-cert": "mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem localhost"
  },

Wenn dieses Skript mit npm run create-cert nun ausgeführt wird, befindet sich ein danach ein neuer Ordner mit dem Namen .cert im Root des Projektes. Dieser beinhaltet die entsprechenden Zertifikat Dateien.

mkcert

Beim erneuten start über npm start sieht man auf localhost jetzt eine sichere Verbindung.

SSL

Express.js

Um das Express Backend auch mit HTTPS zu starten müssen zunächst dieselben Schritte wie bei React durchgeführt werden.
Zusätzlich muss das Zertifikat aber noch manuell in die App geladen und ein https Server erzeugt werden:

import * as dotenv from 'dotenv';
import { readFileSync } from 'fs';
import { createServer } from 'https';
dotenv.config();

...

const sslConfig = {
    key: readFileSync(process.env.SSL_KEY),
    cert: readFileSync(process.env.SSL_CRT),
};

const httpsServer = https.createServer(sslConfig, app);
httpsServer.listen(8443);

Danach ist der Server unter Port 8443 mit einer sicheren Verbindung erreichbar ⭐
Mehr zu mkcert findest du auf https://github.com/FiloSottile/mkcert

Titelbild von Nicolas HIPPERT @unsplash