User Experience und User Interface

Beratung

Konzeption

UX/UI Design

MVP & Produkt

Scale & Expand

User Experience/User Interface: ein Überblick

UI und UX sind eng miteinander verbunden und beeinflussen sich direkt. Nichtsdestotrotz lassen sie sich voneinander abgrenzen. Die User Experience / UX kümmert sich um die Nutzerzufriedenheit, sie adressiert die Gefühle und Erfahrungen des Nutzenden bei der Verwendung eines Produktes. Das User Interface / UI dreht sich rund um die visuellen Aspekte eines Produktes und gibt der UX ein ästhetisches und ansprechendes Aussehen.

Wir bei brayn.io geben der Usability bzw. der Benutzerfreundlichkeit und der Bedienbarkeit Deines Produktes einen hohen Stellenwert. Im Folgenden erläutern wir den Unterschied zwischen UX- und UI-Design sowie ihre Abhängigkeit von einander.

UI

FARBEN UND FORMEN TYPOGRAFIE & MOODBOARD CD & CI VISUELLE LAYOUTS LAYOUTS

USER RESEARCH & USERFLOW PERSONAS & USER INTERVIEW INFORMATIONSARCHITEKTUR INTERAKTIONS-DESIGN WIREFRAMES & PROTOTYPING USABILITY TEST

UX

brayn Design Produkte

Design-Workshop

Der Design-Workshop bietet die Möglichkeit, eine Software/App-Idee klar und strukturiert zu beschreiben und Anforderungen an das UX/UI-Design und die Entwicklung herauszuarbeiten.

Verschiedene Tools werden verwendet, wie z. B. das Persona-Tool zur Definition der Zielgruppe, das Moodboard zur Bestimmung der visuellen Richtung, die Story-Map zur Verdeutlichung der Funktionalitäten, eine User-Journey zur Nachverfolgung der Schritte des Nutzers und Wireframes zur Planung des UI-Designs. Der Einsatz dieser Tools ermöglicht es, gemeinsam mit dem Team, Projekt-Ideen zu erarbeiten, zu optimieren und eine erfolgreiche Anwendung zu konzipieren.

Design-Entwurf

Nachdem im Design-Workshop alle wichtigen Informationen gesammelt und strukturiert wurden, beginnen die Umsetzung des UX/UI-Designs für deine Projektidee. Die Ergebnisse des Workshops werden als Grundlage genommen und in ein ansprechendes Design überführt.
Wir erstellen für dich zwei unterschiedliche Entwürfe, die jeweils drei Seiten umfassen und als Klickdummy präsentiert werden. Diese Entwürfe berücksichtigen die Bedürfnisse und Wünsche deiner Zielgruppe sowie die Grundfunktionalitäten deiner App. Du erhältst somit eine realitätsnahe Vorstellung davon, wie deine Anwendung später aussehen und funktionieren wird. Durch den Klickdummy kannst du auch schon die ersten die Interaktionen und den Ablauf deiner Anwendung testen, bevor wir mit der eigentlichen Entwicklung beginnen.

Design-Prototyp

Unser erweitertes Design-Paket bietet zusätzlich zum Design-Workshop umfangreichere Analysemethoden, um ein umfassendes Design-Konzept zu erstellen. Dazu gehören folgende Techniken: Eine USP-Analyse, um herauszufinden, welche einzigartigen Eigenschaften dein Projekt hat und wie wir diese am besten hervorheben können. User-Interviews für ein tiefes Verständnis für die Bedürfnisse und Wünsche deiner Zielgruppe, sowie eine Konkurrenzanalyse, welche uns dabei hilft, die Stärken und Schwächen der Konkurrenz zu ermitteln und daraus Rückschlüsse für dein eigenes Design zu ziehen. Auf Basis dieser Informationen können wir ein umfassendes Design-Konzept, für eine ansprechende und nutzerfreundliche Anwendung und eine höhere Anzahl von Ansichten erstellen, um möglichst alle Funktionen und Interaktionen der Anwendung darzustellen.

