Quelle: Shutterstock

Ja, Neugestaltung (Teil 2)

Wie geht man mit Redesign in der mobilen Welt um?

Neugestaltungsziel einrichten

Diskussionen mit verschiedenen Teams ermöglichen es uns, spezifische Bedürfnisse aller Beteiligten zu erheben, um sicherzustellen, dass jeder bei der Neugestaltung die richtige Berücksichtigung findet und dass das Endprodukt sein volles Potenzial entfaltet. Ein wesentlicher Bestandteil dieses Prozesses ist die frühzeitige Einbeziehung von Produktmanagern, Designern und Ingenieuren. Dies wird die Wahrscheinlichkeit von Überraschungen erheblich verringern, wenn wir mit dem nächsten Schritt, der Ausführung, beginnen. Diese Diskussionen tragen dazu bei, unseren Fokus zu stärken und eine klare Vision und ein klares Ziel für die Neugestaltung festzulegen. Es schafft ein gemeinsames Verständnis dafür, wie das Endprodukt aussehen, sich anfühlen und funktionieren sollte. Der Dialog zeichnet ein verbales Bild des Designs und hilft bei der Entwicklung eines echten Frameworks (UX / UI-Richtlinien & Toolkit). Und stellt sicher, dass jeder die bestmöglichen Designpraktiken anwendet, die Sing verwandeln! in eine einfache, zugängliche, entzückende und wünschenswerte Plattform für unsere Benutzer.

Quelle: Shutterstock

Planen Sie den Start

Inkrementelle Funktionsänderungen

Bevor wir mit der Neugestaltung beginnen, mussten wir eine Startstrategie festlegen, die den Erfolg der Neugestaltung sicherstellt. In der vorherigen Diskussion haben wir Sing! muss seine globale Navigation ändern, um die Erkennbarkeit von Features zu verbessern. Das bedeutet, von der einstigen Standard-Hamburger-Navigation zur Bottom-Navigation zu wechseln. Dies ist eine wesentliche Änderung der Kernebene für das Produkt. Wir müssen zum Zeichenbrett zurückkehren und überdenken: Was sind die Hauptmerkmale und was ist die vernünftige, funktionale Hierarchie für die Navigation? Die erste Frage ist, ob die Navigationsänderung eine vom Redesign getrennte Version sein soll oder ob sie in die Redesign-Version übernommen werden soll. Wir wissen aus früheren Tests und einer gründlichen Überprüfung der vorhandenen Branchen-Fallstudien, dass diese beiden Änderungen einen erheblichen Einfluss auf die Leistung des Produkts haben werden. In der Vergangenheit funktionierte der Prozess folgendermaßen, als Smule eine neue Funktion oder ein neues Design einführte:

1. Erstellen Sie eine Hypothese
2. Entwerfen und erstellen Sie die Funktion
3. Geben Sie die Funktion für Benutzer frei
4. Messen und analysieren Sie die Leistung der neuen Funktion
5. Bewerten Sie, ob das Merkmal das Ziel erreicht oder die Hypothese validiert hat
6. Bestätigen Sie die ursprüngliche Hypothese

Mit dieser Methode ist es immer besser, Änderungen an Design und Features einzeln freizugeben. Es isoliert Änderungen, die ein unbeabsichtigtes Ergebnis der Neugestaltung sein oder eine falsche Datenmessung verursachen können. Noch wichtiger ist, dass Zeit bleibt, um die qualitativen Auswirkungen der einzelnen Änderungen (Navigation und Neugestaltung) aus Sicht des Benutzers vollständig zu verstehen.

Wählen Sie die Plattform und sperren Sie die Ressourcen

