SlideShare ist ein Scribd-Unternehmen logo
SS 2010
D.I.Y. – Prototypische Designprozesse




PROJEKT

FH D SHOWROOM

TEILNEHMER

Frederik Schmitz
Marina Lang
Paul Becker
Sara Appenrodt
Tristan Dransmann




DOZENTEN

Axel Quack
Michael Zirlewagen
1. Auflage ® 2010
                                                                               Papier, Druck, Fertigstellung:
                                            Buch Gestaltet von:
                                                                               Sara Appenrodt
Gruppe SHOWROOM FH D                        Sara Appenrodt
Sommersemester 2010
                                                                               Der Text wurde gesetzt in der Courier
Hypermedia 1 [01.12.02]                     Fotografie von:
D.I.Y. – Prototypische Designprozesse       Paul Becker, Tristan Drannsmann,
                                                                               Geschrieben von:
                                            Sara Appenrodt
                                                                               Sara Appenrodt, Marina Lang
Dozenten: Axel Quack & Michael Zirlewagen
                                            Website Layout von:
                                                                               Korrektur gelesen von:
Das Buch wurde eigenstänig produziert       Tristan Dransmann
                                                                               Marina Lang
Design




Dieses Buch ist unterteilt in 5 Sektionen:              Team
1 FH D Showroom- unser Ausgangsprojekt,
welches wir Schritt für Schritt umsetzen,
2 Team- dessen Zusammensetzung, 3 Schritte                         FH D
                                                                   SHOWROOM      Strategie
zum Erfolg, 4 Strategie und anschließende
5 Umsetzung Ergebnis und Präsentation,
  Nachwort


                                             Nachwort




                                                                       Prozess
                                                        Ergebnis
INHALTSVERZEICHNIS




1 FH D SHOWROOM      2 TEAM               3 DESIGN              4 STRATEGIE             5 PROZESS
5 Kursbeschreibung   8 Teambildung        18 Ideenfindung       34 Zielgruppendefini-   38 Empathy Map
                                                                   tion
6 Definition FH D    10 Teamvorstellung   20 Geschäftsmodell                            42 Struktur und
  Showroom                                   erste Überlegung                              Layout durchplanen
                     14 Stärken und
                        Schwächen eines   26 Business Model                             46 Prototyping
                        Teams                Canvas                                        Wireframes

                                                                                          Ergebnisse und
                                                                                          Präsentation

                                                                                          Glossar
                                                                                          Quelle und
                                                                                          Verweise
KURSBESCHREIBUNG

5

    „Die Agenturlandschaft befindet sich im
    Umbruch, bisher eingesetzte
    Rollendefinitionen und Produktstrategien
    werden durch innovative prototypische
    Methoden ersetzt. Infolgedessen erweitert
    sich das Spektrum eines Designers auch um
    Aufgabenbereiche wie strategische Beratung
    und Konzeption.“           AXEL QUACK & MICHAEL ZIRLEWAGEN




                       „Im Kurs wird die Technik vermittelt,
                       eigene Ideen durch agile Designprozesse in
                       digitalen Medien umzusetzen. Nach der
                       Maxime „fail early, fail often“ werden
                       Verfahren, wie z. B. Visual Thinking,
                       Storytelling und Wireframes realisiert.
                       Der Kurs wird als D.I.Y. Workshop
                       abgehalten, um einen starken Praxisbezug
                       zu garantieren“                           Ziteiert aus fhd0001_Einführung.pdf von Micheal Zirlewagen & Axel Quack
KURSBESCHREIBUNG UND                                               6

DEF_FH D SHOWROOM




KURSBESCHREIBUNG:

Zur Aufgabe nehmen wir uns die Umsetzung einer Geschäftsidee.
Hierzu gehört die Bildung eines kompetenten Teams, die
Ideenfindung und deren Konzeptvertiefung, die Wahrnehmung der
Zielgruppe und das anschließend konforme Arbeiten mit dieser
Zielgruppe. Des Weiteren werden wir die Idee mit Hilfe von
Empathy Maps und prototypische Wireframes zu einem volständigen
Layout umsetzen.

DEF_FH D SHOWROOM:

Der FH D Showroom macht es möglich eigene Projekte, Ideen und
Konzepte, die für die Fachhochschule oder auch privat erstellt
wurden zu veröffentlichen. Gleichzeitig hat jeder Teilnehmer die
Möglichkeit zu sehen, was seine Kommilitonen innerhalb eines
Semesters machen oder gemacht haben. Jeder Teilnehmer kann sich
somit weitere Feedbacks und Ratschläge einholen.
Es besteht ein Diskussionsforum sowie die Möglichkeit
hochgeladene Bilder, Videos oder Audiodateien positiv zu
bewerten.
w




    TEA
AM
DAS TEAM

7




               „Zusammenkommen ist ein Anfang.
               Zusammenbleiben ist ein Fortschritt.
               Zusammenarbeiten ist ein Erfolg.“ HENRY FORD
DAS TEAM                                                           10




TEAMBILDUNG:

Wir haben eine Art speed-dating durchgeführt, in welchem wir
uns untereinander kennenlernen sollten, um später nicht dem
Schicksal ausgesetzt zu sein mit uns unsympathisch
vorkommenden Personen arbeiten zu müssen. Ziel dieser
Gruppenbildung war es, dass nicht gleichgut qualifizierte
Personen im Gruppenverband dominieren. Die Anzahl jeder Gruppe
ist auf fünf Geschöpfe begrenzt.

Unsere Gruppe wird bestimmt durch Tristan Dransmann, Paul
Becker, Frederik Schmitz, Marina Lang und Sara Appenrodt

Wir betiteln uns erstmalig mit ‚SHOWROOM FH D‘ und begeistern
uns für die Idee, eine Plattform für die Fachhochschule zu
erschaffen, auf welcher jeder immatrikulierter Student sich sein
eigenes Profil anlegen kann, in welchem er seine
Semesterarbeiten posten kann.
TEAMVORSTELLUNG                   12




FH D
showroom




           FREDERIK SCHMITZ
           frederik.schmitz@googlemail.com

           MARINA LANG
           marinalang@arcor.de

           PAUL BECKER
           paul.becker@paul-bk.de

           SARA APPENRODT
           sxara@gmx.de

           TRISTAN DRANSMANN
           info@dransmanndesign.de
STÄRKEN UND SCHWÄCHEN EINES TEAMS

13
STÄRKEN UND SCHWÄCHEN                                             14

EINES TEAMS




Unserer Selbsteinschätzung zufolge sind wir begabt in den
Gebieten Illustration, Texten und Gestaltung. Außerdem können
wir gut mit Kritik umgehen. Des Weiteren weisen einige Personen
Erfahrung in Agenturarbeit sowie in Fotografie auf. Einstimmige
negative Attribute waren Chaos, Zeitmanagement und
Programmierung.
DESI
IGN
IDEENFINDUNG

17



                                                      „Brillante Ideen sind
                                                      organisierbar.“    JULIUS ROBERT OPPENHEIMER (1904-67)




     „Die Idee ist das Absolute, und alles
     Wirkliche ist nur Realisierung der Idee.“
     GEORG WILHELM FRIEDRICH HEGEL (1770-1831)




                                                 „Die erfolgreichsten Konzepte bestehen
                                                 häufig aus neuen Kombinationen bereits
                                                 bestehender Ideen.“ JASON JENNINGS
IDEENFINDUNG                                                      18




Aus Neugierde, was unsere Kommilitonen an der Fachhochschule
Düsseldorf innerhalb ihrer Kurse für Projekte gestalten,
haben wir uns dazu entschieden als Geschäftsidee einen Showroom
für die Fachhochschule Düsseldorf als Grundkonzept zu nehmen.
Wir sind daran interessiert, dass alle Studierenden des
Fachbereichs eins und zwei (Design und Architektur) ihre
Projekte und Werke fachhochschulintern veröffentlichen können
und dürfen. Es ist nahezu eine Schande, dass unzählige
Projekte nach ihrer Präsentation im Kurs in irgendwelchen
Kellern und Speichern dahinvegetieren. Wir wollen mit dieser
Plattform eine Art Portfolio schaffen, welches sich jeder
Student untereinander anschauen und auch bewerten kann.
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

