25.01.2025 aktualisiert

**** ******** ****
Premiumkunde
100 % verfügbar

Erfahrener UX/Produkt Designer und Frontend-Entwickler mit Typescript

Nürnberg, Deutschland
Weltweit
Informatik Lehramt
Nürnberg, Deutschland
Weltweit
Informatik Lehramt

Profilanlagen

AlexanderFriedl-CV.pdf

Skills

Human Centered Design (HCD)UX DesignerUser ResearchUsabilityTypescriptHTML & CSSReact.jsAngularFrontend EntwicklerJavascriptinteraction designDesign SystemScrumNode.jsNest.jsDesign StudioDesign ThinkingFigma WireframesPrototypes / WireframesUsability TestingUI DesignerMaterial Design
Profile
As a product designer and engineer, I’ve spent 20 years working with mid-size and large organizations to create products centered around real user needs and insights. I guide projects from the initial concept and strategy through prototyping, testing, and implementation.

Portfolio: www.alexfriedl.com
Expertise
  • Full-Stack-Entwicklung (Typescript, Node.js)
  • Frontend-Entwicklung (React.js, Angular, vue.js)
  • UX Strategieberatung & Prozesse
  • UX/UI Design (Figma)
  • User Research
Kompetenz
  • Produktdesign
  • API- und Backend-Entwicklung (Nest.js, MongoDB, Keycloak)
  • CI/CD mit AWS und Azure
Grundkenntnisse
  • Solution Architecture

  • CI/CD mit Jenkins
Referenzen
  • Mercedes Benz
    Cloud Transformation eines SAP-basierten Systems für effiziente, papierlose Fertigung mit visueller Werkerführung und integriertem Qualitätsmanagement
  • Merck
    Einfaches Identity Management mit einem multidevice fähigen Portal zur Verwaltung von Credentials
  • Industry Fusion
    Plattform zur herstellerunabhängigen und interoperablen Vernetzung von Industrie 4.0-Assets, für intelligente, vernetzte Fertigung
  • MediaMarkt / Blau.de / o2online.de
    Erstellung und Dokumentation zahlreicher Onlineshop-Komponenten in einem Storybook-Designsystem
     
Leistungen als UX Professional

User Research
  • Durchführung von Benutzerforschung durch Interviews,
    Umfragen und Usability-Tests, um die Bedürfnisse, Ziele und
    Verhaltensweisen der Nutzer zu verstehen.
  • Erstellen von Personas und User Journeys, um die
    verschiedenen Nutzergruppen und ihre Interaktionen mit dem
    Produkt zu visualisieren.
Produkt Design
  • Übernahme des gesamten Designprozesses von der Idee über
    die Entwicklung bis hin zur Markteinführung.
  • Ideation und Konzeption: Entwicklung und Bewertung von
    Produktideen basierend auf Nutzerbedürfnissen und
    Geschäftsanforderungen.
User Experience (UX)
  • Informationsarchitektur: Strukturierung von Inhalten und
    Funktionen so, dass Benutzer diese intuitiv und effizient finden
    können.
  • Wireframing und Prototyping: Erstellung von Layouts
    (Wireframes) und interaktiven Prototypen, um den Fluss und die
    Benutzerfreundlichkeit des Produkts zu testen.
  • Usability-Testing: Planung und Durchführung von Tests, um
    sicherzustellen, dass das Design intuitiv ist und die Bedürfnisse
    der Nutzer erfüllt.
  • Interaction Design: Gestaltung der Interaktionen und
    Animationen im Interface, um die Benutzerfreundlichkeit und die
    Interaktion zu verbessern.
User Interface (UI) Design
  • Visuelles Design: Gestaltung der visuellen Elemente wie
    Buttons, Farbpaletten, Typografie und Iconographie, um eine
    konsistente und ansprechende visuelle Sprache zu schaffen.
  • Design Systems und Style Guides: Erstellen und Pflegen von
    Design-Richtlinien, um sicherzustellen, dass das Produkt
    konsistent und anpassungsfähig ist.
  • Responsive Design: Anpassung des Designs für verschiedene
    Bildschirmgrössen und Geräte, um eine optimale
    Benutzererfahrung auf verschiedenen Plattformen zu
    gewährleisten.
