Onboarding Design

Basics

Letter of Intent

Design erzeugt bei jedem*jeder Betrachter*in, Nutzer*in, oder Fan immer die first-level Impression und es gibt keine zweite Chance für den ersten Eindruck. Im Design bündelt sich die Essenz aus perfekt durchdachtem Konzept und technischer Exzellenz, verpackt in zweckgebundener Form. Bei uns gibt es kein „schön“ oder „nicht schön“, sondern „funktioniert gut“ und „funktioniert besser“. Dafür braucht jede*r die Objektivität und das Gespür, um zwischen richtig und falsch unterscheiden zu können. Wir arbeiten jederzeit bedürfnisorientiert, mit den Business-Problemen unserer Kund*innen im Input und User*innen-zentrisch im Output. Durch eine zeitgenössische Ästhetik werden unsere Ergebnisse dabei attraktiv und konkurrenzfähig. Durch unser Fachbereich-übergreifendes Verständnis für Workflows und digitale Produkte haben wir eine hohe Eigenverantwortung zur Sicherung der Qualität. In diesem Punkt unterstützen, fördern und fordern wir uns und unsere Kolleg*innen jederzeit – denn geteilter Erfolg ist Team-Erfolg und dafür sind wir hier.

Das Team

Betty Berry	Jörn Beyer	Dominik Bubel	Philipp Hüls	Fee Leitzgen	Lara Rickert
Art Director	Head of Design Interactive	Senior Art Director	Senior Art Director	Junior Art Director	Junior Art Director
betty.berry@parasol-island.com	joern.beyer@parasol-island.com	dominik.bubel@parasol-island.com	philipp.huels@parasol-island.com	fee.leitzgen@parasol-island.com	lara.rickert@parasol-island.com
Düsseldorf	Düsseldorf	Düsseldorf	Düsseldorf	Düsseldorf	Düsseldorf

Tätitgkeitsfeld

Was ist UI-Design

Ein (UI)-Designer konzentriert sich auf die Interaktion und die visuellen Aspekte eines Produkts – wie die Website oder App aussehen wird und wie sie sich verhält. Bevor sich die Designbranche stark auf benutzerorientiertes Design konzentrierte, konzentrierten sich Designer auf allgemeine Funktionalität und Branding. Funktioniert die Seite? Gut. Fallen unsere Markenfarben auf? Fabelhaft. Jetzt erwarten Benutzer jedoch, dass Websites und Apps nahtlos funktionieren und gleichzeitig einzigartig und auffällig sind. Der (UI)-Designer arbeitet daran, die Wireframes zum Leben zu erwecken und Prototypen zu erstellen, die sowohl den Outcome der UX-Designer (Konzept) berücksichtigen als auch alle Anforderungen der Marke und der Zugänglichkeit erfüllen. (UI)-Designer kümmern sich um jedes Detail – von der Typografie bis zur Verwendung von Logos – und stellen sicher, dass sich jedes Projekt, an dem sie arbeiten, vertraut anfühlt und zu anderen Touchpoints (im Kunden Ökosystem) passt. Beispielsweise möchten die Kunden, dass Ihre App, Website und Landing Pages alle zusammenhängend aussehen. Gleichzeitig können (UI)-Designer Innovationen in das Design einbringen. Da sie sich mehr auf die kreative Seite des Projekts konzentrieren können, können sie innovativere Wege finden, um Informationen anzuzeigen, mit dem Produkt zu interagieren und die Erfahrung der Benutzer zu verbessern. Natürlich ist es immer eine gute Praxis, sich mit dem Rest des Design- und Produktteams abzustimmen, um sicherzustellen, dass das Design die Schnittstelle bietet die Ziele der Benutzer zu unterstützen und sie innerhalb der User Journey bestmöglich begleitet.

Wie UX- und UI-Design zusammenarbeiten