19
DAS GESCHÄFTSMODELL                                               20

ERSTE ÜBERLEGUNGEN




Wir haben ein Brainstorming zu unserer Geschäftsidee
durchgeführt und dieses schriftlich festgehalten. Dabei
haben wir uns Gedanken über die Funktion des Showrooms und
deren technische Umsetzung gemacht und uns überlegt, ob wir den
Showroom hochschulintern oder auch hochschulübergreifend mit
Agenturen vernetzen wollen. Wir sind zu dem Entschluss
gekommen, es erstmalig hochschulintern umzusetzen. Wir haben
grob festgelegt, welche Menüpunkte die Website aufweisen soll.
Uns war es wichtig, dass jeder Teilnehmer des Showrooms all
seine Projekte (Video, Audio, Foto) hochladen kann.
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

21                                              Ideation

                                                Die Ideenfindung sah wie links abgebildet
                                                aus.
                                                Wir haben uns bereits erste Gedanken
                                                über viele zugehörige Faktoren gemacht,
                                                die die Planung einer Website mit sich
                                                bringt. Dazu zählen unter anderem die
                                                technische Umsetzung und Programmierung,
                                                die Vermarktung und Präsentation und die
                                                regelmäßige Wartung und Pflege dieser
                                                Website.
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

                                           22a
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

23
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)
Zusätzlich haben wir die weiteren                                                      24
notwendigen Wünsche und Vorhaben
bezüglich unserer Geschäftsidee
schriftlich innerhalb der Gruppe auf
kleinen farbigen Kärtchen festgehalten
und diese an der Wand
positioniert.

Als besonders notwendig empfanden wir,
dass jeder Teilnehmer sich sein eigenes
Profil erstellen kann, wo er selbst
entscheiden kann, was er hochladen
möchte. So entstehen viele verschiedene
Galerien von mehreren Teilnehmern.
Über dies hinaus haben wir eine
Jahresgalerie als weiteren Faktor
hinzugefügt, in welcher jedes Jahr die
besten Projekte gezeigt werden. Wir haben
uns entschieden, dass man hochgeladene
Projekte kommentieren und ausschließlich
positiv bewerten kann, so entsteht ein
Ranking mit einem eventuellen Wettbewerb
und Trendbarometer untereinander.
Zusätzlich haben wir überlegt, mit wel-
chen schon vorhandenen Netzwerken man
unseren
Showroom vernetzen kann. Als Idee kam uns
Studi.vz, Facebook und ähnliche
Netzwerke.
BUSINESS MODEL CANVAS

25



                             “There’s not a single business model...
                             There are really a lot of opportunities
                             and a lot of options and we just have
                             to discover all of them.” TIM O‘REILLY
                                                                       45
                                                                            }
BUSINESS MODEL CANVAS                                             26




Wir unterteilten unser Plakat unter Vorlage des Canvas Model in
Partnernetzwerk, Schlüsselaktivität, Schlüsselressourcen,
Kostenstruktur, Einnahmequelle, Kundenbeziehung, Angebot,
Distributionskanäle sowie Kundensegmente.
BUSINESS MODEL CANVAS

27
BUSINESS MODEL CANVAS

                        28
BUSINESS MODEL CANVAS

29
BUSINESS MODEL CANVAS
Business Modell Canvas                                                                30

Unter Partnernetzwerk führten wir Shop/ Schwarzmarkt und
die automatische Anmeldung bei der Einschreibung auf.
Später kamen wir zu dem Entschluss, dass wir den zweiten
genannten Punkt nicht ausführen wollen, da wir der Meinung
sind, dass nicht alle Studenten sich ein Profil im Showroom
erstellen wollen. Dies soll jedem Studierenden
freigestellt aber dennoch einfach ermöglicht werden.
Unter Schlüsselaktivitäten sehen wir Vernetzungen. Weitere
Punkte, die ebenfalls unter dem Begriff Angebot aufzunehmen
sind, sind Jahresgalerie, Jobbörse, Projektaustausch und
Projektarbeit. Wir bieten außerdem Comments,
Ausschreibungen und ein Trendbarometer an. Es herrscht
demnach ein interner Wettbewerb. Jeder Student hat die
Möglichkeit sein eigenes Profil zu erstellen und dem
Showroom und Gruppen beizutreten.
Als Kundenbeziehung bieten wir ein Forum, eine Community
und Random Funktionen an. Das Forum und die Community
haben wir nach Überlegungen jedoch wieder entfernt.
Spätere Ergänzungen hierzu waren Feed und Emailverteilung.
Distributionskanäle sind vor allem Flyer und Poster, sowie
die FH Website, Facebook applications, Studi.vz und
Facebook.
Kundensegmente werden bestimmt durch Studenten und Profes-
soren. Mögliche Arbeitgeber sind Agenturen. Wir stellen
uns außerdem ein Sharesystem von diversen Hochschulen vor.
Mögliche Einnahmequellen sind Provisionen, Veltins Sponso-
ring, Tombolas, Ausstellungen, Partys, Werbung,
FH Merchandising und T-Shirts.
Kosten dagegen ergeben sich durch Programmieraufgaben, die
wir nicht eigenständig bewerkstelligen können, regelmäßige
Pflege und Marketing und die Anmietung der Räume, wobei wir
letztlich zu dem Ergebnis kamen, dass wir innerhalb der
Fachhochschule Düsseldorf einige Räume zu Verfügung haben.
STRAT
TEGIE
ZIELGRUPPENDEFINITION

33
ZIELGRUPPENDEFINITION                                             34




Wir haben uns mit der potenziellen Zielgruppe beschäftigt.
Hauptsächlich gilt unser Projekt den Designstudenten der
Fachhochschule Düsseldorf. Inbegriffen sind Architekten,
Kommunikationsdesigner und Produktdesigner (Schmuckdesign). Wir
haben uns somit die Fragen gestellt, was sie auf unserer Seite
sehen, was sie sehen möchten und was von unbedingter
Notwendigkeit ist. Und haben versucht deren Wünsche und
Vorstellungen zu bedenken um diese umzusetzen. Wir haben
hierbei vergleichbare Showrooms und Netzwerke beiseite gezogen
um zu sehen, was diese für Kategorien und Menüpunkte zeigen.

Wir haben bedacht, dass wir für den Start des Showrooms schon
Projekte zeigen müssen, damit das Interesse der zukünftigen
Zielgruppe geweckt wird. Da wir den gesamten Fachbereich Design
(Kommunikationsdesign, Produktdesign und Architektur) der
Fachhochschule Düsseldorf abdecken wollen ist es unbedingt
notwendig, dass wir beim Publizieren der Website bereits schon
Projekte von den verschiedenen Bereichen zeigen können und
nicht ausschließlich von Kommunikationsdesignern, da dies den
Anschein erwecken könnte, dass der Showroom nur speziell für
Kommunikationsdesigner ist. Wir haben hierfür innerhalb der
Hochschule Anfragen gestellt, ob Probanten uns ausgewählte
Projekte zu Verfügung stellen wollen.
PROZ
ZESS
EMPATHY MAP

37
EMPATHY MAP                                                       38




Um sich besser in die Lage unserer künftigen Zielgruppe
hineinzuversetzen und um so ihre Wünsche und Bedürfnisse zu
verstehen, haben wir mit Hilfe der Empathy-Map Gefühle,
Probleme, Gedanken, etc. analysiert. Dabei war es wichtig, dass
wir uns als erstes Gedanken über einen typischen Kunden aus
unserer Zielgruppe machen.

Wir haben uns für Boris, einen 22-jährigen Studenten im
kreativen Bereich, entschieden.
Dabei ist es uns nicht schwer gefallen uns in die Gefühlslage
von Boris hineinzuversetzen, da wir alle, wie er, Studenten
eines kreativen Studiengangs sind und somit genau wissen, mit
was für Gefühlen, Ängsten und Problemen er sich tagtäglich
auseinandersetzt.