Nachdem die erste wichtige Entscheidung getroffen wurde, diese Änderungen nacheinander in zwei separaten Versionen zu veröffentlichen, lautete die nächste Frage, ob die Veröffentlichung unter iOS oder Android zuerst unter Berücksichtigung der folgenden Faktoren erfolgen soll: (1) Alle diese Designänderungen selbst sind mit einem hohen Risiko verbunden. (2) Wir können es uns nicht leisten, einen A / B-Test durchzuführen, um die Hypothese zu validieren. (3) Wir haben nur sehr begrenzte Design- und Engineering-Ressourcen. Basierend auf diesen gegebenen Faktoren waren wir uns einig, dass die Implementierung dieser Änderungen auf einer Plattform die bessere Option ist, um das Risiko zu minimieren. Aber welche Plattform zuerst? Im Vergleich zu Sing! iOS, Sing! Android hatte weniger Funktionen und schlechtere Verbindungs- und Aufbewahrungszahlen als Sing iOS. Dies bedeutet, dass die Änderung des Navigationsdesigns und die Neugestaltung von Sing! Android zuerst. Diese Entscheidung hat dazu beigetragen, die erforderlichen Entwurfs- und Konstruktionsressourcen zu lokalisieren und zu sperren. Wir haben eine sehr schlanke Struktur und ein kleines Team. Wir haben das Glück, dass ein visueller Designer und vier Ingenieure mit mir an dem zweiphasigen Sing! Android Redesign-Projekt. Eine der Herausforderungen an dieser Stelle besteht darin, sicherzustellen, dass wir die erforderlichen Entwurfsarbeiten vollständig verstehen und erfassen. Dies wird im folgenden Entwurfsausführungsabschnitt erörtert.

Quelle: Shutterstock

Gestalten wir!

Umfangreiches Design

Das Ändern der Navigation und des Redesign-Projekts waren zwei große designgetriebene Projekte. Bei der Festlegung der Entwurfszeitanforderungen ist es wichtig, genügend Zeit einzurichten, um die richtigen Entwurfslösungen zu erforschen, zu untersuchen und zu entwickeln, während die Ausführung in einem schlanken und agilen Prozess erfolgt. Als Entwurfs- und Projektleiter war diese Phase sehr nützlich. Es gab mir die Gelegenheit, einen Schritt zurückzutreten und das große Ganze zu sehen, während ich die Straße vor mir plante. Es war offensichtlich, dass die Neugestaltungsänderungen in zwei Schritten ausgeführt werden:

(1) Erstellen und integrieren Sie ein neues Navigationsparadigma, ohne das aktuelle visuelle Design zu ändern.

(2) Erstellen Sie ein neues Design, das die neuen UX / UI-Regeln mit neuen Farben, Schriftarten und Symbolen einführt.

Der zweite Schritt erfordert Entwurfsforschung, das Definieren neuer Entwurfsregeln und das Bestimmen, wie die Regeln auf beide Plattformen angewendet werden sollen. Eingehende Überlegungen und Entscheidungen sind erforderlich für: Was ist die Hauptfarbe des Sing! Was sind die richtigen neuen Schriften, was sind die neuen Symbole und wie testen wir diese Designkonzepte? Die Vielzahl der Entscheidungen, die zum Abschluss der einzelnen Schritte des neuen Designs erforderlich sind, hat mir geholfen, einen groben Zeitplan für diese zukünftige Version zu erstellen.

Neues Navigationsdesign erstellen

Als ersten Schritt haben wir begonnen, Optionen für das neue Navigationsdesign zu untersuchen und damit eine Grundlage für die zukünftige Neugestaltung zu schaffen. Die Komplexität des neuen Navigationsdesigns verdient einen eigenen Artikel. Da das Redesign im Mittelpunkt dieses Artikels steht, werde ich nicht näher darauf eingehen, wie wir uns dem neuen Navigationsdesign nähern. Stattdessen möchte ich einige der strategischen Überlegungen teilen, die bei dieser Neugestaltung angestellt wurden.

1. Finden Sie die richtige Navigationsstruktur, die Ihrem Produktzweck entspricht.