Prototyping und Testing
  • Erstellen von hochinteraktiven Prototypen für Testzwecke und
    Nutzerfeedback.
  • Iteratives Testing: Mehrfache Überarbeitung und Testing, um
    das Produkt zu verbessern und die Anforderungen des Marktes
    und der Nutzer zu erfüllen.
Produktvalidierung und Analyse
  • KPI-Definition und Messung: Festlegen von Key Performance
    Indicators (KPIs) und Metriken zur Bewertung des
    Produkterfolgs.
  • User-Feedback und Anpassung: Analyse von Benutzer-
    Feedback nach der Produkteinführung und Durchführung von
    Verbesserungen, um das Produkt weiterzuentwickeln.
  • A/B-Tests und Datenanalyse: Durchführung und Analyse von
    Tests, um herauszufinden, wie Änderungen das Nutzerverhalten
    und den Produkterfolg beeinflussen.
Leistungen als Fullstack-Entwickler

Frontend Entwicklung
  • React, Angular, Vue.js: Entwicklung von modernen, interaktiven
    Benutzeroberflächen, die dynamisch auf Benutzereingaben
    reagieren. Nutzung von Komponenten, um UI-Elemente
    wiederverwendbar und modular zu gestalten.
  • Next.js: Entwicklung von serverseitig gerenderten Anwendungen
    und statischen Websites mit React, um schnelle Ladezeiten und
    SEO-Optimierung zu erreichen.
  • Storybook und Chromatic: Erstellen, Testen und Dokumentieren
    von UI-Komponenten in isolierten Umgebungen mit Storybook
    und Nutzung von Chromatic für visuelle Regressionstests.
  • Tailwind CSS, HTML5, CSS3: Aufbau responsiver,
    ansprechender Oberflächen mit Tailwind für Designsysteme und
    schnelle Prototypenerstellung.
Backend Entwicklung
  • NestJS: Entwicklung von skalierbaren und wartbaren Backend-
    APIs, die auf dem MVC-Prinzip basieren und für TypeScript
    optimiert sind.
  • Node.js: Aufbau von serverseitigen Anwendungen und API-
    Diensten mit Node.js als JavaScript-Laufzeitumgebung.
  • REST API und NextAuth: Erstellung und Verwaltung von
    RESTful APIs sowie Implementierung von Authentifizierung und
    Autorisierung für sichere Benutzerzugriffe mit NextAuth und
    Keycloak.
  • Datenbanken (MongoDB und Redis): Verwaltung von Daten
    durch NoSQL-Datenbanken wie MongoDB und Caching von
    Daten für schnelle Zugriffszeiten mit Redis.
Deployment und Cloud Services
  • AWS und Azure: Einsatz und Verwaltung von Cloud-
    Infrastrukturen. Nutzung von Services wie AWS Lambda, S3
    und Azure Functions für serverlose Architekturen.
  • Vercel und Heroku: Deployment von Frontend- und Fullstack-
    Anwendungen mit Vercel und Heroku für schnelle Bereitstellung
    und Verwaltung.
  • GitHub und GitLab CI/CD: Nutzung von Continuous
    Integration/Continuous Deployment (CI/CD) Pipelines für
    automatisierte Builds, Tests und Deployments.
Soft Skills
  • Empathisch
  • Kommunikativ
  • Kreative Problemlösungen
  • Durchsetzungsstark
  • Analytisch
  • Selbstreflektiert
  • Lösungsorientiert
Hard Skills
Strategie, Research & Testing (Mehrjährige Expertise)
  • UX Strategien
  • Interviews
  • 4s / Hallway Testing
  • Usability Testing & Evaluation
  • Design Thinking
  • User Journeys
  • Value Propositions
  • JTBD Methodik
  • Workshops
  • Design Studio
  • Empathy Maps
  • User Stories
  • Szenarien
  • Simulationen
Design Ops (Mehrjährige Expertise)
  • Design Versionierung
  • Design Skalierung
  • Design Systeme 
  • Standardisierung und Konsistenz
  • Interdisziplinäre Kollaboration
  • Kosten und Effektivität