Nach einem Brainstorming über die Sachen, die Boris sieht,
hört, denkt, fühlt, sagt und tut haben wir überlegt, was ihm
fehlt und wovon er profitieren würde.
Sein größtes Problem ist, dass ihm ehrliche und konstruktive
Kritik fehlt. Durch unsere Plattform würde er in dieser Hin-
sicht profitieren und gleichzeitig würde die Kritik zur Verbes-
serung seiner Arbeiten führen.
EMPATHY MAP

39                 Empathy Map

                   I. See
                   Uni- und Eigenprojekte
                   kreativer Input
                   Stress
                   Uhr/Zeit
                   Arbeit
                   Geldmangel
                   schlechtes Networking
                   Kritik (von Profs.)

                   II. Hear
                   schlechtes Gewissen
                   Ideenmange
                   Zeitdruck
                   was tust du in der Zukunft
                   womit verdienst du Gel
                   Kritik

                   III. Think and feel
                   Angst vorm Versagen
                   Ideenmangel
                   Selbstzweifel
                   Kritik
                   Selbstkritik
                   Wettkampf / Konkurrenz

                   IV. Say and do
                   überspielt Unsicherheit
                   falsche Kritik

                   V. Pain
                   mangelnde ehrliche, konstruktive Kritik

                   VI. Gain
                   Verbesserung der Arbeiten
EMPATHY MAP

              40
STRUKTUR UND LAYOUT DURCHPLANEN

41
STRUKTUR UND LAYOUT                                               42

DURCHPLANEN




Wir planten die Hauptseite unserer späteren Website unter
Berücksichtigung folgender Faktoren:

Generell verfügt die Website über die allgemeinen Kontaktinfor-
mationen, Impressum und Geschäftsbedingungen. Überdies gibt es
ein Login Feld, ein Suchfeld und eine Navigationsleiste. Der
Header kündet Neuigkeiten und Informationen zum Showroom an.
Links zu Partnern sollen durch zugehörige Logos angezeigt
werden.
Eines der wichtigsten Elemente der Website stellen die Profile
dar. Jedes Profil ist unterteilt in eine Projektübersicht und
kann je nach Bedarf mehr oder weniger Informationen über die
Person enthalten, es verfügt sowohl über eine Freundesübersicht
als auch über eine Gruppen- und Wettbewerbsübersicht.
Gleichzeitig sollen Informationen über Wettbewerbe angekündigt
werden. Dies erfolgt über eine Übersicht dieser Wettbewerbe
und kurze Informationstexte. Weitere Ideen zur Veröffentlichung
der Wettbewerbe sind Sponsoren und Werbung. Die Gruppen wer-
den in einer Übersicht dargestellt. Es gibt zusätzliche Infor-
mationen zu jeder Gruppe und auch die Einordnung in Kategorien
nach Kurs, Projekt, Professor. Die Projekte werden durch Bilder
(thumbnails) dargestellt und können zuzüglich mit
Textbeschreibungen ergänzt werden. Hinzukommend können die
Bilder durch einen ‚Finde ich gut’ Button bewertet und auch
kommentiert werden.
STRUKTUR UND LAYOUT DURCHPLANEN

43
STRUKTUR UND LAYOUT DURCHPLANEN

                                  44
PROTOTYPING WIREFRAME

45



                             „Jede Website, deren Ladezeit
                             eine Sekunde überschreitet, tut
                             dem Benutzer weh.“ JAKOB NIELSEN
PROTOTYPING WIREFRAME                                             46




Statisches Wireframe

Wir erstellten erstmalig ein statisches Wireframe auf Papier,
also eine schematische Darstellung einer einzelnen
Seitenvorlage, welche die grundlegenden Elemente unserer
geplanten Website festhalten sollen. Wir haben die grafischen
Komponenten erstrangig nur sehr rudimentär abgebildet, da es
bei einem Wireframe in erster Linie um die Konzeption und nicht
um das Design geht.

Dieses Wireframe beinhaltete den Aufbau der Startseite unserer
späteren Website. Besonders zu berücksichtigen war die
Verdeutlichung des sichtbaren Bereiches [beim Öffnen der
Website]. Bezogen auf unsere Website sollten Elemente wie
Navigation und Inhaltsbereiche Teil dieses Skeletts sein.
Außerdem sollte ein konzeptionelles Layout erkennbar sein.
STATISCHES WIREFRAME

47
STATISCHES WIREFRAME

                       48
STATISCHES WIREFRAME

49
STATISCHES WIREFRAME
Uns ist aufgefallen, dass wir in unserem                           50
Prototypen der Website keinen ‚Passwort
vergessen’ Button aufgeführt haben.

Zu Überlegen war, ob wir ein Dropdown
Menü verwenden wollen, in welchem
beispielsweise die Galerien aufgelistet
werden mit der Unterkategorie privat und
öffentlich. Hier wäre dann eine
Brotkrümelnavigation von Nöten.

Um die Wichtigkeit der Navigation und des
Footers hervorzuheben, wären Versalien
angebracht.

Zudem ist es wichtig, dass wir genau
festlegen bzw. erkenntlich machen, was
Drop-Button und was Felder sind.

Wichtig ist auch, dass wir einheitliche
Zeichen ( >>) verwenden, wenn wir eine
Weiter-Funktion ausdrücken wollen. So bei
der Zahlenenumeration ‚Folgende’ ( 1 2 3
4 >> ) und ebenfalls dann beim Login
Button (Login >>).

Zur Farbgebung ist folgendes zu sagen:
Es gilt eher das Prinzip sich von der
Fachhochschul-Website abzugrenzen. Das
Hochschul-Icon ist ausreichend um die
Konnektivität von Showroom und Fachhoch-
schul-Website aufzuzeigen.
STATISCHES WIREFRAME

51                          Wir haben anschließend das Design
                            angepasst, indem wir Farben bestimmten,
                            sowie den Banner wählten, Veränderun-
                            gen vornahmen und vorläufig zur Anschauung
                            Bilder als Platzhalter einfügten.

                            Im nächsten Schritt machten wir uns dann
                            Gedanken über das dynamische Wireframe:
                            heißt, dass wir mehrere Seiten als
                            funktionalen Prototyp interaktiv
                            miteinander verknüpfen, sodass eine
                            Navigation von einer zur anderen Seite
                            möglich wird.

                            Links abgebildet ist die Hauptseite, die
                            angezeigt wird sobald man die Website
                            betritt.

                            Rechts abgebildet befindet man sich im
                            eingeloggten Nutzerprofil.
STATISCHES WIREFRAME

                       52
STATISCHES WIREFRAME

53
STATISCHES WIREFRAME

Bei dem Wireframe stellten sich einige                              54
Mängel heraus:
Ein Problem stellen die ‚tags’ dar, da
sich möglicherweise nicht alle Teilnehmer
des Showrooms gleichermaßen an die Einga-
ben der Einordnung halten. Ein Beispiel
hierfür ist schon allein die Unterschei-
dung zwischen Groß- und Kleinschreibung.
Diese Ausdifferenzierung, dass automatisch
alles einheitlich aufgenommen wird,
obwohl der Teilnehmer differierte Schreib-
weisen verfolgt, würde sich als
Schwierigkeit erweisen.



Die Seitennavigation bleibt ebenfalls zu
optimieren. Eine vernünftige Lösung wäre,
dass man die Seitenzahlenaufreihung wie
folgt wählt: << 1 2 ... 7 8 9 ... 20
21 >>, da man so bequem, ohne großartig
die Maus zu bewegen, gleich auf die
gewünschte Seite, beziehungsweise das
nähere Seitenumfeld gelangt.




Zu Disposition steht außerdem das Kate-
gorie Dropdownmenü, da sich dies mit mehr
als 20 Kategorisierungen nicht bewerk-
stelligen lässt. Ein ‚erweiterte Suche’
Feld löst dieses Problem.
STATISCHES WIREFRAME

55
STATISCHES WIREFRAME

Ein Problem könnte sich auch mit der                                56
Verständlichkeit des Banners mit dem
Titel „Schnittlauch“ ergeben, da man
nicht weiß, ob die Zielgruppe den
Zusammenhang oder Sinn versteht. Hierfür
eignet es sich, dass man Umfragen stellt
und somit testet, ob die befragten
Personen verstehen, was der Banner
bedeutet.