Die Auswirkung der Gerätegröße, wie z. B .: Mobilgeräte vs. Laptop vs. Desktop vs. iPad, zwingt zu einer kritischen, frühen Entscheidung für das im Entwurfsprozess zu verwendende „Formular“. Eine weitere Komplikation dieser Entscheidung ist die Variation der Größe des Mobilgeräts. Mobile Geräte haben verschiedene Bildschirmgrößen, die bis zu 3,5 Zoll oder bis zu 13 Zoll groß sein können. Der Schlüssel zum Erfolg liegt darin, ein einfaches und dennoch skalierbares Navigationsparadigma zu erstellen, das zuerst auf den kleinsten Bildschirm passt. Als wir 2014 die Navigationsdesigns mit vorhandenen Apps untersuchten, stellten wir fest, dass es drei Grundtypen gab. (1) iOS-Standard (Hauptbildschirmnavigation), (2) Android-Standard (Hamburgernavigation) und (3) Angepasst, basierend auf den Anforderungen des Entwicklers. Wir haben erkannt, dass die Entscheidung für das Navigationsparadigma nicht auf der Plattform basieren sollte, sondern das Paradigma, das sich am besten an der Art oder Verwendung des Produkts ausrichtet. Wenn sich das Produkt beispielsweise auf ein Erstellungserlebnis wie Instagram und Sing! Konzentriert, ist die Hauptbildschirmnavigation eine großartige Option. Wenn sich das Produkt auf ein Surferlebnis wie E-Mail oder ein Nachrichtenprodukt konzentriert, ist die Hamburgernavigation für dieses Erlebnis besser geeignet. Und wenn das Produkt einen zentralen Verwendungszweck hat, wie Uber und Snapchat, ist es möglich, ein benutzerdefiniertes Navigationsdesign zu erstellen, das den Anforderungen des jeweiligen Produkts entspricht.

2. Organisieren Sie die Funktionen nach Themen

Singen! verbindet Menschen durch Musik, was bedeutet, dass soziale Interaktion und das Erstellen von Musik zwei Kernthemen für die Organisation der Merkmale des Produkts sind. Der erste Schritt, den wir bei der Neugestaltung der Navigation unternommen haben, bestand darin, alle angebotenen Funktionen entweder im Bereich „soziale Interaktion“ oder „Musik erstellen“ zu platzieren. Wir haben festgestellt, dass einige Funktionen nicht in jeden Bucket passen und einige Funktionen in beide. Für Funktionen wie die Registrierung, die in keinen der beiden Bereiche passen, haben wir einen dritten Bereich mit der Bezeichnung "Andere" erstellt. Funktionen, die in einen der beiden Schaufeln passen, werden zur künftigen Prüfung in beide Schaufeln gestellt. Der nächste Schritt besteht darin, die Funktionen in jedem Bucket basierend auf Daten, Produktzielen und Benutzerrecherchen zu ordnen. Letztendlich mussten wir herausfinden, woran unsere Benutzer interessiert waren, mit welchen Funktionen wir unsere Benutzer einbinden wollten und wie wir sie am besten dorthin führen konnten. In dieser Rangfolge hatten wir eine ziemlich gute Vorstellung davon, wie wir diese Features basierend auf ihrem Bucket und ihrer relativen Bedeutung anordnen sollten.

3. Stellen Sie eine klare Informationshierarchie für die Navigation ein

Im traditionellen Webdesign gibt es drei Ebenen von Navigationssystemen: globale Navigation, lokale Navigation und kontextbezogene Navigation. Der Zweck dieser drei Navigationen besteht darin, den Benutzern Kontext und Flexibilität zu bieten. Sie helfen Benutzern zu wissen, wo sie sich befinden und wohin sie gehen können. In unserer Version dieses Schritts haben wir die fünf besten Features aus der vorherigen Übung ausgewählt und sie als globales Navigationsparadigma aufgenommen. Die restlichen Funktionen wurden Teil des lokalen Navigationsparadigmas. Da Benutzer auf mobilen Bildschirmen nicht so einfach zwischen Bildschirmen wie einem Desktop- oder Laptop-Bildschirm wechseln können, ist es wichtig, eine klare Regel für das Stapeln von Bildschirmen und das Löschen der gestapelten Bildschirme zu entwickeln, um Benutzerverwirrungen zu vermeiden.

Nach vielen Design-Iterationen ist das neue Android Sing! Das Navigationsdesign wurde im vierten Quartal 2014 veröffentlicht. Aufgrund quantitativer und qualitativer Untersuchungen haben wir festgestellt, dass das neue Navigationsdesign die Auffindbarkeit sowohl der Funktionen zum Erstellen von Musik als auch der Funktionen zur sozialen Interaktion drastisch verbessert hat. Infolgedessen wurde die Benutzerbindung auf dramatische und statistisch signifikante Weise erhöht.