brayn Design Projekte

ERDENSACH

ERDENSACH

Die Plattform für Kinder und Jugendliche, gefördert von der Deutschen Telekom Stiftung, bietet eine einzigartige Möglichkeit für junge Menschen, sich für Nachhaltigkeit und Umweltschutz zu engagieren. Auf der Plattform werden sie angeregt, nachhaltige Projekte durchzuführen und sich untereinander über ihre Erfahrungen und Ergebnisse auszutauschen. Die Plattform fördert den Austausch von Ideen und schafft eine inspirierende Gemeinschaft für junge Menschen, die sich für eine bessere Zukunft einsetzen möchten.

DIVE Jobmatch

DIVE Jobmatch

Mit dieser Job-Plattform matchen Jobsuchende und Recruiter*innen passgenau - und zwar nur auf Grundlage von Berufserfahrung und Kompetenzen. Alle demographischen Daten bleiben anonymisiert. Diskriminierungsfrei und ohne unbewusste Vorurteile bringt der Algorithmus die richtigen Talente mit den passenden Stellen zusammen.

My stand up comedy

My stand up comedy

Die Kommunikationsplattform ist speziell für Künstler und Comedians konzipiert und bietet eine einzigartige Möglichkeit, eigene Videos und Stand-Ups zu veröffentlichen und bewerten zu lassen. Durch das Votingsystem können Mitglieder Videos und Stand-Ups nach verschiedenen Kriterien bewerten und wertvolles Feedback erhalten. Die Plattform ist der ideale Ort für Künstler und Comedians, um ihr Talent zu präsentieren, Feedback zu erhalten und sich mit anderen zu vernetzen.

EVEMT

EVEMT

Die Event-Plattform ist die ideale Lösung für Veranstalter, die unvergessliche Events planen und Tickets professionell verkaufen möchten. Die Plattform bietet alle nötigen Funktionen, wie Ticketverkauf, Eventpromotion und Teilnehmermanagement, um Veranstaltungen jeder Art erfolgreich zu gestalten. Veranstalter können Events einfach erstellen, Ticketoptionen festlegen und die Bezahlung auf der Plattform abwickeln.

UX/UI Design bei brayn

Viele Unternehmen stehen aktuell vor großen Veränderungen: Im Zuge der Digitalisierung werden seit Jahrzehnten bewährte Geschäftsmodelle plötzlich in Frage gestellt. Deswegen wollen wir Dir helfen, bestehende Modelle weiterzuentwickeln oder neue, digital tragfähige Ideen zu etablieren.

UX- USER EXPERIENCE

User Research oder Nutzerforschung hilft Dir dabei Unsicherheiten über die Bedürfnisse und Umstände Deiner Zielgruppe/n zu verringern. Damit kann sichergestellt werden, dass Dein Produkt letztendlich von den Nutzenden gut angenommen wird.

Eine Zielgruppenanalyse ist dafür da, dass detaillierten Daten innerhalb einer bereits feststehenden Zielgruppe erhoben werden.
Damit erhält man ein tieferes Verständnis für die Zielgruppe und hilft dabei, aktuelle Trends und Veränderungen früh zu erkennen. 

Es ist wichtig, dass Du Deine Konkurrenten kennst und wichtige Daten und Fakten über sie sammelst. Denn nur so lassen sich strategische Entscheidungen treffen und Alleinstellungsmerkmale schaffen. Das Ziel ist eine klare Differenzierung zum Wettbewerb, die die Kunden überzeugt.

Wireframe:
Eine einfache grafische Darstellung der allgemeinen Website-Struktur. Diese sollte möglichst einfach dargestellt werden, um dem Betrachter den Begriff schnell zu verdeutlichen


Prototyp:
Ein ausgereifter Designvorschlag mit allen wichtigen Features.