Die Leute fragen oft, ob UI Teil von UX ist – und die Antwort lautet ja und nein. Das (User) Interface ist definitiv Teil der (User) Experience, aber ein UX-Designer ist kein UI-Designer – obwohl sie durchaus Vorstellungen vom Fachgebiet des anderen haben können! Obwohl das UI-Design in der Regel ästhetisch ansprechend ist, ist es nicht immer praktisch. Gleichzeitig kann UX-Design praktisch sein, aber optisch nicht ansprechend. Durch die Zusammenarbeit können UX- und UI-Designer Designs entwickeln, die sowohl einfach zu bedienen als auch ansprechend für das Auge sind. Allerdings sind sich Produktdesigner dieser beiden Fachgebiete bewusst und neigen dazu, – bis zu einem gewissen Grad – in beiden Bereichen zu arbeiten.

Quelle und Good Read: What is the difference between UI and UX design?

Kernaufgaben

• Research und Zusammenstellung von Moodboards
• grundsätzliche Stildefinition im Projekt
• Entwicklung von systemischen Designs von Design-Patterns bis hin zu komplexen Design-Systemen
• zielgerichtete Arbeit: nutzerzentriert und on (Re-)Brief
• Dokumentation (als Design Konzept oder) im Gitbook
• Präsentation und Beratung in (Kunden-)Meetings
• Qualitätssicherung mit dem gesamten Projektteam inkl. Plausibilitäts-Check (Wird das Briefing erfüllt? Wird das definierte Ziel erreicht? Stimmt der User-Flow? Bedienbarkeit? ...)
• Assetaufbereitung und File Management

Darüber hinaus folgende Aufgaben, bis zu einem gewissen Grad, im Team erfüllt werden:

• Corporate Design
• Compositing
• Fotografie
• Animation

Die Parasol Tools

Parasol x Google

Den Kern unsere Tool-Palette bilden die gängigen Google-Dienste wie Mail, Drive, Kalender und die zugehörigen Textverarbeitungsprogramme. Diese gewährleisten uns mobil und ortsunabhängig arbeiten zu können.

Der Zugang zum Großteil der weiteren Parasol-Tools erfolgt daher auch mit Hilfe des Google-Logins.

Google Chrome

Zur besseren Anbindung dieser Dienste benutzen wir Google Chrome als Webbrowser. Dieser sollte auf deinem Rechner vorinstalliert sein. Oder Du kannst ihn hier herunterladen.

Essential Tools

Neben den Programmangebot von Google nutzen wir eine ganze Reihe an - teilweise eigen(weiter-)entwickelten Tools, die Du neben Photoshop/Sketch etc. für deinen täglichen Arbeitsablauf benötigst. Im Design-Team sind dies vorrangig diese glorreichen sechs:

Sketch

Alles wissenswerte zu Sketch findest Du hier

Ressourcenplanung

Projekte

Studioleiter plant Ressourcen mit PM/Account im Vorfeld zum Ressourcenmeeting für Projekte (intern wie extern Projekte)
Zeithorizont der Planung: zwei Wochen

Redaktion

Donnerstag: Redaktionsplanung (Alle Markenverantwortliche Redakteure + Studioleiter) im Vorfeld des Ressourcenmeetings
=> Aufwand wird nach Themen geschätzt und auf Design Ressourcen verteilt für kommende Woche durch Studioleiter
Zeithorizont der Planung: eine Woche

Themen werden als Tickets gesammelt und Studioleiter + Vertreter als Beobachter hinzugefügt. Wenn das Briefing aktualisiert wird, wird das Ticket übergeben an Studioleiter (Bei Urlaub an Vertreter).

Zwei Listen im Redmine für Studioleiter + Vertreter:

