Freiberufliche Tätigkeit als UX-Designer für das soziale Unterhaltungsnetzwerk.

Ich las gerade einen kostenlosen Code-Camp-Artikel über “Warum Nebenprojekte so verdammt wichtig sind”, als ich auf das Nebenprojekt des Autors namens Raterfox stieß.

Ich habe die Website überprüft und festgestellt, dass viele Probleme die Benutzerfreundlichkeit beeinträchtigen können. Ich habe schnell ein Dokument erstellt, in dem einige Änderungen vorgeschlagen wurden, und so kam ich zum Auftritt.

Überblick

Raterfox ist eine soziale Plattform für Filme und Fernsehsendungen, auf der Sie unter anderem Titel bewerten und bewerten oder Ihren Freunden empfehlen können. Diese Website warf einen Blick auf die Trendwarteschlangen und hatte Gifs als Ausdrucksform. Hier ist die alte Version der Website, an der ich gearbeitet habe.

Über den Kunden

Jake Prins ist ein in Neuseeland lebender Python-Entwickler, der ein Nebenprojekt gestartet hat.

Problemstellung

Der Kunde hatte einen Mobile-First-Ansatz und wollte auf die Desktop-Website umsteigen. Es wurde ein Design im Kartenstil verwendet, das für Mobilgeräte in Ordnung war, für Mobilgeräte jedoch eine schreckliche Reaktionszeit aufwies.

Ziel war es daher, die Probleme zu beheben und die Website auf dem Desktop mit den aktuellen Elementen gut aussehen zu lassen. Dies erleichtert es den Benutzern wiederum, sich auf der Plattform zu engagieren.

Benutzer

Jeder, der nach den neuesten Filmen und Fernsehsendungen suchen, sich als Binge-Watcher ausweisen und seine Rezensionen teilen möchte, könnte unser potenzieller Nutzer sein.

Rolle

Meine Rolle war

  • Lösen Sie die vom Kunden gemeldeten Probleme.
  • Testen Sie, finden Sie Probleme auf der Website und bieten Sie nach Möglichkeit Lösungen an.

Helfen Sie der Website dabei, Engagements und die Benutzerfreundlichkeit zu verbessern.

Ich habe direkt an den Gründer / Entwickler berichtet.

Einschränkungen

  • Mir wurde die Berechtigung zum Testen der aktuellen Benutzer verweigert
  • Es gab keinen anderen Designer im Team, mit dem ich über Designentscheidungen hätte diskutieren können.
  • Der Kunde stammte aus Neuseeland und hatte 13 Stunden Zeit vor mir, was eine Verzögerung bei der schnellen Antwort bedeuten könnte.
  • Um Missverständnisse zu vermeiden, muss ich Vorschläge zusammen mit Mockups machen

Verarbeiten

Wettbewerbsanalyse

  • Ich habe Websites wie IMDB und Rotten Tomatoes überprüft und bin zu dem Schluss gekommen, dass Raterfox keinen Unterschied zu diesem gesättigten Markt aufweist.
  • Wenn ein Benutzer einige Bewertungen sehen möchte, ist es schwierig, sie an Raterfox weiterzuleiten.
  • Es war okay, da es ein Nebenprojekt war und der Kunde nur experimentieren wollte.

Mein nächster Schritt war eine heuristische Analyse der aktuellen mobilen und Desktop-Website sowie die Suche nach technischen Fehlern.

  • Überall auf der Plattform traten Inkonsistenzen bei den Symbolen auf, als wären die oberen Symbole kleiner als die sozialen Symbole in der Fußzeile. Keines der sozialen Symbole funktionierte außer YouTube.
  • Das Flaggensymbol (🏴) wurde als Benachrichtigungssymbol verwendet. Es wird im Allgemeinen verwendet, um etwas auf anderen Websites als unangemessen zu kennzeichnen.
  • Wenn Sie auf “Kontakt” klicken, werden Benutzer auf den E-Mail-Client umgeleitet, während Sie die Website auf einem Desktop verwenden. Stattdessen können wir einfach den Text + Link “[email protected]” an die Stelle von “Contact us” setzen. So können mobile Benutzer einfach darauf klicken und Webbenutzer können es kopieren.
  • Durch die Verwendung von Push-Benachrichtigungen werden Benutzer benachrichtigt, wenn sie von jemandem gemocht oder kommentiert werden, und auf die Website zurückgebracht.

Der Bestätigungsdialog gibt Benutzern die Möglichkeit, einen Fehler zu beheben.
  • Um zu verhindern, dass Benutzer versehentlich Überprüfungen oder Reaktionen löschen, wird das Bestätigungs-Popup “Sind Sie sicher?” Angezeigt.

Vor
  • Die Liste der Filme / Fernsehsendungen bestand aus Karten mit einer Bewertung, jedoch nicht aus “Handlungsaufforderung”. Der Entwickler erwartete, dass Benutzer darauf klicken.
Referenz: RealSync
  • Das Bild zeigt eine gute Umsetzung der Karte mit einem „Aufruf zum Handeln“.