Gleichzeitig ist es hilfreich, dass man
verschiedene Personen befragt, wie sie
sich anhand des Wireframes zurechtfinden.
Man kann hier gezielt Fragen stellen, wie
sie an einen bestimmten Menüpunkt gelan-
gen. Dauert die Antwort mehrere Minuten,
so sollte man die Anordnung des
Wireframes überdenken. Ungewohnt könnte
es nämlich bei der Platzwahl der Seiten-
navigation, in unserem Fall die
Anmeldung, werden, da diese sich in den
meisten Fällen auf der rechten Seite
befindet und man instinktiv zur rechten
Seite tendiert.

Ein weiterer Faktor ist die Publizierung
des Showrooms. Ein Lösungsansatz wären
Flyer, die wir in der Hochschule vertei-
len, sowie Plakate und natürlich Mundpro-
paganda. Damit zu Beginn der Eröffnung des
Showrooms etwas zu sehen ist, wollen wir
Kommilitonen befragen, ob sie sich ein-
stimmig erklären einige von ihren Projek-
ten als Demonstration zur Verfügung zu
stellen.
STATISCHES WIREFRAME

57
STATISCHES WIREFRAME

Projekte                                                          58

Wir fragten Kommilitonen sowie
Studierende des Fachbereichs Architektur
und Schmuckdesign, ob sie uns Projekte
zur Verfügung stellen.

Die uns anvertrauten Projekte bauten wir
in unser Wireframe ein und setzten die
vorher genannten Probleme positiv um und
kamen zu nachfolgenden Ergebnissen.
ERGEBN
NISSE
ERGEBNISSE

61
ERGEBNISSE

Website                                       62

Das Ergebnis der Website sieht
folgendermaßen aus.
ERGEBNISSE

63                Startseite der Website

                  Besucht man die Website:
                  www.schnittlauch-fhd.de
                  so ergibt sich die nebenstehende
                  Startseite.
                  Ohne Anmeldung ist es bereits möglich
                  Projekte anzusehen.
ERGEBNISSE

Suchfunktion                                             64

Das Such-Dropdown-Menü sieht wie rechts
abgebildet aus.
Man kann zum Einen einen Suchbegriff
manuell eingeben oder aber wählt eine
Kategorie aus der vorgegebenen Liste aus.
ERGEBNISSE

65                Benutzerprofil- eigene Projekte

                  Wenn man sich im Showroom angemeldet hat
                  und man eigene Projekte hochgeladen hat,
                  so kann die eigene Profilseite wie links
                  zu sehen aussehen.
ERGEBNISSE

About                                                 66

Um die Verständlichkeit des Banners
auszudrücken und dessen Hintergrund zu
erläutern zeigen wir hier die
About-Seite.
ERGEBNISSE

67                Rastereinteilung

                  Die Website ist in statische, semi
                  statiche und flexibele Segmente
                  aufgeteilt.
ERGEBNISSE

             68
ERGEBNISSE

69
ERGEBNISSE

Flayer und Plakate                                       70

Zum Schluss haben wir uns der
Bekanntmachung des Showroom gewidtmet und
Flyer sowie Plakate erstellt, die wir zu
Werbezwecken in der Fachhochschule
Düsseldorf aushängen und verteilen
wollen. Ein Beispiel der Flyer ist links
abgebildet. Zu sehen ist die Voder- und
Rückseite eines Flyers.
Das Plakatbeispiel befindet sich rechts.
NACHW
WORT
Quellen:

http://weblogs.mki.fh-duesseldorf.de/diy/
http://www.businessmodelgeneration.com/

Verweise:

Es handelt sich bei der gezeigten Website lediglich um eine visuelle Darstellung.
Die Ausführung wurde bislang nocht nicht real umgesetzt.
Kursergebnis: FHD Showroom Dokumentation
Kursergebnis: FHD Showroom Dokumentation

Weitere ähnliche Inhalte

Andere mochten auch

Powerpoint irlande 3
Powerpoint irlande 3Powerpoint irlande 3
Powerpoint irlande 3
mandarine47
 
Powerpoint irlande 2
Powerpoint irlande 2Powerpoint irlande 2
Powerpoint irlande 2
mandarine47
 
Présentation 1ºA
Présentation 1ºAPrésentation 1ºA
Présentation 1ºA
piedadpcobo
 
Twittwoch 2010: Tiger & Online Activism
Twittwoch 2010: Tiger & Online ActivismTwittwoch 2010: Tiger & Online Activism
Twittwoch 2010: Tiger & Online Activism
Paula Peters
 
Presentation Dailymotion 090311
Presentation  Dailymotion 090311Presentation  Dailymotion 090311
Presentation Dailymotion 090311
AFMM
 
Tintin con dibujo (1)marina
Tintin con dibujo (1)marinaTintin con dibujo (1)marina
Tintin con dibujo (1)marina
pacitina
 
FineLight
FineLightFineLight
FineLight
xenman
 
La planificacion
La planificacionLa planificacion
La planificacion
pamira
 
презентация харькова на немецком
презентация харькова на немецкомпрезентация харькова на немецком
презентация харькова на немецком
Сергей Громыкин
 
Precauciones En La Ejecucion De Los Pliegos
Precauciones En La Ejecucion De Los PliegosPrecauciones En La Ejecucion De Los Pliegos
Precauciones En La Ejecucion De Los Pliegos
compostolo
 
2384 Niedliche Katzen
2384 Niedliche Katzen2384 Niedliche Katzen
2384 Niedliche Katzen
urmel801
 

Andere mochten auch (20)

Powerpoint irlande 3
Powerpoint irlande 3Powerpoint irlande 3
Powerpoint irlande 3
 
Polonia
PoloniaPolonia
Polonia
 
Powerpoint irlande 2
Powerpoint irlande 2Powerpoint irlande 2
Powerpoint irlande 2
 
Présentation 1ºA
Présentation 1ºAPrésentation 1ºA
Présentation 1ºA
 
Twittwoch 2010: Tiger & Online Activism
Twittwoch 2010: Tiger & Online ActivismTwittwoch 2010: Tiger & Online Activism
Twittwoch 2010: Tiger & Online Activism
 
Presentation Dailymotion 090311
Presentation  Dailymotion 090311Presentation  Dailymotion 090311
Presentation Dailymotion 090311
 
SKETCHES
SKETCHESSKETCHES
SKETCHES
 
Gefällt mir nicht!
Gefällt mir nicht!Gefällt mir nicht!
Gefällt mir nicht!
 
Wohin mit dem Atommüll? - Deutschland auf der Suche nach dem besten Endlagers...
Wohin mit dem Atommüll? - Deutschland auf der Suche nach dem besten Endlagers...Wohin mit dem Atommüll? - Deutschland auf der Suche nach dem besten Endlagers...
Wohin mit dem Atommüll? - Deutschland auf der Suche nach dem besten Endlagers...
 
Tintin con dibujo (1)marina
Tintin con dibujo (1)marinaTintin con dibujo (1)marina
Tintin con dibujo (1)marina
 
FineLight
FineLightFineLight
FineLight
 
La planificacion
La planificacionLa planificacion
La planificacion
 
Une migration SharePoint réussie! - De la planification à l'exécution
Une migration SharePoint réussie! - De la planification à l'exécutionUne migration SharePoint réussie! - De la planification à l'exécution
Une migration SharePoint réussie! - De la planification à l'exécution
 
CV
CVCV
CV
 
презентация харькова на немецком
презентация харькова на немецкомпрезентация харькова на немецком
презентация харькова на немецком
 
AULAS VIRTUALES
AULAS VIRTUALESAULAS VIRTUALES
AULAS VIRTUALES
 
Cambiando el presente
Cambiando el presenteCambiando el presente
Cambiando el presente
 
Octobre 2014
Octobre 2014Octobre 2014
Octobre 2014
 
Precauciones En La Ejecucion De Los Pliegos
Precauciones En La Ejecucion De Los PliegosPrecauciones En La Ejecucion De Los Pliegos
Precauciones En La Ejecucion De Los Pliegos
 
2384 Niedliche Katzen
2384 Niedliche Katzen2384 Niedliche Katzen
2384 Niedliche Katzen
 

Ähnlich wie Kursergebnis: FHD Showroom Dokumentation

TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012
TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012
TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012
TurnAroundPM
 
