Einführung

Hallo Medium-Leser! In dieser UI UX-Fallstudie stelle ich mein Design für mobile Apps vor. „Stash&Store“ ist der Name meiner zweiten mobilen Anwendung. Es besteht aus verschiedenen Funktionen, die dem Benutzer helfen, einen angemessenen Lagerraum für seine Gegenstände zu finden und/oder überschüssigen eigenen Speicherplatz zu monetarisieren. Ich wollte innovativ und kreativ sein und diese App so benutzerfreundlich, intuitiv, funktional und einzigartig wie möglich gestalten.

Problem

Als ich mit dem Projekt begann, hatte ich ein bestimmtes Problem im Kopf, das ich lösen wollte. Nach einigem Nachdenken wurde mir jedoch klar, dass „Stash&Store“ effektiv eine multifunktionale App sein könnte, die etwas unterschiedliche Probleme für verschiedene Arten von Menschen löst. Folgende Probleme wollte ich irgendwie lösen:

• Mangel an Stauraum in den Wohnungen der Menschen
  In der modernen Welt fehlt es den Menschen an Wohnraum, geschweige denn an Stauraum.
• Hohe Lager- und Lagerpreise
  Wer über die Anmietung von Lagerflächen nachdenkt, wird häufig durch hohe Mietpreise davon abgehalten. Speziallager können oft sehr teuer sein.
• Raumüberschuss bleibt ungenutzt
  Personen, die einen Überschuss an Raum besitzen, bleiben manchmal nur mit Ausgaben für ihren ungenutzten Raum zurück.

Im Bewusstsein der oben genannten Probleme begann ich mit der Recherche. Als erstes habe ich wie immer Wettbewerbsanwendungen und -produkte analysiert. Auf diese Weise habe ich einige Ideen entwickelt, was ich zu meiner App hinzufügen könnte, aber was noch wichtiger ist, ich habe Fehler und Mängel in Konkurrenz-Apps gefunden. Mein Endziel war es, die beste und einzigartigste App für diesen Zweck zu entwickeln! Neben der Besichtigung von Konkurrenz-Apps wollte ich die Nutzer kennenlernen. Während des gesamten Designprozesses stand für mich die Berücksichtigung des Nutzers und seiner Bedürfnisse an erster Stelle.

Benutzerpersönlichkeit

Nach gründlicher Auseinandersetzung mit den Kernproblemen, die meine App lösen würde, und umfangreichen Recherchen zu den Bedürfnissen potenzieller Nutzer bestand der nächste Schritt darin, die ideale Nutzerpersönlichkeit zu identifizieren.

Brainstorming

Nachdem ich die Benutzerpersönlichkeit identifiziert hatte, stand ich vor einigen Brainstorming-Sitzungen. In dieser Phase habe ich fast jede Idee zur Kenntnis genommen, die mir in den Sinn kam. Ich habe diese Notizen in FigJam gemacht und sie später auf eine spezielle Figma-Seite übertragen, die speziell für diese Ideen vorgesehen ist.

Wie Sie auf dem obigen Screenshot sehen können, gab es einen Abschnitt für reines Brainstorming, während es auch Abschnitte für bestimmte Hauptteile der App gab.

UX-Karte

Nachdem ich verschiedene Ideen hatte, konstruierte ich eine UX Map. Es gibt drei Rahmenfarben, von denen jede einen bestimmten Teil der App darstellt.

Inspirierende Tafel

In Bezug auf die UI-Elemente meiner App habe ich ein großes inspirierendes Board erstellt, das eine große Anzahl verschiedener Bildschirme und Aufnahmen aus verschiedenen Apps enthält. Obwohl es vielleicht etwas kontraintuitiv ist, habe ich mich von Reise-Apps, Social-Media-Apps, Koch-Apps, Navigations-Apps usw. inspirieren lassen. Ich habe auf alle UI-Elemente geachtet – Farben, Eingabefelder, Menüs, Symbole, Schaltflächen, Schriftarten, Illustrationen, Karten usw. Im Wesentlichen teilen alle Apps eine große Menge der gleichen UI-Elemente.

Ich habe zahlreiche Aufnahmen von Dribbble, Mobbin, Behance und ähnlichen Plattformen auf meiner „Inspiration Board“-Seite in Figma gespeichert. Ich habe alle Aufnahmen nach ihrem Zweck kategorisiert. Auf diese Weise gab es mehrere unterschiedliche Abschnitte mit unterschiedlichen Arten von Aufnahmen.

Ich habe auch darauf geachtet, Notizen in Form von Figma-Kommentaren zu Aufnahmen zu hinterlassen, um mich an genau das zu erinnern, was meine Aufmerksamkeit erregt hat. Ich wusste, dass ich nur die Werke verschiedener anderer großartiger Designer neu anpassen und imitieren musste, damit meine App großartig aussieht! Apps, von denen ich mich inspirieren ließ, waren größtenteils weltweit im Einsatz und wurden von einigen der besten Experten der Welt entwickelt!