Quelle: Shutterstock

Starten Sie das Redesign

Redesign-Strategie

Wenn Sie sich einer Neugestaltung einer mobilen App nähern, lautet eine der Kernfragen, welche Designrichtlinie für Plattformen (iOS und Android) das Designteam befolgen und anwenden soll. Einige Unternehmen haben zunächst den iOS-Benutzeroberflächenstil erstellt und dann den iOS-Designstil auf ihr Android-Produkt übertragen. Dies ist ein sehr effizienter Ansatz zum Entwerfen und Erstellen von Funktionen für eine zweite Plattform. Einige Unternehmen verwendeten für jede Plattform eine andere Designsprache. Der Zweck dieser Methode besteht darin, den Standard für flaches Design (iOS) und Materialdesign (Android) auf jeder Plattform zu erfüllen. Jeder Ansatz hat Vor- und Nachteile. Die erste Methode spart dem Entwicklerteam viel Zeit, während die Tatsache ignoriert wird, dass Android- und iOS-Benutzer Apps möglicherweise unterschiedlich verwenden und damit interagieren. Der zweite Ansatz ist benutzer- und plattformfreundlicher, kann jedoch zu Inkonsistenzen im Design führen, die Benutzer verwirren, wenn sie die Plattform wechseln, und den Entwicklungsprozess verlangsamen. Für die Neugestaltung von Sing! Haben wir uns entschlossen, eine eigene Stilrichtlinie zu entwickeln, die flaches Design mit Materialdesign kombiniert und dabei die kleinen, aber einzigartigen Unterschiede für jede Plattform beibehält. In diesem Fall wurde das Redesign an den ursprünglichen Charakter von Sing! Angepasst, der erfolgreich Millionen von Nutzern angezogen hat. Basierend auf quantitativen Daten und qualitativen Untersuchungen weisen iOS- und Android-Benutzer Unterschiede in der Produktnutzung auf. Die Beibehaltung des Plattformunterschieds in unserem Styleguide respektiert das Verhalten unserer Benutzer und ermöglicht es uns, unseren hohen Grad an Benutzerbindung beizubehalten.

Quelle: Shutterstock

Die Wichtigkeit der Farbauswahl

Es gibt so viele Möglichkeiten, wie ein Designer eine Farbe für eine Marke und ein Produkt auswählen kann. Durch die Neugestaltung von Sing! Fanden wir heraus, dass die folgenden drei Schritte für uns gut funktionierten.

Schritt 1 - Finden einer Primärfarbe zur Darstellung Ihrer Markenidentität

Wir haben mit der Auswahl einer neuen Farbe begonnen, indem wir verstanden haben, wer unsere aktuelle Benutzergemeinschaft ist und wer unsere zukünftige Zielgruppe ist. Singen! ist eine lustige, skurrile und entzückende App. Die Community ist einladend, ermutigend und begeistert von der Schaffung von Musik. Es zieht Menschen an, die an Selbstdarstellung, Optimismus glauben und gerne individuell und in Zusammenarbeit Musik machen. Als eine der Apps von Smule ist die Persönlichkeit von Sing! ist inklusiv, aufrichtig, optimistisch, erfrischend und fesselnd. Unter Berücksichtigung dieser Charaktereigenschaften untersuchten wir Moodboards, von denen wir glaubten, dass sie diese Gefühle repräsentieren könnten, und wählten eine Grundfarbe für Sing! Dies war nicht das Ende des Prozesses. Die Farbwahl ist sehr subjektiv. Da wir wussten, dass diese Palette von Primärfarben von Bildschirm zu Bildschirm permanent präsent sein sollte, wollten wir ein hohes Maß an Vertrauen haben, dass unsere Benutzer es ansprechend finden und dass es auf jedem Bildschirm „richtig funktioniert“, bevor es fertiggestellt wurde. Wir führten qualitative Tests an neuen Benutzern und bestehenden Power-Benutzern durch, um zu verstehen, wie sie auf die neue Farbe reagierten, wenn sie auf das vorhandene Design angewendet wurden. Dieses Feedback hat uns geholfen, eine bessere Vorstellung davon zu bekommen, was ihnen gefällt und warum nicht. Es gab uns eine klare Richtung für die nächste Runde der Designiterationen.