Handlungsaufforderung verwenden
  • Das (+) Symbol wurde hinzugefügt, damit Benutzer Reaktionen hinzufügen und Themen zum Lesen von Rezensionen und Kommentaren anzeigen können.

Der Kunde hat mir diese Fragen gestellt

Hast du vielleicht Ideen, wie man wie eine “Reaktion” auf dem Desktop aussehen kann ? Ich habe das Gefühl, dass es auf dem Handy ziemlich solide aussieht, aber auf einem Desktop sind die Karten zu schmal, was auf beiden Seiten viel leeren Raum lässt (genau wie auf der Profilseite).

Ich habe versucht, mehr Karten nebeneinander zu legen, wie im Aktivitäts-Feed, aber dann sind einfach zu viele bewegliche Gifs auf dem Bildschirm .

Vielleicht haben Sie eine Idee, wie Sie das Aussehen des Reaktions-Feeds auf größeren Bildschirmen verbessern können ?

So sah die Reaktionsseite der Website vorher aus.

Nachforschungen über Kartenstildesign

  • Material.io hat eine ziemlich gute Ressource für Dos and Don’ts.
  • Dieses Video zeigt, was zu tun ist und was nicht, wenn Sie mit dem Handy arbeiten.
  • Diese Prüfung des Kartenlayouts auf dem Desktop.

Skizzierung

Skizzieren möglicher Lösungen unter Bezugnahme auf material.io
  • Eine Lösung wäre, ein GIF nur dann zu bewegen, wenn ein Benutzer den Mauszeiger auf das GIF hält, aber dennoch viel Unordnung spürt.
  • Eine andere Möglichkeit besteht darin, den material.io-Richtlinien zu folgen und die Gifs / Kommentare auszublenden und nur dann anzuzeigen, wenn Benutzer auf das Pfeilsymbol klicken.
  • Dies war eine bessere Lösung, da der Benutzer die Möglichkeit hat, Kommentare anzuzeigen, und die Seite auch sauber aussieht.
Dies löst alle Probleme, die der Client gemeldet hat.

Auswirkung

Als ich diese Fragen stellte, hat der Kunde mich gespenst ! Ich habe seitdem nichts mehr von ihm gehört.

Frage 1: Wie testen Sie meine empfohlenen Änderungen?

Frage 2: Könnten Sie mir bitte Daten wie Analytics mitteilen, oder wenn sich die Nutzerbeteiligung erhöht, nachdem Sie die von mir bereitgestellten Feedback- und Designvorschläge verwendet haben?

Es ist schade, dass mir der Kunde trotz der Verwendung meiner Designlösungen bei diesen Dingen nicht geholfen hat.

Lernerfahrungen

  • Das Design des Kartenstils habe ich von material.io gelernt.
  • Ich habe gelernt, wie man Kunden auswählt.
  • Ich verstand die Notwendigkeit des Mobile First Approach, aber auch, wenn es nicht richtig gemacht wird, könnte die Desktop-Version ein Misserfolg sein. (besonders Kartenartentwurf.)
  • Ich habe die Änderungen so angelegt und empfohlen, dass es für einen Kunden einfach war, daran zu arbeiten.
  • Manchmal bekommen Sie wahrscheinlich einen Kunden, dessen Produkt nicht einzigartig ist (in meinem Fall ein ziemlich gesättigter Markt). Sie können einfach die Benutzeroberfläche / UX verbessern und auf das Beste hoffen.
  • Das Dokumentieren, Sichern vor und nach meiner Arbeit half mir, es einfach zu erklären.
  • Einige Kunden lassen Sie möglicherweise ihre aktuellen Benutzer nicht testen. Versuchen Sie zu diesem Zeitpunkt, die Wichtigkeit des Testens zu überzeugen, oder suchen Sie einfach jemanden, der zu der Person passt, und führen Sie einen Benutzertest mit ihnen durch.

Zukünftige Verbesserungen

  • Eine einzigartige Produktidee zu haben, hilft sehr, da wir bei der Arbeit wissen, worauf wir uns konzentrieren.
  • Eine komplette Überarbeitung der alten Website war notwendig.
  • Die aktuelle Website verfügt über eine übersichtliche Benutzeroberfläche, für die mobile Website wird jedoch dieselbe Dashboard-Benutzeroberfläche verwendet, was die Verwendung erschwert.
Die Website verwendet eine gute Dashboard-Oberfläche
Die Verwendung derselben Benutzeroberfläche wie die Website für Mobiltelefone führt dazu, dass die Bildschirmgröße des aktuellen Mobiltelefons berücksichtigt wird, wenn kein Wischen von links nach rechts und ein Hamburger-Menü oben angezeigt wird.

Vielen Dank, dass Sie diese Fallstudie gelesen haben. Ich würde gerne Ihre Vorschläge hören.

Lass es mich in den Kommentaren unten wissen oder kontaktiere mich über – E-Mail, Twitter oder LinkedIn