Design

Note: Haftungsausschluss

Vor dem Lesen: Diese Lernaufgaben zielen darauf ab, Sie mit der Verwendung und Funktionsweise von Jutro vertraut zu machen. Sie sind nicht dazu gedacht, Ihre Fähigkeiten als Designer zu testen.

Verwendung

Low-Fidelity-Bildschirme skizzieren

Skizzieren Sie ausgehend vom Benutzerablauf und den besonderen Merkmalen des Produktmodells (vorherige Designphase) 3 bis 4 Low-Fidelity-Bildschirme mit Stift und Papier oder einem digitalen Whiteboard-Tool wie z. B. Miro oder Balsamiq.

Note: Bevor Sie beginnen

• Konzentrieren Sie sich auf drei bis vier Bildschirme und berücksichtigen Sie dabei einen spezifischen Schritt oder eine Reihe von Schritten in dem zuvor erstellten Benutzerablauf.

• Nehmen Sie an, dass Olivia (Endbenutzer) den Angebots- und Abschlussprozess startet (d. h. es ist keine Startseite oder Anmeldung erforderlich).

Tip: Balsamiq bietet eine kostenlose Testversion an. Wenn Sie Zugriff auf Confluence haben, können Sie Balsamiq, wie hier gezeigt, auch kostenlos verwenden.

Nachfolgend ein Beispiel für mit Balsamiq erstellte Wireframes für mobile Anwendungen.

Note: Bei dieser Lernaufgabe wird von Ihnen nicht erwartet, dass Sie so detaillierte Drahtmodelle wie die oben gezeigten erstellen. Ziel ist nur, auf Papier oder digital grobe Skizzen anzufertigen.

Automatisch generierten Ablauf in Jutro prüfen

Stellen Sie sich vor, das Produktimplementierungsteam, das an diesem Projekt arbeitet, bringt Ihnen einige automatisch generierte Jutro-Bildschirme, die auf dem Produktmodell von Advanced Product Designer (APD) basieren.

Note: Wissenswertes

Der Frontend-Code der automatisch generierten Bildschirme basiert auf dem Advanced Product Designer von InsuranceSuite. Er bietet Entwicklern einen funktionierenden Angebots- und Abschlussablauf sowie Überlegungen zum UX/UI-Design.

Laden Sie die folgende Figma-Datei herunter und überprüfen Sie die automatisch generierten Bildschirme:

Automatisch generierte Bildschirme (177 KB)

Designoptimierung

Benutzerablauf und Skizzen aktualisieren

Überarbeiten Sie Ihre Benutzerabläufe und groben Designskizzen basierend auf den Erkenntnissen aus dem Produktmodell und den automatisch erstellten Bildschirmen, die Sie überprüft haben.

Zu berücksichtigende Punkte:

• Was würden Sie in Ihrem Benutzerablauf und den skizzierten Bildschirmen ändern?
• Berücksichtigen Sie Benutzerszenarios basierend auf dem Produktmodell und den automatisch generierten Bildschirmen.
• Konzentrieren Sie sich nur auf 3 bis 4 Bildschirme (oder einen bestimmten Teil Ihres Benutzerablaufs).
• Lesen Sie die Legende des Produktmodells und überlegen Sie, wie die Markierungen in der Benutzeroberfläche angepasst werden können und wie sie in der Benutzeroberfläche für Angebot und Abschluss angezeigt werden können.
• Denken Sie über verschiedene Möglichkeiten der Benutzeroberfläche nach.
• Überlegen Sie, wie sich die in Jutro automatisch generierten Bildschirme auf die für Ihr Design erforderlichen Typen von Komponenten und Mustern auswirken.
• Überlegen Sie sich, wie sich die Benutzeroberfläche, die in den automatisch generierten Bildschirmen zu sehen ist, verbessern lässt.

Tip: Automatisch generierte Bildschirme ermöglichen Ihnen, zwei Perspektiven zu bedenken:

• Die Leistungsperspektive: Sie müssen Aspekte wie Verarbeitungszeiten berücksichtigen, die je nach Seitenlänge unterschiedlich sein können. Ein potenzieller Versicherungsnehmer, der über langsameres Internet verfügt, wird sich wahrscheinlich für ein Versicherungsunternehmen entscheiden, das einfache Seiten verwendet (einige wenige Sekunden Ladezeit können über die Benutzererfahrung entscheiden).