Lo-Fi-Wireframes

Ich habe drei Drahtgitterabschnitte erstellt. Der erste ist universell und das ist der Onboarding-Prozess. Die anderen beiden Abschnitte waren Wireframes verschiedener App-Ansichten , eine für Hosts und eine für Clients . Sobald die App heruntergeladen und der Benutzer sich registriert hat, kann er immer noch problemlos zwischen den beiden wechseln. In den folgenden Screenshots ist ersichtlich, dass fast jeder Bildschirm in diesem Wireframe eingeführt wurde.

Nachdem ich die Wireframes fertiggestellt hatte, hatte ich eine viel klarere Vorstellung davon, wie ich mit dem Projekt fortfahren würde. Um meine Gedanken beim Wireframing nicht zu vergessen, habe ich Figma-Kommentare in bestimmten Bereichen des Bildschirms hinterlassen, um mich an meine Pläne für ein bestimmtes Designelement zu erinnern.

Designsystem

Die von mir verwendete Schrift in Kombination mit der Themafarbe erwies sich als beste Lösung. Dieser Grünton ruft Vertrauen, Optimismus und allgemeine Positivität in den Köpfen der Benutzer hervor. Andererseits vermittelt die DM Sans als Schrift ein Gefühl von Modernität, Professionalität und Klarheit. Die klaren Linien und abgerundeten Ecken verleihen der App ein freundliches und zugängliches Gefühl, während die scharfen Kanten ein Gefühl von Präzision suggerieren.

Zur Steigerung der Produktivität im Designprozess habe ich Text- und Farbstile erstellt. Auf diese Weise war es einfacher und schneller, über die Farbe bestimmter UI-Elemente und die Schriftart zu entscheiden, die ich an einer bestimmten Stelle verwenden würde. Das Erstellen von Stilen hat mir später auch sehr geholfen, Änderungen am Design vorzunehmen.

In Bezug auf Symbole habe ich ein einzelnes Symbolpaket und einen Symboltyp verwendet, um ein einheitliches Design in der gesamten App beizubehalten. Der Name des Icon-Packs ist „Heroicons“ und es enthielt fast alle Icons, die ich brauchte, in einem SVG-Format (Vektor). Die Symbole, die ich nicht gefunden habe, habe ich mit einem Stiftwerkzeug in Figma gezeichnet. Ich habe sichergestellt, dass sie in Größe und Strichstärke mit den Symbolen aus dem zuvor erwähnten Symbolpaket übereinstimmen.

Symbolpaketquelle:
https://heroicons.com/

Wenn es um Illustrationen geht, die ich verwendet habe, stammen sie auch aus derselben Illustrationsquelle. Auch hier ist Konsistenz in der Benutzeroberfläche sehr wichtig!

Quelle der Illustrationen:
https://storyset.com/time

Endgültiges Design

Wie im Kapitel „Lo-Fi Wireframes“ erwähnt, umfasst „Stash&Store“ zwei App-Ansichten . Der erste konzentriert sich auf den Kunden , und der Kunde ist die Art von Benutzer, der nach Speicherplatz sucht, den er über die App mieten kann. Diese App-Ansicht soll dem Kunden helfen, Speicherangebote einfach zu finden. Die zweite App-Ansicht ist für Gastgeber gedacht , die ihre Räumlichkeiten vermieten möchten. In diesem Fall bedient „Stash&Store“ den Nutzer in spezifischen Weisen, die ihm die Verwaltung seiner Angebote erleichtern.

Der Onboarding-Prozess an sich ist für jede App relativ gleich. In diesem Fall hat der Benutzer natürlich zwei Hauptoptionen – sich zu registrieren oder einzuloggen. Beim Erstellen eines Kontos werden Benutzer aufgefordert, ihren Verwendungszweck für „Stash&Store“ anzugeben. Dies ist enthalten, da der Benutzer möglicherweise nur an einer App-Ansicht interessiert ist. Nach seiner Wahl fährt er mit dem Anmeldevorgang fort.
Diejenigen, die als Gastgeber fortfahren , werden aufgefordert, ihr Angebot sofort aufzulisten oder diesen Teil zu überspringen und später darauf zurückzukommen. Gastgeber müssten auch ein Foto ihres von der Regierung ausgestellten Personalausweises machen, um ihre Identität zu überprüfen.
Der einzige Verifizierungsprozess, der für alle Benutzer obligatorisch ist, ist die E-Mail-Verifizierung.