Schritt 2 - Erstellen einer Farbpalette aus der Primärfarbe

Der zweite Schritt besteht darin, eine Farbpalette aus der Primärfarbe zu erstellen. Ziel ist es, eine Reihe von Farben aus Primärfarben zu erstellen, die von hell bis dunkel skaliert sind. Es gibt verschiedene Möglichkeiten, diese Farbpalette zu erstellen. Unser Ansatz bestand darin, zwei Sätze von Farbmischungen zu erstellen: von der Primärfarbe zu Weiß und von der Primärfarbe zu Schwarz. Für Sing! Haben wir uns entschieden, 8 Schritte zwischen diesen beiden Blends zu setzen. Das Endergebnis war eine Farbpalette mit 19 Farben, einschließlich der Primärfarbe. Dies gab uns eine breite Farbpalette für die gesamte Palette der erwarteten Anwendungen, d. H .: Akzentfarbe, Textfarbe, Symbolfarbe, Teilerfarben und Hintergrundfarbe. Die Akzentfarbe sollte mit der Grundfarbe harmonieren und sich dennoch von selbst abheben. Durch das Sperren der Primär- und Akzentfarbe wird die Grundlage für die Auswahl der Textfarbe festgelegt. Die Textfarbe spielt im gesamten UI-Design eine entscheidende Rolle. Dies wirkt sich auf die Lesbarkeit von Inhalten aus und darauf, wie Benutzer auf Aufrufe von Aktionen reagieren. Wir wissen, dass wir bei der Textfarbe ein ausgewogenes Verhältnis zwischen der Arbeit mit unserer Primärfarbe und dem Kontrast erreichen müssen, um sie hervorzuheben. Die einfachste und sicherste Lösung ist die Auswahl von Schwarz und Weiß, den beiden wichtigsten Farben für Text. Sing! ist willkommen und macht Spaß, und unsere Benutzer sind kreativ und leidenschaftlich, wir hielten die Verwendung von Schwarz und Weiß für etwas langweilig. Daher haben wir unsere Primärfarbenpalette verwendet, um die Textfarbe zu lokalisieren. In mehreren Erkundungs- und Testrunden haben wir drei Farben ausgewählt, um zwischen den Titeln, der Arbeitskopie, dem CTA (Aufruf zum Handeln) und dem Kontexttext zu wechseln.

Nachdem unsere Textfarben festgelegt wurden, haben wir begonnen, die Teilerfarbe, die Navigationsfarbe und die Hintergrundfarbe aus derselben Farbpalette auszuwählen. Da die Textfarben in allen Kontexten hervorstechen müssen, um die Lesbarkeit zu gewährleisten, müssen Kontraste verwendet werden. Und das Umkehren eines dunklen Textfarbtextes aus einem Hintergrund führt zu einer schlechten Lesbarkeit. Daher müssen die Teilerfarbe, die Navigationsfarbe und die Hintergrundfarbe heller sein als die Textfarbe.

Schritt 3 - Die Regeln: Anwenden der Farbauswahl auf Bildschirme