• Die Produktmodellperspektive: Definiert, wie die Benutzeroberfläche basierend auf der Mind Map des Produktmodells und dem jeweiligen Benutzertyp organisiert werden kann.

  • Das Überprüfen des Produktmodells kann Sie dazu veranlassen, den in einem der automatisch generierten Bildschirme erfassten Ablauf neu zu formatieren. Sie könnten z. B. zu dem Schluss kommen, dass auf der Seite (oder in dem Schritt) mit den Deckungsobjekten jeweils eine separate Seite (oder ein separater Schritt) für die einzelnen Deckungskategorien (Gebäude, Fahrzeuge, Erntebestand, Viehbestand) erstellt werden sollte.
  • Ebenso können Sie darüber nachdenken, wie sich der Preis je nach Benutzertyp (Bestandskunde) oder der ausgewählten Deckung ändert.

In einem realen Designprojekt müssen solche Designüberlegungen mit dem Produktmanager, den Business Architects und Business Analysts, Entwicklern und anderen am Projekt beteiligten Stakeholdern besprochen werden.

Einen High-Fidelity-Bildschirm mit Jutro in Figma entwerfen

In diesem Abschnitt wird der Prozess des Designs von High-Fidelity-Bildschirmen in Jutro mit Figma erläutert.

In einem früheren Schritt dieser Lernaufgabe haben Sie Lo-Fi-Skizzen für Ihren Bildschirmablauf erstellt. Wählen Sie mit Figma ein bis drei dieser Bildschirme aus, und übertragenb Sie sie in die Benutzeroberfläche des Jutro Design Systems.

Das Guidewire UX-Team hat diese Seite für landwirtschaftliche Versicherungen entworfen, um Olivia (unsere Benutzerin) den Einstieg in den Angebots- und Abschlussprozess zu erleichtern.

Greifen Sie zunächst auf die Design- und Markenressourcen zu.

Sie haben Zugriff auf Folgendes:

• Markenrichtlinien des fiktiven Versicherungsunternehmens FutureState als Beispiel in dieser Lernaufgabe.
• Symbole und Bilder, die für die Gestaltung der Seite „Let's get started!“ in dieser Aufgabe verwendet werden.

Die Design- und Markenressourcen finden Sie hier.

Hinweis: Sie können die Figma-Datei kopieren, um sie zu bearbeiten.

Bevor Sie beginnen, sind einige Konzepte und Grundlagen von Jutro zu beachten.

Aufbau einer Jutro-Anwendung

Eine Standard-Jutro-Anwendung hat einen hierarchischen Aufbau. Jedes Stück baut auf dem vorherigen auf.

Note: Wissenswertes

• Grundrisse können auch seitenweise festgelegt werden.
• Mit Widgets können Inhalte schnell und responsiv blockiert werden. Alle Widgets sind in Hinblick auf die Mindestbreite responsiv, die maximale Breite wird jedoch mit „colspans“ auf das Raster festgelegt.
• Gängige Muster für Versicherungen (z. B. Kontoaktualisierung und Policenliste) können schnell auf der Seite in den Widgets eingefügt werden.

Schritt 1: Beginnen mit dem Grundriss und dem Layout

Note: Erinnerung

In dieser Lernaufgabe konzentrieren Sie sich auf ein bis drei skizzierte Bildschirme, die Sie in die Benutzeroberfläche des Jutro Design Systems übertragen.

Note: Wissenswertes

Jutro-Grundrisse sind einsatzbereite ganzseitige Vorlagen zur Organisation von Kopfzeile, Fußzeile, Navigation und Inhalten. Sie beinhalten die Form, das Layout und die Komponenten, die am besten zu den Anforderungen Ihrer Anwendung passen. Grundrisse fördern eine einheitliche Gestaltung der Benutzeroberfläche.

Jutro umfasst derzeit vier verschiedene Grundrisse, die für gängige Anwendungsfälle ausgerichtet sind:

Inhaltslayouts bestimmen die Spaltengrößen für Komponenten im Hauptinhaltsbereich. Fünf Layoutoptionen sind verfügbar:

Weitere Informationen zu Grundrissen und Layouts finden Sie hier hier.

• Öffnen Sie Figma und erstellen Sie eine neue Designdatei.

