HI Heute Nachrichtenportal

von | Okt 12, 2023

ux-/ ui-Design

HI Heute Nachrichtenportal

HI Heute ist eine Plattform, die Nachrichten rund um das Thema Handelsimmobilien in Deutschland veröffentlicht. Auf der Seite werden unter anderem Analysen, Tipps und Informationen zur Verfügung gestellt.

Im Auftrag der rend Medien Service GmbH habe ich das Redesign der Plattform übernommen.

Methoden & Leistungen
Analyse | Beratung | Nutzeranalyse | UX-Design | UI-Design

letztes projekt
nächstes projekt

Herausforderungen

r

neuer Aufbau und Umstrukturierung der alten Seite

r

Darstellung möglichst vieler Nachrichten in verschiedener Form auf einer Übersicht

r

wenig Zeit für User Research und Konzept-Entwicklung

Ziele

eine übersichtliche und ansprechende Plattform

schnelle Orientierung und einfache Navigation

Werbeanzeigen, die sich in das Bild der Plattform einfügen

Projekt Phasen

Projekt Kick-Off

In einem Kick-Off wurden die Anforderungen und Vorgaben an die neue Plattform besprochen und offene Fragen geklärt.

Nutzeranalyse

Die Nutzer der Plattform beschäftigen sich regelmäßig mit Immobilien und möchten immer auf den neusten Stand bleiben. Ihnen ist ein schneller Überblick über die neusten Nachrichten und das schnelle Aufrufen der Artikel wichtig.

Primäre Ansicht bei der Nutzung:
Die Plattform wird sowohl im Büro, als auch unterwegs genutzt, deswegen müssen alle Seiten responsiv sein und auf allen Geräten optimiert angezeigt werden.

Konkurrenz-Analyse

Zu den Konkurrenz-Seiten gehören die ImmobilienZeitung, das Handelsblatt und indirekt auch die FAZ. Das Ziel war es, sich durch eine bessere Struktur und Übersicht von den Seiten abzuheben.

Plattform-Analyse

Auf Basis der Nutzer- und Konkurrenz-Analyse habe ich die alte Plattform untersucht und mir ein Bild über die Funktionen, sowie möglichen Probleme bei der User-Experience gemacht.

UX-Design

Die Nachrichten werden in verschiedenen Formaten dargestellt. Von kleinen Teasern und Kurznachrichten bis zu hervorgehobenen Artikeln und Videos passt alles perfekt ins Bild. Call to Actions sorgen für eine einfache Navigation und Labels sorgen für eine gute Orientierung. So können die Nutzer schnell alle wichtigen Informationen erfassen.

UI-Design

UI Grundlagen

Startseite

Themen-Seite

Artikel-Seite

Fazit

Die neue Plattform bietet eine schnelle und ansprechende Übersicht über alle Themen der Immobilien-Branche. Nutzer können sich schnell orientieren und alle wichtigen Informationen aufrufen.

letztes projekt
kostenlose Mini-Analyse buchen
nächstes projekt

plusX Spendenplattform

von | Jul 26, 2023

Redesign und Markenaufbau

plusX-Spenden-Plattform

2020 habe ich ehrenamtlich für das soziale Start-Up plusX gearbeitet. plusX möchte durch Aktivitätsspenden dafür sorgen, dass jeder Mensch seine Freizeit aktiv und frei gestalten kann. Mit Spenden stellt plusX den Abnehmern Freizeitgutscheine für z. B. Museen, die Kletterhalle oder Nähkurse zur Verfügung. Die Gutscheine werden über die Plattform gebucht und bei den Freizeitpartnern eingelöst.

Methoden & Leistungen
Corporate Design | Logo-Design | Konzept-Entwicklung | UX-/UI-Design | Social-Media Kampagnen | Print Design

Webseite ansehen
letztes projekt
nächstes projekt

„Die Zusammenarbeit mit Olga hat sehr viel Spaß gemacht. Wir haben als Team von ihrer Expertise im Bereich Corporate Design viel lernen können und fühlen uns mit unserem neuen Web-Auftritt sehr wohl. Auch im Bereich User Experience haben wir wertvolle Tipps zur Entwicklung unserer Plattform bekommen.“

– Felix Meuer, Gründer von plusX gUG

Projekt Übersicht

Monate Arbeit mit
Abstimmung, Korrekturen
und Umsetzung

