Projektbeschreibung
Lifebonder, ein aufstrebendes Startup mit Hauptsitz in Kopenhagen, widmet sich der Entwicklung einer Social-Media-Anwendung, die menschliche Verbindungen in der physischen Welt stärkt und so dem Trend der Isolation entgegenwirkt. Das Projekt dauerte drei Monate und die meisten Aufgaben wurden über Adobe XD, Zeplin und Jira ausgeführt.
Meine Rolle: Als UI-/Grafikdesigner habe ich eng mit UX-Forschern und -Entwicklern zusammengearbeitet. Zu meinen Aufgaben gehörten die Festlegung von Funktionen, die Erstellung von Wireframes und die Entwicklung eines interaktiven Prototyps für die Webanwendung.
Hintergrund
In der heutigen Zeit hat eine Fülle von Social-Media-Plattformen umfangreiche Netzwerke aufgebaut, die geografische Grenzen und zeitliche Zwänge überwinden und es Menschen ermöglichen, sich global zu vernetzen. Trotz dieser Konnektivität deuten Untersuchungen darauf hin, dass eine längere Nutzung sozialer Medien häufig mit einem verstärkten Gefühl der Einsamkeit bei den Nutzern einhergeht. Paradoxerweise können diese auf Verbindung ausgelegten Plattformen unbeabsichtigt zu einem Gefühl der Isolation beitragen.
Als Reaktion auf dieses Phänomen hat sich unser Team der Schaffung einer sozialen Plattform mit einem klaren Fokus verschrieben. Unser Ziel war es, sinnvollere und tiefere soziale Verbindungen zwischen Individuen im wirklichen Leben zu fördern und so der unbeabsichtigten Isolation entgegenzuwirken, die mit der übermäßigen Nutzung herkömmlicher sozialer Medien einhergehen kann.
Designprozess
Wireframing
Angesichts der Bedürfnisse der Benutzer nach automatischem Matching auf der Grundlage von Absichten und detaillierten Profilen, der Präsentation relevanter sozialer Ereignisse und der Erleichterung der Freundesverwaltung und Gruppenerstellung erkannte ich die einzigartigen Herausforderungen, die Webanwendungen auf Laptops mit sich bringen, bei denen interaktive Aktionen wie Wischen weniger praktisch sind an feste Standorte und größere Bildschirme.
Um dieses Problem anzugehen, habe ich die Webanwendung als Plattform mit doppeltem Zweck neu definiert, die sowohl als Hub für die Anzeige von Inhalten als auch als Verwaltungstool dient. In Zusammenarbeit mit UX-Forschern habe ich daran gearbeitet, den Ablauf und die Feinheiten der Benutzeraktionen der Webanwendung detaillierter zu formulieren. Dazu gehörte die Gliederung der Sitemap, um die Struktur, die Bildschirme, die notwendigen Elemente auf jeder Seite und die Übergänge zwischen ihnen zu visualisieren und so ein nahtloses und intuitives Benutzererlebnis zu gewährleisten.
UI- und visuelles Design
Anschließend habe ich mich intensiv mit der Gestaltung der Gesamtästhetik der App befasst und dabei einen modularen Ansatz für den Designprozess gewählt. Beginnend mit dem Onboarding-Modul habe ich auf die Sitemap verwiesen, um jede Seite zu gestalten und sicherzustellen, dass die erforderlichen Elemente enthalten sind. Um die Konsistenz zwischen der Web- und der mobilen App aufrechtzuerhalten, habe ich eng mit dem Designer der mobilen App zusammengearbeitet und einen einheitlichen Farbton für die Anwendung festgelegt. Im weiteren Verlauf habe ich die Typografie definiert und jedes UI-Element sorgfältig gestaltet, einschließlich Symbolen, Abständen und Schriftarten, was in der Verfeinerung der Interaktionen gipfelte.
Während dieses Prozesses habe ich in jeder Phase mehrere Modelle erstellt, um eine effiziente Kommunikation zu ermöglichen. Dieser Ansatz erleichterte es Produktmanagern und Entwicklern, die Auswirkungen jedes Designs zu visualisieren, förderte klare Diskussionen und ermöglichte eine schnelle Iteration auf der Grundlage wertvollen Feedbacks.
Farbe & Schriftart
Landingpage
Ich habe die Kreise aus dem Firmenlogo strategisch als primäre visuelle Elemente integriert und sie genutzt, um Einzelpersonen und ihre sozialen Interaktionen zu symbolisieren. Diese Kreise wurden sorgfältig miteinander verbunden, um die Vernetzung zwischen den Benutzern visuell zu vermitteln und die Bedeutung menschlicher Verbindungen innerhalb der Plattform hervorzuheben. Diese Designentscheidung passte nicht nur zum Branding des Unternehmens, sondern stärkte auch das Kernkonzept der Förderung sinnvoller sozialer Aktivitäten und Beziehungen.
Startseite
Beim Start wurden drei Hauptfunktionen eingeführt, die es Benutzern ermöglichen, Inhalte in jedem Modul zu erkunden. Im Gegensatz zu neuen Freunden und Ereignissen, die nicht sofort angezeigt werden, haben Benutzer die Möglichkeit, ihre übereinstimmenden Freunde zu überprüfen, Aktivitäten zu markieren oder daran teilzunehmen und Gruppen zu verwalten. Die Homepage wurde so gestaltet, dass sie klar und übersichtlich bleibt. Drei relevante Bilder dienen als visuelle Hinweise für jedes Modul. Navigationsschaltflächen verbessern die Intuitivität des Benutzers zusätzlich und sorgen für eine organisierte und benutzerfreundliche Darstellung der Hauptinhaltsbereiche.
Benachrichtigung
Auf dieser Seite haben Benutzer die Möglichkeit, ihre Benachrichtigungen zu lesen und zu verwalten. Die Schnittstelle bietet Optionen zum Überprüfen und Löschen von Benachrichtigungen und bietet Benutzern eine optimierte und effiziente Möglichkeit, über ihre Interaktionen und Aktivitäten innerhalb der Plattform auf dem Laufenden zu bleiben.
Chatfenster
Das Farbschema bleibt mit der mobilen App konsistent und sorgt für ein nahtloses visuelles Erlebnis für Benutzer. Darüber hinaus können Benutzer die Suchfunktion nutzen, um bestimmte Nachrichten oder Freunde effizient zu finden, wodurch die Zugänglichkeit und Benutzerfreundlichkeit der Nachrichtenfunktion verbessert wird.