• Fügen Sie im leeren Erstellungsbereich einen neuen Rahmen ein.

• Ziehen Sie einen Jutro-Grundriss per Drag & Drop aus der Figma-Bibliothek von Jutro. Im Folgenden finden Sie ein Video, das den Prozess der Erstellung einer Benutzeroberfläche mit Jutro in Figma veranschaulicht.

• Wählen Sie einen Grundriss aus, der dem Layout Ihrer früheren Mockups entspricht.

Weitere Informationen zu Grundrissen und Layouts finden Sie hier.

Die Beispielseite für Angebot und Abschluss enthält einen Grundriss in I-Form. Unten sehen Sie eine Abbildung des Figma-Rahmens, nachdem der Standardgrundriss in I-Form für Desktopgeräte abgelegt wurde.

• Passen Sie den Inhalt der Navigation für die Fußzeile, Kopfzeile und untergeordnete Kopfzeile an.

Nehmen Sie abhängig von den ausgewählten Seiten die erforderlichen Anpassungen vor, damit der Grundriss mit dem allgemeinen von Ihnen festgelegten Layout und der Struktur der Anwendung übereinstimmt.

Verwenden Sie die Branding-Richtlinien (z. B. Farben und Typografie) aus den herunterladbaren Design- und Branding-Elementen

Hinweis: Sie können die Figma-Datei kopieren, um sie zu bearbeiten.

Die Navigation für die Kopfzeile und die untergeordnete Kopfzeile des Standardgrundrisses in I-Form umfasst Inhalte, die für die Beispielseite nicht erforderlich sind.

Schritt 2: Aktivieren des Jutro-Ebenenrasters

• Aktivieren Sie das Jutro-Ebenenraster, damit sich die Komponenten leichter ausrichten lassen, die Sie auf die Seite(n) ziehen. Verwenden Sie dazu folgende Mac-Tastenkombination: Control + G

Nach dem Aktivieren des Ebenenrasters kann Ihre Seite je nach ausgewähltem Grundriss und Layout wie eine der folgenden Seiten aussehen.

Siehe nachfolgend das aktivierte Raster für den Grundriss in I-Form auf der Beispielseite.

Schritt 3: Ziehen der Komponenten und Muster auf die Seite per Drag & Drop

In diesem Schritt füllen Sie den Hauptteil der Seite(n) mit Jutro-Komponenten.

Note: Wissenswertes

Was sind Jutro-Komponenten?

• Die granularsten Bausteine von Jutro-basierten Anwendungen.
• Können mit anderen Komponenten kombiniert werden, um größere Blöcke zu bilden (wie ein Formular).
• Sie bieten maximale Flexibilität.

Beispiele: Schritte, Schalter, Formularfelder, Schaltflächen, Karten.

Was sind Jutro-Muster?

• Mit Mustern soll der gesamte Design- und Entwicklungsaufwand reduziert, die Produktkonsistenz maximiert und die Geschwindigkeit erhöht werden, mit der Produkte zusammengestellt werden können.
• Sie sind eher präskriptiv und sorgen für mehr Konsistenz
• Es handelt sich um eine Sammlung von Jutro-Komponenten zur Erfüllung wiederkehrender Anforderungen, z. B. die Übermittlung der Schadenerstmeldung oder die Aktualisierung von Kontodetails.
• Sie enthalten alle interaktiven Komponenten, die Benutzer zur Ausführung einer bestimmten Aufgabe benötigen.

Beispiele: Hinzufügen eines Fahrzeugs, Abrechnungsliste, Schadendetails, Schadenfälle.

Hier können Sie sich die Jutro-Komponenten und -Muster ansehen.

• Sehen Sie sich basierend auf den ausgewählten Bildschirmen die verfügbaren Komponenten in der Figma-Bibliothek von Jutro an, und ziehen Sie sie in den Rahmen Ihrer Seite in Figma.

• Mit dem Ebenenraster können Sie die Komponenten optimal ausrichten.

• Verwenden Sie globale Themes für die Komponenten und Stile auf Komponentenebene, damit die Seite den Branding-Richtlinien des fiktiven Versicherungsunternehmens FutureState entspricht, die hier verfügbar sind.

Es folgt ein Demo-Video mit den wichtigsten Schritten zum Ausfüllen und Gestalten einer Beispielseite.