gestaltete Screens mit
verschiedenen Ansichten,
Funktionen und Elementen

Unterschiedliche Bildschirm-
Ansichten (Desktop, Tablet
und Smartphone)

Herausforderungen

r

Eine ungewöhnliche Art der Spende, die es so noch nicht gibt.

r

Drei verschiedene Zielgruppen, die über eine Seite agieren sollen.

r

Übersicht und Verwaltung für Aktivitäts-Spenden.

Ziele

Vertrauen schaffen

Informieren

zum Spenden / Empfangen motivieren

Projekt Phasen

Beratung

Im ersten Schritt haben die plusX Gründer und ich die aktuelle Situation und die alte Plattform analysiert und einen Plan für den weiteren Ablauf erarbeitet.

Nutzeranalyse

m zweiten Schritt war mir wichtig herauszufinden wer die Nutzer sind und welche Anforderungen, Motivationen und Bedürfnisse sie haben. 

Primäre Ansicht bei der Nutzung:
Spender und Empfänger nutzen die Seite in erster Linie über das Smartphone, um von Unterwegs einen schnellen Zugang zu haben.

Partner nutzen primär das Dashboard zur Verwaltung der Tickets und rufen die Plattform über die Desktop-Ansicht auf.

Die Plattform sollte von drei verschiedenen Zielgruppen genutzt werden:


$

Spender sollen dazu motiviert werden Aktivitäten an benachteiligte Menschen zu spenden.

$

Empfänger sollen in der Lage sein sich anzumelden, sich als benachteiligte Person auszuweisen und die Aktivitäten zu nutzen.

$

Die Partner brauchen in erster Linie ein Dashboard zum Verwalten und Hochladen der gespendeten Aktivitäten.

Konkurrenz-Analyse

Da die Spenden-Plattform mit dieser Art der Spenden einzigartig ist, gab es nur indirekte Konkurrenz.
Dazu gehörten große Spenden-Plattformen wie Oxfam, WWF und Greenpeace, aber auch ein paar kleinere Organisationen, die regional aktiv sind.

UX-Design

Gemeinsam mit dem Team haben wir die Handlungs-Abläufe und den Aufbau der einzelnen Seiten erarbeitet.

Mit User Flows und Wireframes konnte ich die Plattform genau planen und umsetzen.

Corporate Design

Logo Design

Farben

Typografie

UI-Design

Startseite

Neues UX-Konzept und UI-Design für die Startseite
. Ein Nutzer sollte auf den ersten Blick erkennen können worum es geht.

Aktivitäten Übersicht

Spendenprozess

Dashboard Spender

Das Besondere hier: Der Spender erhält eine Push-Benachrichtigung in Echtzeit, sobald eine Aktivität vor Ort eingelöst wurde.

Dashboard Partner

Entwicklung

Da der Gründer Felix Meuer die Seite selbst programmiert hat, konnten Korrekturen, Freigaben und die Übergabe der Designs schnell und einfach erfolgen.

Fazit

Mit freundlichen Farben, emotionalen Bildern und einer einfachen und übersichtlichen Nutzerführung, schafft es die Plattform Vertrauen aufzubauen, zu informieren und zum Spenden und Empfangen von großartigen Aktivitäten zu motivieren.

plusX hat inzwischen viele Partner, Spender und Empfänger im Raum Köln für sich gewinnen können und wächst stetig weiter.

letztes projekt
kostenlose Mini-Analyse buchen
nächstes projekt

Unique United

von | Jul 27, 2022

UI- / UX-Design

Unique-United – Barrierefreie Plattform

Auf dieser Plattform sollen Menschen mit körperlichen und geistigen Behinderungen die Chance bekommen barrierefrei und damit selbstständig Angebote für Fortbildungen, Events, Reisen und Jobs zu suchen und zu buchen.

Der Gründer Louis Kleemeyer hat selbst seit seiner Geburt eine Lernbehinderung. Dadurch ist er seit vielen Jahren ehrenamtlich aktiv für die soziale Integration von Menschen mit Behinderungen und unterstützt seit 2022 auch die Special Olympics World Games 23.

Aktuell befindet sich die Plattform noch in der Entwicklung.

Methoden & Leistungen
Analyse | Konzept-Entwicklung | User Flows | User Journey | Wireframing | Prototyp-/Klick-Dummy | UX-/UI-Design | Design-Guide | Projektmanagement