Praesentation design thinking_pzw
Praesentation design thinking_pzwPraesentation design thinking_pzw
Praesentation design thinking_pzw
Zwetana Penova
 
Demografiekongress 2012-expert debriefing-schmoll-nitschke
Demografiekongress 2012-expert debriefing-schmoll-nitschkeDemografiekongress 2012-expert debriefing-schmoll-nitschke
Demografiekongress 2012-expert debriefing-schmoll-nitschke
Cogneon Akademie
 
Klenk & Hoursch - Presentation Skills Training
Klenk & Hoursch - Presentation Skills TrainingKlenk & Hoursch - Presentation Skills Training
Klenk & Hoursch - Presentation Skills Training
Klenk Hoursch
 

Ähnlich wie Kursergebnis: FHD Showroom Dokumentation (20)

1. Schweizer Employer Branding Forum
1. Schweizer Employer Branding Forum1. Schweizer Employer Branding Forum
1. Schweizer Employer Branding Forum
 
Infogem vortrag pohle_v1
Infogem vortrag pohle_v1Infogem vortrag pohle_v1
Infogem vortrag pohle_v1
 
Bootcamp Präsentieren für Marketing, PR und Social Media
Bootcamp Präsentieren für Marketing, PR und Social MediaBootcamp Präsentieren für Marketing, PR und Social Media
Bootcamp Präsentieren für Marketing, PR und Social Media
 
Mooc - Design mit digitalen Methoden lehren und lernen / UdK Berlin
Mooc - Design mit digitalen Methoden lehren und lernen / UdK BerlinMooc - Design mit digitalen Methoden lehren und lernen / UdK Berlin
Mooc - Design mit digitalen Methoden lehren und lernen / UdK Berlin
 
TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012
TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012
TurnAround – unsere Präsentation auf der NEXT Service Design In Berlin 2012
 
KEY VALUES - DESIGN THINKING
KEY VALUES - DESIGN THINKINGKEY VALUES - DESIGN THINKING
KEY VALUES - DESIGN THINKING
 
SCM Gesamtprogramm 2016/2017
SCM Gesamtprogramm 2016/2017SCM Gesamtprogramm 2016/2017
SCM Gesamtprogramm 2016/2017
 
Heiko Bartlog - Gastgeber für Innovation
Heiko Bartlog - Gastgeber für InnovationHeiko Bartlog - Gastgeber für Innovation
Heiko Bartlog - Gastgeber für Innovation
 
Ideentransfer Präsentationsmethode | Grafisches Erzählen
Ideentransfer Präsentationsmethode | Grafisches ErzählenIdeentransfer Präsentationsmethode | Grafisches Erzählen
Ideentransfer Präsentationsmethode | Grafisches Erzählen
 
Führung im Projekt - eine projektlotsen.biz Simulation
Führung im Projekt - eine projektlotsen.biz SimulationFührung im Projekt - eine projektlotsen.biz Simulation
Führung im Projekt - eine projektlotsen.biz Simulation
 
Personas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-finalPersonas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-final
 
SCM-Gesamtprogram 2015-2016
SCM-Gesamtprogram 2015-2016SCM-Gesamtprogram 2015-2016
SCM-Gesamtprogram 2015-2016
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
Customer Experience Forum 3, 1. Dezember 2010
Customer Experience Forum 3, 1. Dezember 2010Customer Experience Forum 3, 1. Dezember 2010
Customer Experience Forum 3, 1. Dezember 2010
 
Social Media Executive Bootcamp + Strategy Week
Social Media Executive Bootcamp + Strategy WeekSocial Media Executive Bootcamp + Strategy Week
Social Media Executive Bootcamp + Strategy Week
 
Praesentation design thinking_pzw
Praesentation design thinking_pzwPraesentation design thinking_pzw
Praesentation design thinking_pzw
 
Presentation Skills Training
Presentation Skills TrainingPresentation Skills Training
Presentation Skills Training
 
Project Professional
Project ProfessionalProject Professional
Project Professional
 
Demografiekongress 2012-expert debriefing-schmoll-nitschke
Demografiekongress 2012-expert debriefing-schmoll-nitschkeDemografiekongress 2012-expert debriefing-schmoll-nitschke
Demografiekongress 2012-expert debriefing-schmoll-nitschke
 
Klenk & Hoursch - Presentation Skills Training
Klenk & Hoursch - Presentation Skills TrainingKlenk & Hoursch - Presentation Skills Training
Klenk & Hoursch - Presentation Skills Training
 

Mehr von FH Düsseldorf

Mehr von FH Düsseldorf (11)

Kursergebnis: Viewfinder Dokumentation
Kursergebnis: Viewfinder DokumentationKursergebnis: Viewfinder Dokumentation
Kursergebnis: Viewfinder Dokumentation
 
Kursergebnis: Paparazzi Layout
Kursergebnis: Paparazzi LayoutKursergebnis: Paparazzi Layout
Kursergebnis: Paparazzi Layout
 
Kursergebnis: Handmade Shop Dokumentation
Kursergebnis: Handmade Shop DokumentationKursergebnis: Handmade Shop Dokumentation
Kursergebnis: Handmade Shop Dokumentation
 
Kursergebnis: Handmade Shop Layout
Kursergebnis: Handmade Shop LayoutKursergebnis: Handmade Shop Layout
Kursergebnis: Handmade Shop Layout
 
Kursergebnis: FHD Showroom Layout
Kursergebnis: FHD Showroom LayoutKursergebnis: FHD Showroom Layout
Kursergebnis: FHD Showroom Layout
 
Social Media Strategie Kursergebnis: RTL
Social Media Strategie Kursergebnis: RTLSocial Media Strategie Kursergebnis: RTL
Social Media Strategie Kursergebnis: RTL
 
Social mediastrategy dokumentation
Social mediastrategy dokumentationSocial mediastrategy dokumentation
Social mediastrategy dokumentation
 
Social Media Strategie Kursergebnis: MTV
Social Media Strategie Kursergebnis: MTVSocial Media Strategie Kursergebnis: MTV
Social Media Strategie Kursergebnis: MTV
 
Social Media Strategie Kursergebnis: IKEA
Social Media Strategie Kursergebnis: IKEASocial Media Strategie Kursergebnis: IKEA
Social Media Strategie Kursergebnis: IKEA
 
Social Media Strategie Kursergebnis: H&M
Social Media Strategie Kursergebnis: H&MSocial Media Strategie Kursergebnis: H&M
Social Media Strategie Kursergebnis: H&M
 
Social Media Strategie Kursergebnis: ARD
Social Media Strategie Kursergebnis: ARDSocial Media Strategie Kursergebnis: ARD
Social Media Strategie Kursergebnis: ARD
 