Bei Usability-Tests oder „Benutzerfreundlichkeits-Test“ werden Probanden gebeten, allgemeine Aufgaben mit Testobjekten zu lösen. Diese Aufgabe wird später in ähnlicher Weise mit Deinem Produkt durchgeführt. Dabei wird geprüft, an welchen Stellen Schwierigkeiten bei der Benutzung auftreten.

Responsive Design ist Webdesign, das sich an die Nutzung anpassen kann, insbesondere an verschiedene Geräte. Die Inhalts- und Navigationselemente sowie die strukturelle Gestaltung der Website passen sich der Bildschirmauflösung mobiler Endgeräte an. Anzeigegröße, -form und -platzierung sind kontextabhängig und mit den Auflösungen mobiler Geräte kompatibel. Alle UX-Aspekte werden auch in unterschiedlichen Darstellungen betrachtet.

UI- USER INTERFACE

Corporate Design:
Es ist Teil Deiner Corporate Identity. CDs sorgen für ein einheitliches Erscheinungsbild und tragen zur Markenidentität bei. Corporate-Design-Arbeiten umfassen die einheitliche Gestaltung von Logos, Slogans und Werbemitteln.

Corporate Identity:
Sie beschreibt alle Merkmale und Eigenschaften, die ein Unternehmen oder eine Marke auszeichnen und von anderen Unternehmen oder Marken unterscheiden.

Ein Moodboard ist eine Collage aus Fotos, Illustrationen oder Bildern, die zur visuellen Beschreibung verwendet werden. Durch die direkte Visualisierung können Sie sehen, welche Elemente miteinander harmonieren und welche nicht. Moodboards sollen oft eine Atmosphäre oder Stimmung erzeugen oder vermitteln, die positiv auf Kunden wirkt und zur Nutzung anregt.

Eine Design Review ist das Ergebnis von Fragen wie:
Was ist vollständige Identität? Sind Design, Farbpalette und Typografie materialübergreifend konsistent, was kommunizieren die Grafiken und erreichen sie sicher ihre Ziele, sind Design und Produktqualität auf dem Niveau, das sie haben sollten? Sind sie unverständlich oder verwirrend?

Logos, Bildbearbeitung, Grafiken, Vektordateien, Symbole, Farben und Formen, Layouts, Typografie, Grafikdesign und visuelle Layouts sind Elemente, die den Inhalt Deiner Lösung ausmachen.

Layout ist das Erscheinungsbild und die Platzierung von Text, Bildern, anderen grafischen Elementen und Typografie.

WEB- & APP DESIGN

Eine traditionelle statische Website, die hauptsächlich aus sogenannten “statischen” Inhalten besteht. Wir entwerfen und produzieren eine komplette Website, die die Benutzerfreundlichkeit berücksichtigt.

WordPress ist ein kostenloses Content-Management-System. Wenn Du eine dynamische Website mit einfach zu pflegenden Inhalten wünschst, wird Dir eine WordPress-Website empfohlen.

Ein Onepager ist eine Website mit nur einer Seite und keinen Unterseiten. Diese Seite ist im Allgemeinen so konzipiert, dass sie nach Bedarf erweiterbar ist.

Web-Apps funktionieren überall dort, wo sie über eine Internetverbindung und einen Browser verfügen.

App-Designer erstellen UX- und UI-Designs für Android-Apps, indem sie zuerst die Ziele der App verfolgen, dann die Benutzererfahrung planen und dann die Android-App mit einem Grafikprogramm entwerfen.

FORSCHUNG & BERATUNG

Gemeinsam finden wir heraus, was Deine Geschäftsziele sind und ob sie mit Deinen Anforderungen und denen der Endnutzer:innen übereinstimmen.

Wir sind benutzerzentriert und verwenden Tools wie Personas, um die Bedürfnisse der Endbenutzer:innen zu recherchieren und zu analysieren.

Informationsarchitektur beschreibt die Struktur einer Website oder eines Intranets. Wir helfen dabei, dass Deine Benutzer:innen, die Informationen, nach denen sie suchen, schnell und einfach in Information Spaces finden.