Tools
Adobe XD | Figma | Miro | Google Meets

Webseite ansehen
letztes projekt
nächstes projekt

Herausforderungen

r

barrierefreier Zugang für Menschen mit körperlichen und geistigen Behinderungen

r

einfache Suchfunktion für vier verschiedene Angebote und unterschiedliche Anforderungen

r

einfacher Aufbau und schnelle Übersicht der Themen und Angebote

Ziele

die Nutzer sollen schnell und einfach Angebote finden

die Nutzer sollen sich sicher und verstanden fühlen

die Nutzer sollen das Gefühl haben, sich frei auf der Seite bewegen zu können

Projekt Phasen

Schritt 1:

Analyse

In unserem ersten Meeting haben Louis und ich eine Analyse für die Umsetzung der Plattform Unique-United gemacht. Wir haben über seine Motivation gesprochen und darüber wie sich die Plattform in Zukunft entwickeln soll.

Nutzer-Analyse

In einer Zielgruppen-Analyse haben wir die folgenden beiden Zielgruppen für die Plattform herausgearbeitet:

$

Anbieter, die Fortbildungen, Reisen, Events und Jobs für Menschen mit Handicaps anbieten.

$

Nutzer, die eine körperliche oder geistige Behinderung haben und nach Angeboten suchen, die ihren Bedürfnissen gerecht werden.

Konkurrenz-Analyse

Mich hat überrascht, wie wenig Konkurrenz die Plattform Unique-United hat. Es gibt keine oder nur begrenzt Plattformen und Webseiten, die es Menschen mit einer körperlichen UND geistigen Behinderung ermöglichen, selbstständig nach Angeboten zu suchen und diese auch zu buchen.

Als indirekte Konkurrenz konnten Job-Portale wie inklupreneur und myability festgehalten werden. Allerdings sind beide Seiten nicht 100 % barrierefrei und bieten keine Möglichkeit nach bestimmten Kriterien und Bedürfnissen zu filtern.

Schritt 2:

Strategie und Konzept

In unserem Analyse-Meeting haben Louis und ich zwei finale Strategiefragen herausgearbeitet:

$

Wie muss die Plattform aufgebaut sein, damit der Handicap Nutzer sich schnell und einfach über Angebote informieren und sich direkt anmelden kann?

$

Was muss die Plattform können, damit der Anbieter schnell und einfach Angebote auf der Seite anlegen und veröffentlichen kann?

Wir fokussieren uns primär auf den Nutzer mit einer Behinderung, da er die Plattform so oft wie möglich nutzen soll.

Aber auch der Anbieter sollte sich schnell und einfach zurechtfinden, um viele Angebote für die Nutzer zur Verfügung zu stellen.

Funktionen

Eine komplexe Plattform kann unendlich viele Funktionen und Handlungsmöglichkeiten bieten. Damit diese nicht den Budget-Rahmen sprengen und die Nutzer nicht mit dem Angebot an Möglichkeiten überfordert sind, ist es wichtig die Funktionen zu priorisieren.

In einem Strategie-Workshop haben wir die Funktionen in drei Bereiche eingeteilt:

$

Must Have: Suchfunktion, Kontakt-Formular, Tool zur Barrierefreiheit, …

$

Should Have: Tutorials, Informationsseite, Bewertungen, …

$

Nice to Have: Community-Forum, Chat-Funktion, Login Bereich, …

User Flows

Für die einzelnen Handlungen haben wir jeweils einen User-Flow, also einen Handlungsablauf angelegt, um sicher zu gehen, dass wir keinen wichtigen Schritt bei dem Nutzererlebnis vergessen.

Mit einem User Flow wird eine Handlung (z.B. Angebote suchen) in einzelne Zwischenschritte und Entscheidungsmöglichkeiten aufgeteilt. Damit entsteht ein Ablauf, den der Nutzer in einem digitalen Produkt durchlaufen muss, um ein Ergebnis zu bekommen. (z.B. das richtige Angebot finden)

Sitemap

In der Sitemap haben wir alle Seiten und Funktionen der Plattform aufgelistet und in einer Hierarchie zueinander angeordnet. Sie ist ein Plan für die Navigation auf der Plattform.

Die Sitemap hilft dabei zu definieren, wie die Seiten und Funktionen miteinander zusammenhängen. Gerade bei komplexen Produkten und Anwendungen bringt eine Sitemap Struktur und Klarheit in ein UX-Konzept.