Kursergebnis: FHD Showroom Dokumentation

  • 1. SS 2010 D.I.Y. – Prototypische Designprozesse PROJEKT FH D SHOWROOM TEILNEHMER Frederik Schmitz Marina Lang Paul Becker Sara Appenrodt Tristan Dransmann DOZENTEN Axel Quack Michael Zirlewagen
  • 2. 1. Auflage ® 2010 Papier, Druck, Fertigstellung: Buch Gestaltet von: Sara Appenrodt Gruppe SHOWROOM FH D Sara Appenrodt Sommersemester 2010 Der Text wurde gesetzt in der Courier Hypermedia 1 [01.12.02] Fotografie von: D.I.Y. – Prototypische Designprozesse Paul Becker, Tristan Drannsmann, Geschrieben von: Sara Appenrodt Sara Appenrodt, Marina Lang Dozenten: Axel Quack & Michael Zirlewagen Website Layout von: Korrektur gelesen von: Das Buch wurde eigenstänig produziert Tristan Dransmann Marina Lang
  • 3.
  • 4. Design Dieses Buch ist unterteilt in 5 Sektionen: Team 1 FH D Showroom- unser Ausgangsprojekt, welches wir Schritt für Schritt umsetzen, 2 Team- dessen Zusammensetzung, 3 Schritte FH D SHOWROOM Strategie zum Erfolg, 4 Strategie und anschließende 5 Umsetzung Ergebnis und Präsentation, Nachwort Nachwort Prozess Ergebnis
  • 5. INHALTSVERZEICHNIS 1 FH D SHOWROOM 2 TEAM 3 DESIGN 4 STRATEGIE 5 PROZESS 5 Kursbeschreibung 8 Teambildung 18 Ideenfindung 34 Zielgruppendefini- 38 Empathy Map tion 6 Definition FH D 10 Teamvorstellung 20 Geschäftsmodell 42 Struktur und Showroom erste Überlegung Layout durchplanen 14 Stärken und Schwächen eines 26 Business Model 46 Prototyping Teams Canvas Wireframes Ergebnisse und Präsentation Glossar Quelle und Verweise
  • 6. KURSBESCHREIBUNG 5 „Die Agenturlandschaft befindet sich im Umbruch, bisher eingesetzte Rollendefinitionen und Produktstrategien werden durch innovative prototypische Methoden ersetzt. Infolgedessen erweitert sich das Spektrum eines Designers auch um Aufgabenbereiche wie strategische Beratung und Konzeption.“ AXEL QUACK & MICHAEL ZIRLEWAGEN „Im Kurs wird die Technik vermittelt, eigene Ideen durch agile Designprozesse in digitalen Medien umzusetzen. Nach der Maxime „fail early, fail often“ werden Verfahren, wie z. B. Visual Thinking, Storytelling und Wireframes realisiert. Der Kurs wird als D.I.Y. Workshop abgehalten, um einen starken Praxisbezug zu garantieren“ Ziteiert aus fhd0001_Einführung.pdf von Micheal Zirlewagen & Axel Quack
  • 7. KURSBESCHREIBUNG UND 6 DEF_FH D SHOWROOM KURSBESCHREIBUNG: Zur Aufgabe nehmen wir uns die Umsetzung einer Geschäftsidee. Hierzu gehört die Bildung eines kompetenten Teams, die Ideenfindung und deren Konzeptvertiefung, die Wahrnehmung der Zielgruppe und das anschließend konforme Arbeiten mit dieser Zielgruppe. Des Weiteren werden wir die Idee mit Hilfe von Empathy Maps und prototypische Wireframes zu einem volständigen Layout umsetzen. DEF_FH D SHOWROOM: Der FH D Showroom macht es möglich eigene Projekte, Ideen und Konzepte, die für die Fachhochschule oder auch privat erstellt wurden zu veröffentlichen. Gleichzeitig hat jeder Teilnehmer die Möglichkeit zu sehen, was seine Kommilitonen innerhalb eines Semesters machen oder gemacht haben. Jeder Teilnehmer kann sich somit weitere Feedbacks und Ratschläge einholen. Es besteht ein Diskussionsforum sowie die Möglichkeit hochgeladene Bilder, Videos oder Audiodateien positiv zu bewerten.
  • 8. w TEA
  • 9. AM
  • 10. DAS TEAM 7 „Zusammenkommen ist ein Anfang. Zusammenbleiben ist ein Fortschritt. Zusammenarbeiten ist ein Erfolg.“ HENRY FORD
  • 11. DAS TEAM 10 TEAMBILDUNG: Wir haben eine Art speed-dating durchgeführt, in welchem wir uns untereinander kennenlernen sollten, um später nicht dem Schicksal ausgesetzt zu sein mit uns unsympathisch vorkommenden Personen arbeiten zu müssen. Ziel dieser Gruppenbildung war es, dass nicht gleichgut qualifizierte Personen im Gruppenverband dominieren. Die Anzahl jeder Gruppe ist auf fünf Geschöpfe begrenzt. Unsere Gruppe wird bestimmt durch Tristan Dransmann, Paul Becker, Frederik Schmitz, Marina Lang und Sara Appenrodt Wir betiteln uns erstmalig mit ‚SHOWROOM FH D‘ und begeistern uns für die Idee, eine Plattform für die Fachhochschule zu erschaffen, auf welcher jeder immatrikulierter Student sich sein eigenes Profil anlegen kann, in welchem er seine Semesterarbeiten posten kann.
  • 12.
  • 13. TEAMVORSTELLUNG 12 FH D showroom FREDERIK SCHMITZ frederik.schmitz@googlemail.com MARINA LANG marinalang@arcor.de PAUL BECKER paul.becker@paul-bk.de SARA APPENRODT sxara@gmx.de TRISTAN DRANSMANN info@dransmanndesign.de
  • 14. STÄRKEN UND SCHWÄCHEN EINES TEAMS 13
  • 15. STÄRKEN UND SCHWÄCHEN 14 EINES TEAMS Unserer Selbsteinschätzung zufolge sind wir begabt in den Gebieten Illustration, Texten und Gestaltung. Außerdem können wir gut mit Kritik umgehen. Des Weiteren weisen einige Personen Erfahrung in Agenturarbeit sowie in Fotografie auf. Einstimmige negative Attribute waren Chaos, Zeitmanagement und Programmierung.
  • 16. DESI
  • 17. IGN
  • 18. IDEENFINDUNG 17 „Brillante Ideen sind organisierbar.“ JULIUS ROBERT OPPENHEIMER (1904-67) „Die Idee ist das Absolute, und alles Wirkliche ist nur Realisierung der Idee.“ GEORG WILHELM FRIEDRICH HEGEL (1770-1831) „Die erfolgreichsten Konzepte bestehen häufig aus neuen Kombinationen bereits bestehender Ideen.“ JASON JENNINGS
  • 19. IDEENFINDUNG 18 Aus Neugierde, was unsere Kommilitonen an der Fachhochschule Düsseldorf innerhalb ihrer Kurse für Projekte gestalten, haben wir uns dazu entschieden als Geschäftsidee einen Showroom für die Fachhochschule Düsseldorf als Grundkonzept zu nehmen. Wir sind daran interessiert, dass alle Studierenden des Fachbereichs eins und zwei (Design und Architektur) ihre Projekte und Werke fachhochschulintern veröffentlichen können und dürfen. Es ist nahezu eine Schande, dass unzählige Projekte nach ihrer Präsentation im Kurs in irgendwelchen Kellern und Speichern dahinvegetieren. Wir wollen mit dieser Plattform eine Art Portfolio schaffen, welches sich jeder Student untereinander anschauen und auch bewerten kann.
  • 20. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) 19
  • 21. DAS GESCHÄFTSMODELL 20 ERSTE ÜBERLEGUNGEN Wir haben ein Brainstorming zu unserer Geschäftsidee durchgeführt und dieses schriftlich festgehalten. Dabei haben wir uns Gedanken über die Funktion des Showrooms und deren technische Umsetzung gemacht und uns überlegt, ob wir den Showroom hochschulintern oder auch hochschulübergreifend mit Agenturen vernetzen wollen. Wir sind zu dem Entschluss gekommen, es erstmalig hochschulintern umzusetzen. Wir haben grob festgelegt, welche Menüpunkte die Website aufweisen soll. Uns war es wichtig, dass jeder Teilnehmer des Showrooms all seine Projekte (Video, Audio, Foto) hochladen kann.
  • 22. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) 21 Ideation Die Ideenfindung sah wie links abgebildet aus. Wir haben uns bereits erste Gedanken über viele zugehörige Faktoren gemacht, die die Planung einer Website mit sich bringt. Dazu zählen unter anderem die technische Umsetzung und Programmierung, die Vermarktung und Präsentation und die regelmäßige Wartung und Pflege dieser Website.
  • 23. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) 22a
  • 24. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) 23
  • 25. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) Zusätzlich haben wir die weiteren 24 notwendigen Wünsche und Vorhaben bezüglich unserer Geschäftsidee schriftlich innerhalb der Gruppe auf kleinen farbigen Kärtchen festgehalten und diese an der Wand positioniert. Als besonders notwendig empfanden wir, dass jeder Teilnehmer sich sein eigenes Profil erstellen kann, wo er selbst entscheiden kann, was er hochladen möchte. So entstehen viele verschiedene Galerien von mehreren Teilnehmern. Über dies hinaus haben wir eine Jahresgalerie als weiteren Faktor hinzugefügt, in welcher jedes Jahr die besten Projekte gezeigt werden. Wir haben uns entschieden, dass man hochgeladene Projekte kommentieren und ausschließlich positiv bewerten kann, so entsteht ein Ranking mit einem eventuellen Wettbewerb und Trendbarometer untereinander. Zusätzlich haben wir überlegt, mit wel- chen schon vorhandenen Netzwerken man unseren Showroom vernetzen kann. Als Idee kam uns Studi.vz, Facebook und ähnliche Netzwerke.
  • 26. BUSINESS MODEL CANVAS 25 “There’s not a single business model... There are really a lot of opportunities and a lot of options and we just have to discover all of them.” TIM O‘REILLY 45 }
  • 27. BUSINESS MODEL CANVAS 26 Wir unterteilten unser Plakat unter Vorlage des Canvas Model in Partnernetzwerk, Schlüsselaktivität, Schlüsselressourcen, Kostenstruktur, Einnahmequelle, Kundenbeziehung, Angebot, Distributionskanäle sowie Kundensegmente.
  • 31. BUSINESS MODEL CANVAS Business Modell Canvas 30 Unter Partnernetzwerk führten wir Shop/ Schwarzmarkt und die automatische Anmeldung bei der Einschreibung auf. Später kamen wir zu dem Entschluss, dass wir den zweiten genannten Punkt nicht ausführen wollen, da wir der Meinung sind, dass nicht alle Studenten sich ein Profil im Showroom erstellen wollen. Dies soll jedem Studierenden freigestellt aber dennoch einfach ermöglicht werden. Unter Schlüsselaktivitäten sehen wir Vernetzungen. Weitere Punkte, die ebenfalls unter dem Begriff Angebot aufzunehmen sind, sind Jahresgalerie, Jobbörse, Projektaustausch und Projektarbeit. Wir bieten außerdem Comments, Ausschreibungen und ein Trendbarometer an. Es herrscht demnach ein interner Wettbewerb. Jeder Student hat die Möglichkeit sein eigenes Profil zu erstellen und dem Showroom und Gruppen beizutreten. Als Kundenbeziehung bieten wir ein Forum, eine Community und Random Funktionen an. Das Forum und die Community haben wir nach Überlegungen jedoch wieder entfernt. Spätere Ergänzungen hierzu waren Feed und Emailverteilung. Distributionskanäle sind vor allem Flyer und Poster, sowie die FH Website, Facebook applications, Studi.vz und Facebook. Kundensegmente werden bestimmt durch Studenten und Profes- soren. Mögliche Arbeitgeber sind Agenturen. Wir stellen uns außerdem ein Sharesystem von diversen Hochschulen vor. Mögliche Einnahmequellen sind Provisionen, Veltins Sponso- ring, Tombolas, Ausstellungen, Partys, Werbung, FH Merchandising und T-Shirts. Kosten dagegen ergeben sich durch Programmieraufgaben, die wir nicht eigenständig bewerkstelligen können, regelmäßige Pflege und Marketing und die Anmietung der Räume, wobei wir letztlich zu dem Ergebnis kamen, dass wir innerhalb der Fachhochschule Düsseldorf einige Räume zu Verfügung haben.
  • 32. STRAT
  • 33. TEGIE
  • 35. ZIELGRUPPENDEFINITION 34 Wir haben uns mit der potenziellen Zielgruppe beschäftigt. Hauptsächlich gilt unser Projekt den Designstudenten der Fachhochschule Düsseldorf. Inbegriffen sind Architekten, Kommunikationsdesigner und Produktdesigner (Schmuckdesign). Wir haben uns somit die Fragen gestellt, was sie auf unserer Seite sehen, was sie sehen möchten und was von unbedingter Notwendigkeit ist. Und haben versucht deren Wünsche und Vorstellungen zu bedenken um diese umzusetzen. Wir haben hierbei vergleichbare Showrooms und Netzwerke beiseite gezogen um zu sehen, was diese für Kategorien und Menüpunkte zeigen. Wir haben bedacht, dass wir für den Start des Showrooms schon Projekte zeigen müssen, damit das Interesse der zukünftigen Zielgruppe geweckt wird. Da wir den gesamten Fachbereich Design (Kommunikationsdesign, Produktdesign und Architektur) der Fachhochschule Düsseldorf abdecken wollen ist es unbedingt notwendig, dass wir beim Publizieren der Website bereits schon Projekte von den verschiedenen Bereichen zeigen können und nicht ausschließlich von Kommunikationsdesignern, da dies den Anschein erwecken könnte, dass der Showroom nur speziell für Kommunikationsdesigner ist. Wir haben hierfür innerhalb der Hochschule Anfragen gestellt, ob Probanten uns ausgewählte Projekte zu Verfügung stellen wollen.
  • 36. PROZ
  • 37. ZESS
  • 39. EMPATHY MAP 38 Um sich besser in die Lage unserer künftigen Zielgruppe hineinzuversetzen und um so ihre Wünsche und Bedürfnisse zu verstehen, haben wir mit Hilfe der Empathy-Map Gefühle, Probleme, Gedanken, etc. analysiert. Dabei war es wichtig, dass wir uns als erstes Gedanken über einen typischen Kunden aus unserer Zielgruppe machen. Wir haben uns für Boris, einen 22-jährigen Studenten im kreativen Bereich, entschieden. Dabei ist es uns nicht schwer gefallen uns in die Gefühlslage von Boris hineinzuversetzen, da wir alle, wie er, Studenten eines kreativen Studiengangs sind und somit genau wissen, mit was für Gefühlen, Ängsten und Problemen er sich tagtäglich auseinandersetzt. Nach einem Brainstorming über die Sachen, die Boris sieht, hört, denkt, fühlt, sagt und tut haben wir überlegt, was ihm fehlt und wovon er profitieren würde. Sein größtes Problem ist, dass ihm ehrliche und konstruktive Kritik fehlt. Durch unsere Plattform würde er in dieser Hin- sicht profitieren und gleichzeitig würde die Kritik zur Verbes- serung seiner Arbeiten führen.
  • 40. EMPATHY MAP 39 Empathy Map I. See Uni- und Eigenprojekte kreativer Input Stress Uhr/Zeit Arbeit Geldmangel schlechtes Networking Kritik (von Profs.) II. Hear schlechtes Gewissen Ideenmange Zeitdruck was tust du in der Zukunft womit verdienst du Gel Kritik III. Think and feel Angst vorm Versagen Ideenmangel Selbstzweifel Kritik Selbstkritik Wettkampf / Konkurrenz IV. Say and do überspielt Unsicherheit falsche Kritik V. Pain mangelnde ehrliche, konstruktive Kritik VI. Gain Verbesserung der Arbeiten
  • 42. STRUKTUR UND LAYOUT DURCHPLANEN 41
  • 43. STRUKTUR UND LAYOUT 42 DURCHPLANEN Wir planten die Hauptseite unserer späteren Website unter Berücksichtigung folgender Faktoren: Generell verfügt die Website über die allgemeinen Kontaktinfor- mationen, Impressum und Geschäftsbedingungen. Überdies gibt es ein Login Feld, ein Suchfeld und eine Navigationsleiste. Der Header kündet Neuigkeiten und Informationen zum Showroom an. Links zu Partnern sollen durch zugehörige Logos angezeigt werden. Eines der wichtigsten Elemente der Website stellen die Profile dar. Jedes Profil ist unterteilt in eine Projektübersicht und kann je nach Bedarf mehr oder weniger Informationen über die Person enthalten, es verfügt sowohl über eine Freundesübersicht als auch über eine Gruppen- und Wettbewerbsübersicht. Gleichzeitig sollen Informationen über Wettbewerbe angekündigt werden. Dies erfolgt über eine Übersicht dieser Wettbewerbe und kurze Informationstexte. Weitere Ideen zur Veröffentlichung der Wettbewerbe sind Sponsoren und Werbung. Die Gruppen wer- den in einer Übersicht dargestellt. Es gibt zusätzliche Infor- mationen zu jeder Gruppe und auch die Einordnung in Kategorien nach Kurs, Projekt, Professor. Die Projekte werden durch Bilder (thumbnails) dargestellt und können zuzüglich mit Textbeschreibungen ergänzt werden. Hinzukommend können die Bilder durch einen ‚Finde ich gut’ Button bewertet und auch kommentiert werden.
  • 44. STRUKTUR UND LAYOUT DURCHPLANEN 43
  • 45. STRUKTUR UND LAYOUT DURCHPLANEN 44
  • 46. PROTOTYPING WIREFRAME 45 „Jede Website, deren Ladezeit eine Sekunde überschreitet, tut dem Benutzer weh.“ JAKOB NIELSEN
  • 47. PROTOTYPING WIREFRAME 46 Statisches Wireframe Wir erstellten erstmalig ein statisches Wireframe auf Papier, also eine schematische Darstellung einer einzelnen Seitenvorlage, welche die grundlegenden Elemente unserer geplanten Website festhalten sollen. Wir haben die grafischen Komponenten erstrangig nur sehr rudimentär abgebildet, da es bei einem Wireframe in erster Linie um die Konzeption und nicht um das Design geht. Dieses Wireframe beinhaltete den Aufbau der Startseite unserer späteren Website. Besonders zu berücksichtigen war die Verdeutlichung des sichtbaren Bereiches [beim Öffnen der Website]. Bezogen auf unsere Website sollten Elemente wie Navigation und Inhaltsbereiche Teil dieses Skeletts sein. Außerdem sollte ein konzeptionelles Layout erkennbar sein.
  • 51. STATISCHES WIREFRAME Uns ist aufgefallen, dass wir in unserem 50 Prototypen der Website keinen ‚Passwort vergessen’ Button aufgeführt haben. Zu Überlegen war, ob wir ein Dropdown Menü verwenden wollen, in welchem beispielsweise die Galerien aufgelistet werden mit der Unterkategorie privat und öffentlich. Hier wäre dann eine Brotkrümelnavigation von Nöten. Um die Wichtigkeit der Navigation und des Footers hervorzuheben, wären Versalien angebracht. Zudem ist es wichtig, dass wir genau festlegen bzw. erkenntlich machen, was Drop-Button und was Felder sind. Wichtig ist auch, dass wir einheitliche Zeichen ( >>) verwenden, wenn wir eine Weiter-Funktion ausdrücken wollen. So bei der Zahlenenumeration ‚Folgende’ ( 1 2 3 4 >> ) und ebenfalls dann beim Login Button (Login >>). Zur Farbgebung ist folgendes zu sagen: Es gilt eher das Prinzip sich von der Fachhochschul-Website abzugrenzen. Das Hochschul-Icon ist ausreichend um die Konnektivität von Showroom und Fachhoch- schul-Website aufzuzeigen.
  • 52. STATISCHES WIREFRAME 51 Wir haben anschließend das Design angepasst, indem wir Farben bestimmten, sowie den Banner wählten, Veränderun- gen vornahmen und vorläufig zur Anschauung Bilder als Platzhalter einfügten. Im nächsten Schritt machten wir uns dann Gedanken über das dynamische Wireframe: heißt, dass wir mehrere Seiten als funktionalen Prototyp interaktiv miteinander verknüpfen, sodass eine Navigation von einer zur anderen Seite möglich wird. Links abgebildet ist die Hauptseite, die angezeigt wird sobald man die Website betritt. Rechts abgebildet befindet man sich im eingeloggten Nutzerprofil.
  • 55. STATISCHES WIREFRAME Bei dem Wireframe stellten sich einige 54 Mängel heraus: Ein Problem stellen die ‚tags’ dar, da sich möglicherweise nicht alle Teilnehmer des Showrooms gleichermaßen an die Einga- ben der Einordnung halten. Ein Beispiel hierfür ist schon allein die Unterschei- dung zwischen Groß- und Kleinschreibung. Diese Ausdifferenzierung, dass automatisch alles einheitlich aufgenommen wird, obwohl der Teilnehmer differierte Schreib- weisen verfolgt, würde sich als Schwierigkeit erweisen. Die Seitennavigation bleibt ebenfalls zu optimieren. Eine vernünftige Lösung wäre, dass man die Seitenzahlenaufreihung wie folgt wählt: << 1 2 ... 7 8 9 ... 20 21 >>, da man so bequem, ohne großartig die Maus zu bewegen, gleich auf die gewünschte Seite, beziehungsweise das nähere Seitenumfeld gelangt. Zu Disposition steht außerdem das Kate- gorie Dropdownmenü, da sich dies mit mehr als 20 Kategorisierungen nicht bewerk- stelligen lässt. Ein ‚erweiterte Suche’ Feld löst dieses Problem.
  • 57. STATISCHES WIREFRAME Ein Problem könnte sich auch mit der 56 Verständlichkeit des Banners mit dem Titel „Schnittlauch“ ergeben, da man nicht weiß, ob die Zielgruppe den Zusammenhang oder Sinn versteht. Hierfür eignet es sich, dass man Umfragen stellt und somit testet, ob die befragten Personen verstehen, was der Banner bedeutet. Gleichzeitig ist es hilfreich, dass man verschiedene Personen befragt, wie sie sich anhand des Wireframes zurechtfinden. Man kann hier gezielt Fragen stellen, wie sie an einen bestimmten Menüpunkt gelan- gen. Dauert die Antwort mehrere Minuten, so sollte man die Anordnung des Wireframes überdenken. Ungewohnt könnte es nämlich bei der Platzwahl der Seiten- navigation, in unserem Fall die Anmeldung, werden, da diese sich in den meisten Fällen auf der rechten Seite befindet und man instinktiv zur rechten Seite tendiert. Ein weiterer Faktor ist die Publizierung des Showrooms. Ein Lösungsansatz wären Flyer, die wir in der Hochschule vertei- len, sowie Plakate und natürlich Mundpro- paganda. Damit zu Beginn der Eröffnung des Showrooms etwas zu sehen ist, wollen wir Kommilitonen befragen, ob sie sich ein- stimmig erklären einige von ihren Projek- ten als Demonstration zur Verfügung zu stellen.
  • 59. STATISCHES WIREFRAME Projekte 58 Wir fragten Kommilitonen sowie Studierende des Fachbereichs Architektur und Schmuckdesign, ob sie uns Projekte zur Verfügung stellen. Die uns anvertrauten Projekte bauten wir in unser Wireframe ein und setzten die vorher genannten Probleme positiv um und kamen zu nachfolgenden Ergebnissen.
  • 61. NISSE
  • 63. ERGEBNISSE Website 62 Das Ergebnis der Website sieht folgendermaßen aus.
  • 64. ERGEBNISSE 63 Startseite der Website Besucht man die Website: www.schnittlauch-fhd.de so ergibt sich die nebenstehende Startseite. Ohne Anmeldung ist es bereits möglich Projekte anzusehen.
  • 65. ERGEBNISSE Suchfunktion 64 Das Such-Dropdown-Menü sieht wie rechts abgebildet aus. Man kann zum Einen einen Suchbegriff manuell eingeben oder aber wählt eine Kategorie aus der vorgegebenen Liste aus.
  • 66. ERGEBNISSE 65 Benutzerprofil- eigene Projekte Wenn man sich im Showroom angemeldet hat und man eigene Projekte hochgeladen hat, so kann die eigene Profilseite wie links zu sehen aussehen.
  • 67. ERGEBNISSE About 66 Um die Verständlichkeit des Banners auszudrücken und dessen Hintergrund zu erläutern zeigen wir hier die About-Seite.
  • 68. ERGEBNISSE 67 Rastereinteilung Die Website ist in statische, semi statiche und flexibele Segmente aufgeteilt.
  • 71. ERGEBNISSE Flayer und Plakate 70 Zum Schluss haben wir uns der Bekanntmachung des Showroom gewidtmet und Flyer sowie Plakate erstellt, die wir zu Werbezwecken in der Fachhochschule Düsseldorf aushängen und verteilen wollen. Ein Beispiel der Flyer ist links abgebildet. Zu sehen ist die Voder- und Rückseite eines Flyers. Das Plakatbeispiel befindet sich rechts.
  • 72. NACHW
  • 73. WORT
  • 74. Quellen: http://weblogs.mki.fh-duesseldorf.de/diy/ http://www.businessmodelgeneration.com/ Verweise: Es handelt sich bei der gezeigten Website lediglich um eine visuelle Darstellung. Die Ausführung wurde bislang nocht nicht real umgesetzt.