Dev Ops (Kompetenz)
  • Git, Gitlab, GitHub
  • Azure Cloud Tools
  • Bitbucket
  • Jenkins
  • JIRA, Confluence
Konzept (Mehrjährige Expertise)
  • UI Design
  • Interaktives Prototyping
  • Design Elemente
  • Interaktionsdesign
  • Bedienkonzepte
  • Wireframes
  • Klickdummies
  • Useflows
  • Google Material
  • Responsive Design
  • Spezifikationen
  • Guidelines
  • Mockups
  • Typography
  • Visuals & Icons
Frontend (Mehrjährige Expertise)
  • HTML5, CSS3, SCSS
  • Responsive Webdesign
  • Java- / Typescript, ES6
  • Angular, Vue, React 
  • CSS in JS (styled components…)
  • Apache ECharts
  • Angular Material
  • MUI, Bootstrap
  • Storybook
  • Rxjs, Redux, Store
Backend (Kompetenz)
  • GraphQL
  • Rest API
  • OpenAPI
  • Node.js
  • Express.js
  • Nest.js
  • SQL
  • NoSQL
  • MongoDB
  • Postgres
  • Redis
Tools (Mehrjährige Expertise)
  • Adobe XD
  • Sketch
  • Figma
  • Abstract
  • Axure
  • Balsamiq
  • Invision / Zeplin
  • Photoshop
  • Illustrator
Prozesse & Methoden (Mehrjährige Expertise)
  • Human centered Design
  • Double Diamond 
  • Design Thinking 
  • Service Design
  • Design Sprints
  • Lean und Agile
  • Scrum
  • Component driven development
Branchenerfahrung
Healthcare, Automotive, Chemistry, E-Commerce, Manufacturing & engineering, Technology, Agenturen für Marketing und Media
Kontakt
Wenn Sie an einer Zusammenarbeit interessiert sind, Fragen haben oder sonstig in Kontakt treten möchten hinterlassen Sie mir
einfach eine Nachricht an hi@alexfriedl.com oder rufen Sie durch +49 157 581 508 46
Website

Sprachen

DeutschMutterspracheEnglischverhandlungssicherFranzösischGrundkenntnisseSpanischGrundkenntnisse

Projekthistorie

Mercedes Benz: UX Konzeption eines Produktions- und Design Systems mit Guidelines und UX/UI Best practices für komplexe Datamangement Apps im Produktionsumfeld (React.js mit Typescript)

Mercedes Benz AG

Automobil und Fahrzeugbau

>10.000 Mitarbeiter

Als Senior UI/UX Designer / Entwickler bei der Mercedes-Benz AG konzentrierte ich mich auf die Schaffung benutzerzentrierter digitaler Erlebnisse durch datengesteuertes Design, Wireframing in Figma, Benutzertests und die Entwicklung von Komponentenbibliotheken innerhalb eines Designsystems (React.js app mit TypeScript).

Rollen
  • Senior UX/UI Designer
  • Senior Frontend Entwickler
Schlüsselkompetenzen
  • UX/UI Design
  • Frontend-Entwicklung mit React.js und TypeScript
  • Designsysteme
Erfolge
Problem: Im Usability-Test stellte sich heraus, dass Benutzer Schwierigkeiten mit der Filterfunktion hatten. Die Auswahl und Kombination von Filtern war verwirrend und führte zu Fehlinteraktionen.
Lösung: Wir überarbeiteten die Filterfunktion, sodass die Filterauswahl einfacher wurde und eine Echtzeit-Vorschau der gefilterten Daten eingeführt wurde. Zudem wurden häufig verwendete Filter als Quick-Filters markiert.
Ergebnis: Ein zweiter Test zeigte, dass die Filterzeit um 40% sank, 85% der Benutzer die neue Funktion als intuitiv empfanden und die Fehlerrate deutlich sank.

