Wie ich ein UX Redesign begann

Das Redesign einer Website ist keine einfache Aufgabe, die in ein oder zwei Wochen erledigt werden kann, es sei denn, Sie haben ein großes Team. Dies liegt daran, dass es Meetings, Recherchen, Designkonzepte, Drahtrahmen und Designkonzepte gibt, und all dies braucht Zeit, wenn Sie ein kleines Team haben oder selbst daran arbeiten. Lassen Sie mich einige der Schritte erläutern, die ich bei der Neugestaltung einer gemeinnützigen Gruppe hilfreich fand und die ich während eines Schulsemesters durchgeführt habe.

Schritt 1: Schauen Sie sich die Website an.

Bevor Sie sich mit dem Kunden treffen, ist es wichtig, die vorhandene Website zu überprüfen. Auf diese Weise erhalten Sie eine Vorstellung davon, was das Unternehmen macht, welche Seiten es möglicherweise benötigt, und Sie können blind werden, um zu sehen, was die Benutzer möglicherweise erleben, wenn sie die Site zum ersten Mal aufrufen. Achten Sie auf Farben, Organisation der Seiten, redundanten Inhalt, Fehler und Benutzerfreundlichkeit, wenn Sie versuchen, den Inhalt der Site zu finden. Machen Sie sich unterwegs Notizen, indem Sie Screenshots machen und dann Notizen schreiben, damit Sie sich später auf die Dinge beziehen können.

Eines der ersten Dinge, die mir aufgefallen sind, war die Spendenseite. Es war schlecht gestaltet und hatte viel Text auf der Seite. Für einen gemeinnützigen Verein ist es sehr wichtig, das Vertrauen eines Nutzers zu haben. Deshalb wollten wir uns zuerst damit befassen. Wir hatten von unserer Lehrerin erfahren, dass sie mehr Spenden von ihrer Website erhalten wollten, daher war dies entscheidend, um Verbesserungen zu erzielen. Ich bemerkte auch Bilder von geringer Qualität und überflüssige Schaltflächen und Seitennamen gegenüber Heldenbildern aufgrund der Art des Site Builders, in den die Site eingebaut wurde (WordPress).

Schritt 2: Treffen Sie sich mit dem Kunden.