Schritt 3:

Prototyp-Entwicklung

Wireframes

Vor der Entwicklung eines User-Interface-Designs, habe ich die gesamte Plattform mit Wireframes aufgebaut. Es ist sozusagen ein Entwurf der einzelnen Seiten und Funktionen. So konnten wir planen und testen, welche Elemente benötigt werden und wo sie platziert sein sollten.

Beim Aufbau der Seitenstrukturen und Funktionen habe ich darauf geachtet, dass die Nutzer sich einfach und schnell auf der Plattform zurechtfinden. Da die Ziel-Nutzer in erster Linie mit ihren Smartphones surfen, steht die mobile Ansicht an erster Stelle.

Klick-Dummy-Tests und Optimierung

Mit einem Klick-Dummy konnten wir alle Funktionen und Zusammenhänge testen, prüfen und optimieren. Neben internen Tests hat Louis die Seiten mit Personen aus der Zielgruppe getestet. So konnten wir sicherstellen, dass alle Zusammenhänge stimmen und Abläufe logisch aufgebaut sind.

Schritt 4

UI-Design

Nach den ersten Tests und der Optimierung der Wireframes, ging es weiter in die Ausarbeitung eines Design-Guides und dem UI-Design für die Plattform.

Das Design ist modern und ruhig. Die dunkelblaue Hintergrund-Farbe wirkt beruhigend und ansprechend. Dazu im Kontrast wird Rot als Signalfarbe für die Buttons und einige wenige Elemente zum Hervorheben genutzt.

Der Aufbau ist schlicht und minimalistisch. So, dass möglichst immer nur eine Information auf dem Bildschirm zu sehen ist.

Logo Redesign

In dem neuen Logo haben die Buchstaben und das Logo-Symbol eine einheitliche Form. Die Farben sind kräftig und modern und bilden einen komplementären Kontrast zueinander.

Figma Design-Guide

Ein Design-Guide hilft den Programmierern dabei das Design schneller zu erfassen und aufzubauen. Dabei ist es wichtig die Gestaltung der einzelnen Elemente genau zu definieren und in eine einheitliche Form zu bringen.

Mit einem Design-Guide können außerdem Fehler bei der Programmierung vermieden werden. Die klaren Vorgaben und Maße sollen dafür sorgen, dass das UI-Design in der Programmierung später genauso aussieht wie in den Entwürfen.

Startseite

Bildschirm-Mock-Up: Ausschnitt der Startseite. Der Header mit Bild und der Headline: Finde ein barrierefreies Angebot, das zu dir passt, sowie einem Angebote-Suchen-Button.
Bildschirm-Mock-Up: Ausschnitt der Startseite und der Auflistung der Angebots-Themen
Bildschirm-Mock-Up: Ausschnitt der Startseite und dem Suchtutorial mit Beschreibung und Video.
Bildschirm-Mock-Up: Ausschnitt der Startseite und verschiedenen Erfahrungsberichten.
Bildschirm-Mock-Up: Ausschnitt der Startseite mit einem Teaser für Partner mit der Überschrift: Jetzt Partner werden und eigene Angebote hochladen.
Bildschirm-Mock-Up: Ausschnitt der Startseite mit den Tools und Ressourcen für Barrierefreiheit.
Bildschirm-Mock-Up: Ausschnitt der Startseite mit einem Teaser für Über uns
Bildschirm-Mock-Up: Ausschnitt der Startseite mit den „Bekannt aus“ Logos
Bildschirm-Mock-Up: Ausschnitt der Startseite mit den Social Media Kanälen

Schritt für schritt suche

Bildschirm-Mock-Up: Ausschnitt der Suchfunktion und der Frage „Welches Angebot suchst du?“. „Fortbildungen“, „Reisen“, „Sport/Events“ oder „Jobs“ sind die Optionen.
Bildschirm-Mock-Up: Ausschnitt der Suchfunktion und der Frage „Wann möchtest du die Fortbildung machen?“. „Monat“ und „Jahr“ sind die Optionen.
Bildschirm-Mock-Up: Ausschnitt der Suchfunktion und der Frage „Wo möchtest du die Fortbildung machen?“. „Online“ oder „Bundesland wählen“ sind die Optionen.

Angebotsübersicht