Nach Abschluss des Client-Anmeldevorgangs werden Benutzer zum Bildschirm „Erkunden“ weitergeleitet, der auch als Registerkarte „Startseite“ dient. Von hier aus können sie nach Speicher suchen, indem sie einen gewünschten Ort eingeben, und sie können ihre Suchergebnisse filtern. Die Karte zeigt die Positionspins des verfügbaren Speicherplatzes an. Sobald einer von ihnen angeklickt wird, erscheint im unteren Teil des Bildschirms eine Karte mit allgemeinen Informationen zu diesem Speicher.
Eine weitere wichtige Funktion auf dieser Registerkarte ist die Funktion „Punkt platzieren“. Wenn Sie auf die Schaltfläche in der unteren rechten Ecke klicken, erscheint eine kleine Suchnadel in der Mitte des Bildschirms. Es bleibt in der Mitte, während der Benutzer durch die Karte scrollt. Wenn der Benutzer die Stecknadel an einer gewünschten Stelle platziert und erneut die untere rechte Taste drückt, erscheinen alle Speicherplätze in der Nähe der platzierten Stecknadel auf dem Bildschirm.

Nachdem ein geeigneter Lagerraum gefunden wurde, können Kunden eine Online-Verfügbarkeitsanfrage senden. Wie im zweiten Bildschirm oben zu sehen, wählen die Kunden das gewünschte Startdatum aus und können dem Gastgeber auch eine Notiz schreiben. Es ist wichtig zu erwähnen, dass es immer noch Sache des Gastgebers ist, die Anfrage des Kunden vollständig zu genehmigen.
Eine Sache, die ich in die App eingeführt habe, die Kunden bei der Entscheidung über die Speicherung hilft, sind Leistungschips . Diese Chips erscheinen auf dem Speicherbildschirm und stellen eine Art Garantie für den Kunden dar, dass der gefundene Speicher sicher und zuverlässig ist. Die Hosts sind diejenigen, die diese Chips durch Kontoüberprüfung und eine bestimmte Anzahl von abgeschlossenen Geschäften erhalten.

Sobald der Kunde eine Mietfläche reserviert hat, kann er/sie das Angebot auf der zweiten Registerkarte finden – meine Vermietungen. In diesem Tab haben sie einen Überblick über alle von ihnen abgegebenen Angebote. Durch Klicken auf eine der Karten öffnet sich ein Bildschirm, auf dem die Person ihren Deal einsehen kann, aber noch wichtiger, wo sie ihre Reservierung bearbeiten und/oder stornieren kann. In beiden Fällen werden sie aufgefordert, ihre Aktion zu bestätigen, um keine versehentliche Aktion auszuführen.

„Nachrichten“ ist die dritte Registerkarte in dieser App. Es ist auch in der Host-App-Ansicht vorhanden, da es mehr oder weniger universell ist. Der Benutzer kann Chats durchsuchen, Konversationen löschen oder archivieren. Außerdem können Benutzer im Falle der App-Ansicht von Kunden vorgenerierte häufig gestellte Fragen senden (wie im dritten Bild oben gezeigt).

Profilbildschirme für beide App-Ansichten sind relativ ähnlich. Oben auf beiden Bildschirmen befindet sich die Schaltfläche, die die App-Ansicht ändert. Ich wollte, dass diese Schaltfläche leicht zugänglich ist. Auch wenn der Gastgeber sein Konto nicht vollständig verifiziert hat, wird er/sie daran erinnert und ermutigt, die Verifizierung abzuschließen. Das ist der Zweck dieser grünen, leuchtenden Schaltfläche oben auf dem zweiten Bildschirm.

In der App-Ansicht der Gastgeber ist eines der wichtigsten Dinge die Buchungsverwaltung. Um ein nahtloses Erlebnis für Gastgeber zu gewährleisten, habe ich der Entwicklung eines intuitiven Anfrageverwaltungssystems Priorität eingeräumt, mit dem sie Anfragen einfach anzeigen und verwalten können.

Das Hinzufügen und Bearbeiten von Angeboten ist auch für Gastgeber von entscheidender Bedeutung. Es sollte einfach sein, Bereiche hinzuzufügen, Einträge zu bearbeiten und Bewertungen anzuzeigen.

Bezüglich des Reiters „Nachrichten“ in der Gastgeber-Ansicht ist es für beide App-Ansichten gleich. Chats werden jedoch zwischen den beiden verschiedenen App-Ansichten aufgeteilt/getrennt.

Abschluss

Zusammenfassend lässt sich sagen, dass die Stash&Store-App entwickelt wurde, um das Problem sicherer und erschwinglicher Aufbewahrungsmöglichkeiten für Menschen zu lösen, die zusätzlichen Platz für ihre Sachen benötigen. Über die App können Mieter Lagerräume einfach finden und buchen, während Gastgeber ihren ungenutzten Raum monetarisieren können.

Wenn Ihnen meine Fallstudie gefallen hat, klatschen Sie diesen Artikel 50 Mal.
Pro-Tipp: Versuchen Sie, die Clap-Taste gedrückt zu halten :)

Kontakt

Fühlen Sie sich frei, mich zu kontaktieren :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/