Aufgaben
  • Beratung zu Benutzererfahrung, Designprozessen und interdisziplinärer Zusammenarbeit
  • Erstellung und Leitung eines ganzheitlichen Designsystems für Teams und Produkte
  • Erstellung von Best Practices, Richtlinien und Spezifikationen für Design sowie Anleitung von technischen Teams
  • Erstellung von Nutzungskonzepten und Prototypen zur Präsentation in Stakeholder-Meetings
  • Erstellung von Benutzeroberflächen in Übereinstimmung mit Interaktionsprinzipien
  • Leitung von Designlösungen auf Grundlage von Benutzererkenntnissen, Geschäftsanforderungen und Branchentrends
  • Entwicklung reaktiver Frontends mit TypeScript und Storybook (komponentengesteuert)
  • Erstellung einer Web-Anwendungsstruktur, einschliesslich Konzeptualisierung und Geschäftsanalyse
  • Schreiben von Unit-Tests mit Jest
Design Methoden
  • Scenarios
  • Use Concepts
  • Wireframes
  • Wireflows
  • Useflows
  • Mockups
  • Interactive Prototypes
  • Hallway Tests, 5s Tests
Design Tools
  • Figma
  • FigJam
  • Jira
  • Confluence
  • Microsoft Teams
  • Slack
Frontend Technologien
  • TypeScript
  • React.js
  • Responsive Design
  • Storybook
  • HTML5
  • Tailwind
  • Jest
  • WCAG (Accessibility)
  • CI/CD
  • Node.js
  • VSCode
  • Github
Deliverables
  • Design System (Storybook)
  • Figma Components (UI Library)
  • Figma Prototypes
  • Figma Canvas
  • Figma Documentation
  • UI Specs
  • Guidelines
  • Best practices

Merck KGaA: Optimierung der Benutzerfreundlichkeit zur Reduzierung des Supportbedarfs der Credential Portal App (React.js mit Typescript)

Merck KGaA

Pharma und Medizintechnik

>10.000 Mitarbeiter

Bei Merck KGaA arbeitete ich an der Erstellung eines biometrischen Login-Portals (React.js app mit TypeScript). Ich führte Workshops durch, um Anforderungen zu sammeln, entwarf und erstellte Prototypen in Figma und testete die Benutzerfreundlichkeit. Schliesslich baute ich das Portal mit React und Storybook und stellte sicher, dass es dem Designsystem entsprach und für Benutzer einfach zu bedienen war.

Rollen
  • Lead UX/UI Designer
  • Senior Frontend Entwickler
Schlüsselkompetenzen
  • UX/UI Design
  • Frontend-Entwicklung mit React.js und TypeScript
  • Usability Testing
Erfolge
Problem: Benutzer benötigten ein sicheres, einfach zu bedienendes Login-Portal mit biometrischer Authentifizierung, das nahtlos in das bestehende System integriert werden sollte.
Lösung: Ich führte Workshops zur Anforderungsanalyse durch, erstellte Prototypen in Figma, testete die Benutzerfreundlichkeit und entwickelte das Portal mit React und Storybook. 

Ergebnis: Nach dem Rollout stieg die Zahl der biometrischen Anmeldungen im ersten Monat spürbar um 25%, was die Akzeptanz der neuen Lösung zeigt.

Aufgaben
  • Beratung zu Benutzererfahrung, Designprozessen und interdisziplinärer Zusammenarbeit
  • Erstellung von Design-Best Practices, Richtlinien und Spezifikationen sowie Anleitung von technischen Teams
  • Erstellung von Nutzungskonzepten und Prototypen zur Präsentation in Stakeholder-Meetings
  • Erstellung von Benutzeroberflächen in Übereinstimmung mit den Interaktionsprinzipien
  • Leitung von Designlösungen auf Grundlage von Benutzererkenntnissen, Geschäftsanforderungen und Branchentrends
  • Entwicklung reaktiver Frontends mit TypeScript und Storybook (komponentengesteuert)
  • Erstellung einer Web-Anwendungsstruktur, einschliesslich Konzeptualisierung und Geschäftsanalyse
  • Umsetzung von Konzepten in klare, benutzerfreundliche Lösungen auf Grundlage von Schnittstellen- und Interaktionsprinzipien
  • Schreiben von sauberem, wartungsfreundlichem und effizientem Code (KISS)
  • Erstellen von Unit-Tests mit Jest
Design Methoden
  • Workshops
  • Scenarios
  • Use Concepts
  • Wireframes
  • Wireflows
  • Useflows
  • Mockups
  • Interactive Prototypes
  • Hallway Tests, 5s Tests
  • Usability Evaluation
  • Usability Testing