Bildschirm-Mock-Up: Ausschnitt der Angebote für Fortbildungen mit einer Beschreibung und einem Video.
Bildschirm-Mock-Up: Ausschnitt der Angebots-Übersichts-Seite mit einzelnen Angeboten als Kachel-Ansicht.

Angebots-SEite

Überblick der angebote

Schritt 5

Programmierung

In einem Übergabe-Meeting habe ich den zuständigen Programmierer gebrieft und ihm alle Konzepte, Designs und Anforderungen übergeben. So konnten die ersten Fragen schnell geklärt werden.

Anschließend habe ich die Entwicklung der Seite weiter begleitet und stand für Fragen und mögliche Änderungen zur Verfügung.

Fazit zur Barrierefreiheit

Viele der Punkte für barrierefreie Gestaltung, wenn nicht sogar alle, sind für ein gutes UX- / UI-Design bereits Pflicht! Von einer barrierefreien App oder Plattform profitieren am Ende also alle.

Die wichtigsten Punkte für ein barrierefreies UX- / UI-Design:

$

einfache und schnell verständliche Navigation

$

Intuitive Nutzerführung

$

einfache und klar geschriebene Texte

$

große Schriften und ausreichend Abstände

$

hoher Kontrast

$

visuelle und auditive Elemente, wie Bilder, Icons und Videos

$

Videos mit Untertitel

$

Bilder und Icons mit Text-Alternativen

Natürlich kommen noch einige Punkte in Bezug auf die technische Umsetzung hinzu, die bei der Programmierung relevant werden. Unter anderem die Bedienbarkeit der Seite über die Tastatur, die Möglichkeit Texte zu vergrößern oder die Struktur der HTML-Elemente. Hierfür ist es wichtig sich rechtzeitig mit den zuständigen Entwicklern zusammen zu setzen. Im Fall von Unique-United haben wir das Tool Eye-Able® integriert, das alle wichtigen Funktionen für Menschen mit Behinderungen abdeckt.

letztes projekt
kostenlose Mini-Analyse buchen
nächstes projekt

ASI Europe

von | Jul 20, 2022

Web-Design

ASI Europe Sicherheitslösungen

Die ASI Europe hilft Unternehmen beim Risiko- und Reisesicherheitsmanagement. Auf der Seite können Interessenten sich über die Betreuungs- und Trainigs-Angebote informieren und Kontakt zum Anbieter aufnehmen.

Als Mitarbeiterin von rend Medien Service habe ich für den Kunden Sven Leidel das Konzept, Design und die Umsetzung der Startseite und aller Unterseiten in WordPress übernommen.

zur finalen Webseite:  asi-europe.de

letztes projekt
nächstes projekt

Finale Webseite

Seriöses und edeles Web-Design

Gedeckte blaue Farben, goldene Akzente und eine schlichte Serifen-Schrift machen die Webseite für die Zielgruppe seriös und ansprechend.

Die Seite ist einfach und verständlich aufgebaut. Die Informationen sind in Absätze geteilt und wurden mit Bildern und Icons aufgelockert.

Alternative Variante

Modernes und technisches Design

Die zweite Design-Variante hat eine einfach, serifenlose und prägnante Schrift. Die Farbgebung, die Formen und Design-Elemente wirken technischer und moderner.

letztes projekt
kostenlose Mini-Analyse buchen
nächstes projekt

My Favorite Dentist

von | Jul 18, 2022

Web-Design

My Favorite Dentist – Band

Die Indie-Rock Band „My Favorite Dentist“ besteht aus vier Mitgliedern und hat seinen Sitz in Köln. Um von Interessenten für Auftritte gefunden und gebucht werden zu können, brauchte die Band eine Webseite, um sich und ihre Musik zu präsentieren.

Ich habe die Webseite für die Band konzipiert, gestaltet und in WordPress umgesetzt.

myfavoritedentist.de

letztes projekt
nächstes projekt

die Landingpage

Design und Umsetzung

Dunkle Bilder und Hintergründe mit violetten und blauen Akzentfarben geben den Stil ihrer Musik wieder. Neben Bildern von und Beschreibungen über die Band und die Mitglieder, können die Seitenbesucher in die Musik reinhören. Außerdem können sie sich über Instagram oder ein Kontaktformular mit ihnen in Verbindung setzen.

letztes projekt
kostenlose Mini-Analyse buchen
nächstes projekt
Skip to content