Besprechungen mit den Stakeholdern sind wichtig, um während der Entwurfsphasen konzentriert zu bleiben. Indem Sie vorab auf ihrer Website recherchieren, werden die Fragen, die Sie dem Kunden stellen, viel fokussierter und wirkungsvoller, da Sie eine Weile über das Unternehmen nachdenken. Schreiben Sie Ihre Fragen auf, bevor Sie sich mit dem Kunden treffen, denn Sie werden sie vergessen, wenn Sie dies nicht tun. Normalerweise füge ich sie gerne in ein Google-Dokument ein, damit es einfach ist, sie während des Meetings zu teilen und mit anderen zusammenzuarbeiten. Hier sind einige gute Fragen, die Sie während dieses Interviews stellen sollten.

  • Welche Websites inspirieren Sie?
    • Was sind einige Probleme, die Sie derzeit mit Ihrer Website haben?
    • Welche Funktionen möchten Sie auf Ihrer Website implementieren?
    • Wer ist Ihre Zielgruppe?
    • Was ist dein Budget? (Marketing, Design usw.).
    • Was ist der Zweck Ihrer Website?
    • Was ist die durchschnittliche Lebensdauer eines Benutzers?
    • Welche Ressourcen haben Sie zum Erstellen von Inhalten?
    • Was ist die Stimme Ihres Unternehmens und / oder Ihrer Website?
    • Welche Fristen haben Sie für dieses Projekt?
    • Es gibt viele weitere, die Sie je nach Kunde finden können, aber diese scheinen Ihnen dabei zu helfen, einige enge Antworten zu erhalten. Weitere Fragen werden gestellt, wenn Sie während des Meetings weitere Erläuterungen benötigen. Stellen Sie sich also auf zusätzlichen Platz ein, um diese in Ihre Notizen aufzunehmen.

      Schritt 3: Mood Board erstellen

      Moodboards sind sehr praktisch, wenn Sie sich mit dem Kunden getroffen haben. Es ist wichtig, sich an die Wünsche des Kunden zu halten, da es einfach ist, sich von unseren eigenen Ideen und Gedanken mitreißen zu lassen. Moodboards enthalten Farben, Typografie und Screenshots / Bilder von Websites oder Seiten, die Sie zu der Website inspirieren, für die Sie erstellen. Für jedes Projekt, an dem ich arbeite, habe ich einen Ordner auf meinem Computer, in den ich inspirierende Bilder, Designs, Schriften und Screenshots lege. Dies gibt mir eine gute Referenz, wenn ich mich auf ein Designelement festgelegt habe und in Aktion treten muss.

      Da es auf der Spendenseite wirklich an Gestaltungselementen mangelte, suchten wir auch nach guten Beispielen für Spendenseiten, um Elemente zu finden, mit denen die Seite aktueller aussieht.

      Schritt 4: Projektbeschreibung und Recherche

      Dies ist ein guter Zeitpunkt, um zu bewerten, was der Kunde im Interview besprochen und die Problemstellung definiert hat. Insbesondere für diesen Ort sammelten sie nicht genügend Spenden und hatten erwähnt, dass sie sich an die tausendjährige Generation wenden wollten. Wir haben festgestellt, dass auf der Website keine Zahlungsoptionen zur Verfügung standen. Daher war das Hinzufügen von PayPal oder Apple Pay eine Lösung, die wir implementieren wollten. Da wir einige Nachforschungen über die Arten von Nutzern angestellt hatten, die sie bereits hatte, und über die Nutzer, die sie haben wollte, lieferten sie uns genügend Informationen, um die Befragten persönlich zu befragen, wie sie sich mit der vorhandenen Website und gemeinnützigen Organisationen im Allgemeinen fühlten. Mit diesen Informationen haben wir dann einige Personen erstellt, die unserer Meinung nach die von uns gesammelten Daten repräsentieren. Dies ist wichtig, da der Kunde bei der Ansprache einer bestimmten Zielgruppe das Gefühl haben möchte, dass unsere Daten eine gültige Darstellung einer realen Person mit realen Bedenken und Interessen zeigen.

      Persona

      Dinge, die für Personas enthalten sein sollten

      • Profil - dies gibt einen Hintergrund für den Einzelnen
      • Ziele - zu wissen, worauf wir bei der Gestaltung der Website achten müssen
        • Domain - Demografische Informationen
        • Zitat - Ein kurzes Zitat, das die Art der Person angibt, die sie sind
        • Social Media - Es ist großartig zu wissen, wo Leute vermarkten können, um neue Besucher zu gewinnen
        • Verwenden Sie niemals eine wirklich berühmte Person! Es macht es schwierig, sich auf die Person zu beziehen, und sie werden die ganze Zeit vorgefasste Ideen haben. Verwenden Sie einfach Fotos für Personas.

          Bedarf

          Achten Sie im Gespräch mit dem Aktionär auf dessen Anforderungen an den Standort. Einige, denen wir gegenüberstanden, waren, dass das Logo und die Farben gleich bleiben mussten, weil die Menge an Geld, die zum Wechseln von Postern und dergleichen benötigt würde, ziemlich viel kosten würde. Wenn ein Unternehmen gegründet wird, werden sie normalerweise Dinge haben, die sie nicht ändern wollen. DIES SIND WICHTIG. Da sie auf ihrem Website-Builder bleiben wollten, war das Festhalten an WordPress eine weitere Anforderung, was bedeutete, dass alles, was auf der Site implementiert wurde, innerhalb der Grenzen bleiben musste, die WordPress unterstützen konnte. Wir haben eine Liste von ungefähr 5 verschiedenen Dingen erstellt, die sie angesprochen haben.

          Umfrage Informationen

          Jetzt ist ein guter Zeitpunkt, um die aus Umfragen und Interviews gewonnenen Informationen zusammenzustellen. Diese Informationen sind wertvoll, da sie es der Konstruktionsgruppe ermöglichen, sich bei Bedarf zu drehen und sich über Spekulationen zu informieren, die von Anfang an gemacht wurden. Wir dachten darüber nach, welches Vertrauen die Menschen in eine Wohltätigkeitsorganisation brauchen. Wir wussten, dass es etwas Wichtiges werden würde und haben uns die Zeit genommen, diese Daten zu überprüfen, um zu bestätigen, was wir ursprünglich dachten.

          Schritt 5: Site Map

          Der erste Schritt bestand darin, auf ihrer ursprünglichen Website nachzuschlagen, welche Seiten sie hatten und welche redundanten Informationen auf der Website vorhanden waren. Wir haben festgestellt, dass das Menü mehrere Seiten mit Informationen enthielt, die nur wenige Textzeilen umfassten. Anstatt all diese Seiten beizubehalten, haben wir uns entschlossen, diese Informationen zu konsolidieren, um die Anzahl der Seiten auf der Site zu reduzieren.

          Bei der Erstellung einer Sitemap ist es wichtig, Konsistenz zu verwenden. Verwenden Sie die gleichen Formen für ähnliche Elemente wie Untermenüelemente oder Kategorien der obersten Ebene. Es gibt eine Menge Software, die die Verwendung vereinfacht, darunter lucidcharts.com und writemaps.com. Ich persönlich mag es, mehr Übung mit der von mir verwendeten Software zu haben, deshalb habe ich Adobe Illustrator verwendet. Es braucht mehr Zeit, hat aber viel mehr Funktionen und kann viel individueller sein. Ich habe einen Abschnitt für die Startseite, die Kopfzeile und die Fußzeile für die Site eingefügt.

          Schritt 6: Storyboard

          Auf dem Storyboard finden Sie Szenarien, die die Benutzer auf der Website durchgehen können. Für mich hat das geholfen, Dinge aus meinem Kopf auf Papier zu bringen und ein paar verschiedene Bilder davon zu zeigen, wie die Site aussehen könnte, bevor ich mit den Drahtgittern beginne. Für mein Storyboard wollte ich unbedingt einen der wichtigsten Teile der Website angreifen, nämlich die Spendenseite. Ich war der Meinung, dass es mehr visuelle Darstellungen für das geben sollte, wofür Sie gespendet haben, da es vorher nur Text war.

          Dies hilft dabei, verschiedene Designs zu lokalisieren, die während des Drahtrahmens schnell wiederholt werden können. Mach dir keine Sorgen, ein guter Künstler zu sein, obwohl hier mit einem Bleistift einige wirklich coole Designstücke entstehen können.

          Schritt 7: Wireframes

          Dies ist der Teil des Designprozesses, in dem sich die Dinge wirklich lustig anfühlen. Ein Drahtmodell ist ein einfaches Design, bei dem Fülltext vorhanden ist und Linien und Scheitelpunkte enthält. Es handelt sich normalerweise um ein Graustufen-Layout von Seiten für die Website und eine Möglichkeit, die Website schnell zu gestalten und eine Antwort von einem Kunden zu erhalten.

          Dieses Drahtmodell ist detaillierter als es für ein Drahtmodell erforderlich war, aber es gab Details, die ich haben wollte, damit die Ideen in meinem Kopf nicht verloren gingen. Diese Details sind die Symbole und Kreditkartensymbole, die sich auf der Seite befinden . TIPP: Wenn Sie Wireframes erstellen, müssen Sie mindestens die Mobil- und Desktopversion berücksichtigen.

          Schritt 8: High-Fidelity-Prototyp

          Nach Ihren Wireframes ist es Zeit, die Website zu prototypisieren, damit sie wie das Original aussieht. Dies bietet häufig nicht alle Funktionen wie Schaltflächen und Links, bietet jedoch eine benutzerfreundliche Anzeige, wie die Website wirklich aussehen wird. Es gibt viele verschiedene Produkte, in die Sie Ihren Prototyp einbauen können. Hier sind einige, die ich gerne verwende.

          • Adobe XD
          • Skizzieren
          • InVision

          Es gibt auf jeden Fall viele unterschiedliche Meinungen darüber, welche besser ist, und für unser Projekt haben wir gerade InVision verwendet. Eine andere Gruppe hat jedoch ihren Prototyp in Adobe XD erstellt, und die von ihnen war viel besser als die von uns. Mit Adobe XD kann der Benutzer das Design einfach und mit viel mehr Funktionen durcharbeiten. Ich empfehle daher, es anstelle der anderen zu verwenden.

          Schritt 9: Voreinstellung für den Client

          Die Kommunikation mit dem Kunden sollte während des gesamten Projekts stattfinden. Das letzte und letzte Meeting bietet jedoch die Möglichkeit, dem Kunden zu erklären, was mit der Recherche geschehen ist, warum Designkonzepte ausgewählt wurden und was der Kunde von Ihrem Design erwarten kann . Diese Präsentation sollte professionell in einer Art Präsentationssoftware durchgeführt werden und einen funktionierenden Prototyp enthalten, den Sie zeigen können. Dieser Prototyp sollte einige der Szenarien behandeln, die Sie während Ihres Entwurfsprozesses für die zuvor erstellten Personen erstellt haben.