Mit dem Festlegen der Farbverwendungsregel meine ich, dass wir die Primärfarbanwendungen, Akzentfarbanwendungen, Textfarbanwendungen und andere Farbanwendungen für Gestaltungselemente festlegen müssen. Das Fertigstellen Ihrer Farbpalette bedeutet nicht, dass die Arbeit erledigt ist. Es müssen Regeln entwickelt werden, wie diese Farben auf jedes Benutzeroberflächenelement in der App angewendet werden können, während eine klare Informationshierarchie erreicht wird. Ob die in Schritt 1 und 2 ausgewählten Farben wirklich funktionieren oder nicht, hängt von zwei Teilen ab: Wie definieren wir die Anwendungsstandards (die Regeln) und wie funktionieren sie auf jedem Bildschirm ganzheitlich? Wir hatten eine ungefähre Vorstellung von den Schritten 1 und 2, was diese Regel umfassen könnte. Jetzt ist die Zeit, Details hinzuzufügen und die Regeln zu finalisieren. Dies bedeutet auch, zu verstehen, wie Farbe Produktinformationen darstellen kann, wenn sie an der Produktabsicht ausgerichtet sind, und eine Anwendungshierarchie zu erstellen. Sobald wir die Farbnorm festgelegt haben, ist es sehr wichtig, sie zu testen und reales, messbares Feedback von den Benutzern zu erhalten. Das Testen in der Praxis, d. H. Das Anwenden der Farbänderungen auf das vorhandene Design, ermöglichte es uns zu lesen, ob die Farbregel wie beabsichtigt funktioniert oder nicht. Die Ergebnisse lassen uns auch wissen, ob und unter welcher Verwendung wir die Regeln anpassen und optimieren mussten. Um den Testprozess zu beschleunigen, haben wir nicht auf jedem einzelnen Bildschirm Farbregeln getestet. Stattdessen haben wir die Bildschirme ausgewählt, die den meisten Verkehr verursacht haben oder die komplexesten UX- und UI-Muster aufweisen, um den Farbtest durchzuführen. Zu diesem Zeitpunkt mussten zwei Dinge getestet werden. Wenn das Design auf dem Computer funktioniert, bedeutet dies nicht, dass es auch auf Mobilgeräten funktioniert. Dies gilt insbesondere für Android-Telefone. Wir möchten auch testen, wie die Farbe von CTA und die Lesbarkeit von Text auf den Mobilgeräten angezeigt werden. Der zweite Test, den wir durchgeführt haben, war ein Farbenblindheitstest. Wir wollten sicherstellen, dass die Graustufen des neuen Designs von allen gelesen werden können und dass unsere Farbauswahl nicht durch Farbenblindheit beeinträchtigt wird.

Einrichten einer Stilrichtlinie und von Anwendungsregeln

Ein Zweck und eine Konsequenz der Neugestaltung besteht darin, ein skalierbares Gestaltungssystem einzurichten, das auf Grundlage der Informationshierarchie und des Kontexts des Features anzeigt, wie Farben, Schriftarten und Symbole angewendet werden. Dieses System wird dann zur Bibel für zukünftige Konstruktionsbemühungen, wodurch sie effizienter und weniger umständlich werden. Das Definieren der Anwendungsregeln ist ein kritischer Schritt in diesem gesamten Prozess. Wenn wir uns fragen, wie ein erfolgreicher Designstandard aussieht, sollten uns die Regeln in Schach halten, als ob ein Behälter bei sachgemäßer Verwendung kein Wasser verschütten lässt. Die Regeln sollten allgemein genug sein, um alle Fälle der Benutzeroberfläche zu berücksichtigen, sie sollten jedoch auch so eng sein, dass sie die Designer anleiten, die richtigen Entscheidungen zu treffen. Sie sollten ein konsistentes, modulares Framework bieten und dennoch Raum für Kreativität bieten. Sie wirken wie ein Lego-Set. Sie können fast alles andere als innerhalb der Richtlinien für das Verbinden und gegenseitige Abhängigmachen von Blöcken erstellen. Sie können mit Ihren Legos immer noch neues Spielzeug bauen und Ihrer Richtlinie Regeln hinzufügen. Solange Sie weiterhin Verbindungsblöcke aus Kunststoff und Ihre schriftlichen Richtlinien verwenden, können Sie beides überall hin mitnehmen. Sowohl die Richtlinien für die menschliche Interaktion von Apple als auch die Richtlinien für das Materialdesign von Google sind hervorragende Design-Frameworks, die diesem Zweck dienen. Anstatt unterschiedliche Regeln auf die verschiedenen Plattformen anzuwenden, wie wir in den obigen Abschnitten besprochen haben, haben wir beschlossen, eine eigene Stilrichtlinie zu entwickeln, die flaches Design und Materialdesign integriert.