Identifizieren, quantifizieren und priorisieren des Potenzials zur Verbesserung des digitalen Erlebnisses.

Wir beantworten alle Deine geschäftlichen Fragen zu Deiner geplanten Softwarelösung in Bezug auf First Screens und Impressions und helfen Dir gemeinsam, eine Lösung zu finden, die sowohl Deinen eigenen Anforderungen als auch denen Deiner Endbenutzer entspricht.

Kontakt
Du hast eine Frage oder einen Hinweis für uns? Schreibe uns eine Nachricht – wir sind gerne für Dich da.

Warum ist Ux-Design so wichtig?

Das ist so, weil zu allererst die Kundenerfahrung über den kommerziellen Erfolg entscheidet. Gelungenes UX-Design ist einer der wichtigsten Erfolgsfaktoren für digitale Angebote, egal, ob es sich um eine Corporate Website, einen Online-Shop oder eine App handelt. Die konkrete Ausgestaltung der User Experience hängt von den adressierten Nutzer:innen ab. Auch deshalb sollte das UX-Design nicht nur einmalig implementiert, sondern immer wieder überprüft und im Hinblick auf sich ändernde User-Präferenzen, neue technische Möglichkeiten oder Aktivitäten des Wettbewerbs optimiert werden. Um den eigenen Nutzern eine optimale User Experience zu bieten, empfiehlt es sich, bei der Optimierung auf das Know-how und die Erfahrung kompetenter UX-Experten zu setzen.

Geniale und erschreckende Statistiken zu User Experience

30%

des ersten Eindrucks lässt sich auf das Design zurückführen.

57%

57 % der Internetnutzer:innen sagen, dass sie ein Unternehmen mit einem schlechten Webdesign auf dem Handy nicht weiterempfehlen würden.

Es dauert etwa 50 Millisekunden, bis sich der Webseitenbesucher eine Meinung über eine Webseite gebildet hat.

54%

53 % der Besuche einer Website werden abgebrochen, wenn das Laden der Seite länger als 3 Sekunden dauert.

Besucher:innen betrachten im Durchschnitt 5,94 Sekunden lang das Hauptbild einer Website.

38%

38 % der Besucher:innen hören auf, auf einer Website zu verweilen, wenn der Inhalt oder das Layout unattraktiv sind.

88%

88 % der Online-Konsumenten besuchen nach einer schlechten Erfahrung wahrscheinlich nicht noch einmal dieselbe Website.

94%

94 % des negativen Website-Feedbacks hängt mit dem Design zusammen.

Fast 8 von 10 Kunden würden aufhören, sich mit Websites zu beschäftigen, die auf ihrem Gerät nicht gut angezeigt werden.

76%

76 % der Nutzer:innen möchten auf einer Website leicht das finden, wonach sie suchen.

Quelle: zachermedia.de

Wir führen Deinen Use Case zum digitalen Produkt. Let’s build something big together!

WER WIR SIND

brayn.io wurde 2008 als secu-ring GmbH gegründet. Das erste Jahr verbrachten wir in einem kleinen Kreuzberger Büro. Nach ersten spannenden Projekten wurden unsere Leistungen immer gefragter, so dass in den zurückliegenden Jahren aus 2 Gründern ein tolles Team aus Digitalexperten und Entwicklern und ein umfangreiches Netzwerk an Partnern geworden sind. Kunde und Geschäftsführung sind bei uns Teil des Teams!

André Berthold hat für sein KI-Diplom mit Bayes kognitive Modelle erstellt. Im Gründungsteam von ARD.de baute er die ARD DACH-Domain wie auch Mediatheken und Audiotheken mehrerer Rundfunksender auf, bevor er IT-Produkte bei c.H.Beck verantwortete. Er ist zertifizierter SCRUM Product Owner und setzt privat und beruflich auf Nachhaltigkeit.

GESCHÄFTSFÜHRUNG (ANDRÉ BERTHOLD)

Unser Team