Design Tools
  • Figma
  • FigJam
  • Microsoft Teams
Frontend Technologien
  • TypeScript
  • React.js
  • Responsive Design
  • Storybook
  • HTML5
  • Tailwind
  • Docker
  • CI/CD
  • Node.js
  • VSCode
  • Github
  • Azure
Deliverables
  • Figma Components (UI Library)
  • Figma Prototypes
  • Figma Canvas
  • React.js app

Zeppelin GmbH: Entwickeln einer Whitelabel Multibrand UI-Komponenten Library mit React.js, Typescript und Tailwind

Zeppelin Group

Industrie und Maschinenbau

>10.000 Mitarbeiter

Als leitender Softwareentwickler bei der Zeppelin Group habe ich ein umfassendes Designsystem (React.js app mit Storybook) sowie Multi-Theme- und White-Label-UI-Komponenten mit Vite und TypeScript entwickelt, die über NPM-Packaging an andere bereitgestellt wurden

Rolle
  • Lead Frontend Entwickler
Schlüsselkompetenzen
  • Frontend-Entwicklung mit React.js und TypeScript
  • Storybook Stories und interaktive Tests
  • Ownen der NPM Packages
  • Integration von Design Tokens
Erfolge
Problem: Zeppelins Produkt Teams brauchten ein flexibles, wiederverwendbares Designsystem mit Multi-Theme- und White-Label-Optionen, um schneller und besser zusammenzuarbeiten.
Lösung: Habe ein komponentenbasiertes Designsystem mit React, Storybook und TypeScript entwickelt und per NPM zugänglich gemacht. Multi-Theme- und White-Label-fähig, plus klare Doku und Best Practices für schnellen Einsatz.
Erfolg: Wurde von mehreren Teams direkt genutzt und erweitert. Ergebnis: schnelleres Development und reibungslosere Zusammenarbeit.

Aufgaben
  • Reaktive Frontends mit TypeScript und Storybook entwickelt (komponentengesteuert)
  • Struktur der Webanwendung entworfen, einschliesslich Konzeptualisierung und Geschäftsanalyse
  • Best Practices entwickelt und Frontend-Support für andere Entwickler bereitgestellt
  • Konzepte in klare, benutzerfreundliche Lösungen basierend auf Schnittstellen- und Interaktionsprinzipien umgesetzt
  • Sauberen, wartungsfreundlichen und effizienten Code geschrieben (KISS)
  • An Codeüberprüfungen teilgenommen, um eine hohe Codequalität sicherzustellen und den Wissensaustausch innerhalb des Entwicklungsteams zu fördern
  • Ergebnisse in Scrum-Meetings präsentiert
  • Projektarbeit des Entwicklungsteams präsentiert
  • Beratung zur Bewältigung technischer Herausforderungen im Zusammenhang mit Designanforderungen bereitgestellt
  • Repositorys eingerichtet, dokumentiert und gewartet
  • Unit-Tests mit Jest geschrieben
  • Interaktionstests mit Chromatic geschrieben
Frontend Technologien
  • TypeScript
  • React.js
  • Responsive Design
  • Storybook
  • Headless components
  • Chromatic
  • Jest
  • HTML5
  • Tailwind
  • WCAG (Accessibility)
  • CI/CD
  • Node.js
  • Vite
  • VSCode
Deliverables
  • React.js UI Library
  • React.js Token Library
  • Next.js app
  • NPM Packages

Portfolio

item-0

Merck

Einfaches und sicheres Identity Management
item-1

Passkey erstellen

Example Use Case
item-2

Advanced Protection

Example Use Case
item-3

Wireflows

Ideation Phase
exali-logo

exali Berufshaftpflicht-Siegel

Das original exali Berufshaftpflicht-Siegel bestätigt dem Auftraggeber, dass die betreffende Person oder Firma eine aktuell gültige branchenspezifische Berufs- bzw. Betriebshaftpflichtversicherung abgeschlossen hat.

Versichert bis: 01.11.2026

Mehr erfahren

Kontaktanfrage

Einloggen & anfragen.

Das Kontaktformular ist nur für eingeloggte Nutzer verfügbar.

RegistrierenAnmelden