Dieser Ansatz gab uns viel Raum, um unsere Markenidentität in das Redesign einzubeziehen und die UX- und UI-Muster zu entwickeln, die für beide Plattformen geeignet sind, wobei das unterschiedliche Nutzerverhalten jeder Plattform berücksichtigt wurde. Ein Beispiel: iOS- und Android-Materialdesign haben unterschiedliche Sprachen für die Verwendung von Symbolgrafiken. In Sing! Kommt die Hälfte unserer täglich aktiven Nutzer aus internationalen Ländern. Dies bedeutet, dass wir uns bei der Kommunikation der Produktfunktionen auf Symbolgrafiken stützten, um mögliche Fehler in der Textbenutzeroberfläche zu reduzieren. Als kleines Team hat das Erstellen und Produzieren eines Symbols für nur eine Plattform viel Zeit und Energie vom visuellen Designer in Anspruch genommen. Eine einheitliche ikonografische Darstellung hat uns geholfen, uns auf den oben beschriebenen Fall zu konzentrieren und gleichzeitig unsere Entwurfs- und Entwicklungszeit zu verkürzen.

Quelle: Shutterstock

Entwerfen Sie Module und erstellen Sie Bildschirme

Erstellen Sie neue Bildschirme

Dies ist der Moment der Wahrheit. Dies ist der Schritt, auf den die Designer gewartet haben. Viele aufregende und kreative Dinge kommen durch diesen Schritt. Die visuellen Veränderungen, das Erscheinungsbild und die klare Hierarchie lassen das gesamte Produkt aufregend und neu aussehen. Wir haben mit Flinto einen Prototyp erstellt und ihn sowohl unserem Produkt- und Designteam als auch unseren Hauptbenutzern zur Verfügung gestellt und von allen Feedback gesammelt. Durch die Freigabe des Flinto-Prototyps konnten alle Benutzer das neue Design auf ihrem Gerät verwenden und damit interagieren. Es hilft echten Benutzern, das neue Design zu sehen und mit ihm zu interagieren, und entwickelt eine Reihe von Fragen und Rückmeldungen, die behandelt werden müssen, bevor die Entwicklung beginnt.

Arbeiten Sie mit Ingenieuren zusammen, um das Design zu entwickeln

Eines der Ziele bei der Neugestaltung war die Bereitstellung einer skalierbaren Lösung für Designer und Front-End-Ingenieure, um gemeinsam Features zu erstellen. Um dieses Ziel zu erreichen, haben wir standardisierte UI-Module und Spezifikationen erstellt und gemeinsam mit Ingenieuren die Modellnamen und ihre Anwendungen definiert. Wir haben auch mit Ingenieuren zusammengearbeitet, um die UX / UI-Sprachbibliothek aus dem UI-Toolkit in Code zu erstellen. Diese gemeinsame Initiative sparte nicht nur den Designern und Ingenieuren viel Zeit, sondern schuf auch eine solide Grundlage für zukünftige Kooperationen.

QA das Design

Egal wie gut Ihre Ingenieure sind, es besteht die Möglichkeit, dass sie etwas nicht ausgeführt haben, wie die Designer es geplant hatten. Das Geheimnis für die Erstellung eines vollständigen und ganzheitlichen Entwurfs aus einer Skizzendatei besteht darin, eine klar definierte und vereinbarte Entwurfs-QS in den endgültigen Erstellungsprozess einzubeziehen. Der effizienteste Weg, um Design-Absichten zu kommunizieren, bestand darin, mit Ingenieuren zusammenzusitzen und als Paar-Programmierer zu agieren. Der Simulator mit Xcode kann dem Designer helfen, einzelne Bildschirme mit realen Daten auf verschiedenen Geräten wie iPhone 5, iPhone 6, iPhone 7 und iPad gleichzeitig zu sehen. Inzwischen können die Ingenieure die Bildschirme auch in verschiedenen Sprachen gleichzeitig sehen. Durch die Bereitstellung der richtigen Einstellungen aus verschiedenen Sprachen wird auch das Risiko von Fehlern in der Benutzeroberfläche, die durch die Lokalisierung verursacht werden, weiter verringert.

In dieser Phase ist das neue Design versandbereit. Und das ganze Team ist bereit, von unseren Benutzern zu hören, wie sehr sie die neue, frische und entzückende Erfahrung unseres Umbaus und unserer Neugestaltung mögen.

Aber warte ... Das heißt nicht, dass wir fertig sind. Im nächsten Teil werde ich einige Folgeschritte, Informationen nach der Veröffentlichung und zusätzliche Aktualisierungen dieser Neugestaltungsinitiative vorstellen.

Quelle: Shutterstock