1. "konkrete Briefingliste" ("Zugewiesenes Ticket)
2. "kommt bald" Liste ("Watcher" Ticket)

- Alle Feiertage (auch gern obskure)
- Design Innovation
- Wettbewerbsanalyse
- ...
=> Design kann unabhängig von konkreter Wochenplanung auch schon weitere Tickets bearbeiten und an Designer weitergeben. Bei "Watcher Tickets" kann der Autor konkret angesprochen werden um die Tasks ohne straffes Timing schon anzugehen.

ASANA / Ticketsystem

Um Übergaben und Briefings so einfach wie möglich zu gestalten und den Projektverlauf für jeden nachvollziehbar zu machen setzen wir hier das Ticketsystem "Asana".

Die Gesamtübersicht zum Thema Asana findest du HIER.

Hier ein kurzer Überblick zum Ablauf und die Handhabung der Tickets, die dabei grundsätzlich für jedes Projekt gleich sind:

• Dir wird das Ticket vom Projektmanager, Kollegen aus der Kreation oder Redaktion zugewiesen.
  
• Das Ticket erscheint nun im Ticketsystem unter "Meine Aufgaben"
  

• Wichtige Fragestellungen, Feedback, Zwischenstände oder natürlich die Finalisierung des Tasks werden innerhalb des Tickets kommuniziert. Dies geschieht über das Kommentarfeld, das sich am Ende des Tickets befindet.
  
• Neben dem Kommentar sind hier die Felder "Status", "Priorität" und "Zugewiesen an" mit den korrekten Parameter zu setzen, damit in der Ticketübersicht wichtige von weniger dringlichen Tickets oder fertiggestellte von sich in Bearbeitung befindlichen Tickets auf einen Blick unterschieden werden können.

Dateianhänge / Google Drive Links

Alle unsere Dateien werden im Google Drive abgelegt. Zur Übermittlung der Daten werden die Freigabe-Links der jeweiligen Ordner oder Einzelbilder (je nach Projektumfang unterschiedlich) in das Kommentarfeld des Tickets eingetragen. Eine Ausnahme bildet hier der Social-Media Retainer von GUHL - hier wird lediglich der Name des Postimages übermittelt.

Design

Layout / Mockup / Pogramme

In unserem Design- bzw Layoutprozess setzten wir auf die Adobe Programmpalette und vermehrt auf Sketch. Jedes Projekt setzt dabei andere Herausforderungen oder Herangehensweisen. Im Vorfeld des Projekts sollte geklärt werden wie Dateien an die Entwicklung - hinsichtlich Asseterstellung, Datenlesbarkeit und Kompatibilität - übergeben werden.

Am Ende eines Projekts steht in jedem Fall eine "saubere", aufgeräumte Arbeitsdatei, die auch von einer dritten Person bearbeitet und verstanden werden kann.

Designkonzept

Das Designkonzept ist unser Werkzeug um dem Kunden unsere visuelle Gestaltung initial vorzustellen und zu erklären. Wir treffen bei jedem Designprozess Entscheidungen, stoßen auf Probleme und lösen diese. Einem fertigen Layout kann man diese Arbeit im besten Fall nicht ansehen. Ohne eine Anleitung oder Erläuterung sind die meisten Kunden mit dem bloßen, fertigen Design allein gelassen und können viele der getroffenen Entscheidungen nicht nachvollziehen oder überhaupt sehen. Das Designkonzept vermeidet diese Unsicherheit und erläutert dem Kunden die getroffenen Entscheidungen, erklärt Abhängigkeiten und weist auf gelöste Probleme hin. Der Kunde versteht so das Design besser und kann so fundierteres Feedback geben.

Hier findest du ein Beispiel für ein Designkonzept zu einer kompletten PENNY Microsite mit Gewinnspielmechanik:

File:PE15I51_151210_PENNY_ZarteReime_Designkonzept.pdf

Die Detailtiefe des Designkonzepts ist dabei natürlich vom Umfang und Komplexität des Projekts abhängig. In manchen Fällen kann auch eine kurze dreiseitige Präsentation völlig ausreichen.

Zudem werden alle Layouts als inVision-Projekt angelegt. Dieses dient als Feedback-Medium für den Kunden. Nachdem das Designkonzept freigegeben wurde werden alle weiteren Stände und zusätzlichen Layouts IMMER über inVision abgestimmt. Es werden KEINE einzelnen JPGs, PNGs, ... zur Abstimmung rausgeschickt.

Export

Der Export, bzw. die Übergabe an das Development muss frühzeitig im Gestaltungsprozess besprochen werden. So können Dateien direkt in der Anfangsphase korrekt aufgesetzt werden.

Wichtige Fragen sind hier:

• Können die Developer mit meiner Arbeitsdatei (Photoshop / Sketch) etwas anfangen?
• Wer spielt die Assets aus?

Dateiablage

Nomenklatur

Generell

Alle Projekte, Ordner und Dateien werden in einer einheitlichen Namenkonvetion angelegt.

Diese setzt sich zusammen aus einer Abkürzung des Kundennamens, der zweistelligen Jahreszahl, dem Kürzel des Departments (3 bzw. 1 Zeichen lang) und der fortlaufenden Projektnummer. Im Anschluss folgt die genauere Bezeichnung des Projekts, Datei o.Ä..

• [KUNDE][JAHR][DEPARTMENT][PROJEKTNUMMER]_[BEZEICHNUNG]

Beispiel Weihnachtsprojekt für Penny 2015:

• PENNY15_INT46_Weihnachten_2015

Postimages

Die Postimages bilden hier eine Besonderheit. Diese versehen wir mit dem Kundennamen, dem aktuellen Datum der Erstellung, den Initialen des Designers (Vorname Kleinbuchstabe, Nachname Großbuchstabe) und dem Postimage-Thema.

Beispiel Weihnachtspost für Penny von Jörn Beyer, erstell am 18.12.2015:

• PENNY_151218_jB_frohe_weihnachten

Ordnerstruktur

Die gesamte Dateiablage im Interactive-Department findet auf dem Google-Drive statt.

Zu Beginn eines Projekts bekommst du einen Freischaltungslink zum Arbeitsordner. Diesen Ordner solltest du zu "Meinem Drive hinzufügen".

Diese Ordner beinhaltet alle Dateien, die du für das Projekt benötigst.

Dein Arbeitsordner wird der Designordner sein. Dieser beinhaltet folgende Unterordner:

• KUNDE16I01_01_Moodboard
  Hier kommt alles rein, was du im Vorfeld zum Projekt an Inspiration recherchierst und zusammen trägst
  
  
• KUNDE16I01_02_Layouts
  Dies ist der Hauptordner für deine Layouts. Die Arbeit mit Sketch oder eine komplexere Designarbeit können hier die Erstellung eigener Unterordner fordern, die Benennung erfolgt wiederum Anhand der gängigen Nomenklatur.
  
  
• KUNDE16I01_03_AdditionalLayouts
  In diesen Order kommt alles, was an zusätzlichen Layouts rund um das Projekt anfällt und sich vom Hauptlayout ableitet (Slider, Banner etc.)
  
  
• KUNDE16I01_04_Mockups
  Du hast zusätzliche Animationen erstellt, die den Ablauf einer Microsite erläutern oder beispielhaft eine HTML-Animation mit After-Effects nachgebaut? Dann kommt es hier rein.
  
  
• KUNDE16I01_05_Designkonzept
  Die Ablage der Keynote und des PDFs
  
  
• KUNDE16I01_06_Export
  Hier werden nur die aktuellsten Assets abgelegt, die für das Development benötigt werden. Dementsprechend müssen die Daten die Anforderung für die Programmierung erfüllen und beachten. Alle was in diesem Ordner ist, ist final - hier existiert kein _archive!
  
  

Archive

Jeder Unterordner beinhaltet zudem en Ordner "_archive". Dieser ist das Archiv für alle vorangegangenen alten und korrigierten Layouts.

Am einfachsten hälst du hier Ordnung indem du alte Layouts in Unterordner mit dem jeweiligen Erstellungsdatum steckst.

Dieser Ordner ist immens wichtig, um den Überblick über den Projektverlauf zu wahren und um im Nachhinein Änderungen nachzuvollziehen oder auch auf ältere Versionen zurückzugreifen.

Postimages

Die Postimages unterliegen bei uns ihren eigenen Regeln. Hier arbeiten wir eng mit unserem Redaktionsteam zusammen, das hier teilweise den Part des Projektmanagments übernimmt.

Aufgrund der Masse an Postimages gibt es für Images rund die sog. "Social-Retainer" ein eigenes Ablagesystem.

Der Hauptordner befindet sich im Google-Drive auf der obersten Ebene:

_Facebook_Images

Der Ordner ist in einzelnen Kundenordner unterteilt.

Hast du ein neues Image angelegt:

• wird es in den jeweiligen Hauptordner des zugehörigen Kunden abgelegt
• es werden immer die PSD und die PNG Dateiabgelegt
• --> besteht ein Posting aus mehreren zusammengehörigen Files (Canvas Ads, After Effects Projekte, etc.) werden diese in einem Überordner zusammengefasst und nach der gängigen Nomenklatur benannt
• die PNG darf nicht größer als 1024kb sein (damit Facebook nicht eine weitere Komprimierung mit erheblichem Qualitätsverlust durchführt)

Die weitere Ordnerstruktur gliedert sich wie folgt:

_Archiv:
nachdem ein Image gepostet wird, verschiebt die Redaktion die PNG und PSD ins Archiv.

_in Progress:
dieser Ordner enthält Images die in Arbeit sind. Das ist besonders interessant für diejenigen die nur an wenigen Tagen in der Woche da sind und ggf. ihr gestartetes Projekt an jemand anderes übergeben.

_Material:
bislang geisterten diverse Ordner durchs Drive, die Ideen oder Bildersammlungen beinhaltet haben. Diese sind nun zur jeweiligen Brand zugeordnet.

_Page Like Ads:
der Ort für Page Like Ads. weitere Unterordner für Headerbilder und Profibilder sind denkbar.

_Templates:
ein besonders wichtiger Ordner. Sobald ein Grafiker ein neues Template erstellt hat und der Kunde die Freigabe erteilt hat, muss der DESIGNER die AUFGERÄUMTE PSD in den Templateordner verschieben. Diese Dateien sollen nun an als saubere Mastervorlage dienen.

_vom Kunden freigegeben:
in diesem Ordner befinden sich alle freigegeben Images, die darauf warten gepostet zu werden. Verschiebung der Daten durch die Redaktion

Urlaubsübergabe & -vertretung

Urlaubsübergabe

Bevor Du in deinen wohlverdienten Urlaub segelst, musst Du sicher stellen, dass Deine Projekte auch in Deiner Abwesenheit bestmöglich betreut und fortgeführt werden können.

Eine gut gepflegte Ticket-History in Asana hilft jedem alle wichtigen Schritte im Projekt nachvollziehen zu können.

Darüberhinaus gibt es natürlich viel mehr Wissen und zB mündliche Absprachen über die nur Du selbst am Besten Bescheid weißt.

Je nach Projektgrößen macht hier ein Übergabemeeting zusammen mit dem zuständigen Project-Owner und Deiner Urlaubsvertretung Sinn.

In jedem Fall solltest du auch eine kurze Übergabemail an Deine Vertretung, Teamlead und Head senden. In diese Mail packst du alle für Dich wichtigen Informationen, die es Deiner Vetretung ermöglichen auf einem gleichen Kenntnisstand in das Projekt einzusteigen.

Urlaubsvertretung der Studioleitung

Der Stellvertreter übernimmt die Aufgaben der Studioleitung.

• Ressourcenplanung (Projekt & Redaktion)
• Verteilung der Tickets via Asana
• Ansprechpartner für Freelance Buchung (Bedarfsermittlung, Design Onboarding, Projektfit)
• Abwesenheitsnotiz für Mitarbeiter via absence@parasol-island.com
• QS nach Bedarf
• ACHTUNG: Urlaubsfreigabe erfolgt Departmentleitung / ggfls. persönlich Ansprechen ;)

Für das Team Design bedeuetet dies:

Ist Jörn Beyer im Urlaub, übernimmt Philipp Hüls in dieser Zeit vollumfänglich seine Aufgaben.

Sollte der seltene Fall eintreten, dass beide gleichzeitig im Urlaub sind gilt folgender Ablauf:

1. Ein Vertreter wird bestimmt
2. In einer kurzen Formlosen Mail wird der Urlaubszeitraum und Vertreter der Studioleitung an Fachbereichsleiter kommuniziert und der Workflow integriert