Bahia
Ausbildungsinhalt

Bahia

Dieses Webkonzept für die fiktive Tourismuszentrale “Bahia” entstand im Rahmen meiner Ausbildung im Sommer 2017.

Aufgabenstellung

Die Tourismuszentrale Bahia mit Sitz in Salvador de Bahia, Brasilien möchte die Region Bahia auch in Deutschland bekannter machen und sonnenhungrige Urlauber über die Vorzüge & Schönheiten dieser Region informieren.

Unter der URL www.bahia-touristik.de soll dafür eine neue Internetpräsenz aufgebaut werden.

Für die Inhalte des Webauftritts gibt der Kunde folgende Inhaltsstruktur vor:
• Sehenswürdigkeiten
• Traumstrände
• Reiseplaner (mit Online-Buchungsmöglichkeit)
• Unterkünfte
• brasilianische Küche
• Karneval
• Sprachkurse
• Kontakt & Impressum

Die Tourismuszentrale wünscht sich bei den Inhalten und Features weitere Vorschläge von der Agentur.
Für das Konzept wünscht sich der Kunde zudem Vorschläge zum Thema Barrierefreiheit, Suchmaschinenoptimierung und begleitende Werbemaßnahmen.

Um eine unverwechselbare Aussage und eine hohe Werbewirkung zu erzielen, erwartet der Kunde, dass sich die Agentur intensiv in das Thema einarbeitet und sich mit dem Produkt detailliert auseinandersetzt.

Für den Designvorschlag fordert der Kunde mindestens ein Screendesign in den Darstellungsgrößen "Desktop" (1920px) und "Smartphone" (640px), so dass die Darstellung auf den unterschiedlichen Ausgabegeräten erkennbar wird.

Zum Abschluss der Projektphase ist dem Kunden folgendes vorzulegen:
• Das fertige Konzept inklusive Screendesigns (als PDF)
• Die separat exportierten Designvorschläge (als PDF)

Die Startseite auf einem iPhone 5 Mockup

Ziel

Mein primäres Ziel bei der Umsetzung der Aufgabenstellung war es, für die Tourismuszentrale “Bahia” ein überzeugendes Webkonzept inklusive Designvorschlag in unterschiedlichen Darstellungsgrößen umzusetzen, in dem die vom Kunden vorgegebene Ideen zu den Inhalten & zur technischen Umsetzung berücksichtigt werden.
Das Konzept wurde um eigene Vorschläge & Ideen ergänzt, um ein Gesamtprodukt zu konzipieren, dass sonnenhungrigen Urlaubern Lust auf den Karneval, die Kultur, die Aktivitäten und den Tourismus in Bahia machen soll.

Mein sekundäres Ziel bei der Projektumsetzung diente der eigenen Fortbildung.

Zum einen bin ich die Aufgabenstellung so konzeptionell wie möglich angegangen und habe in der Konzeptionsphase den “Design Thinking”-Ansatz dort eingesetzt, wo ich eine Möglichkeit dafür gesehen habe, um den Einsatz dieses Ansatzes an einem praktischen Projekt erlernen zu können.
Zum anderen habe ich mich in der Screendesign-Phase nur auf Sketch beschränkt, um den Umgang und die Tools des Programmes besser kennenlernen zu können.

Die Kulturseite auf einem liegenden, schwarzen iPhone 6 Mockup
Die Kulturseite auf einem iPhone 6 Mockup

Recherche & Vorüberlegungen

Die Umsetzung der Aufgabenstellung begann für mich mit Recherchen über Brasilien, Bahia, Salvador, Urlaub, dem Südatlantik, und der Konkurrenz zum Produkt "Bahia".
Die bei der Recherche gewonnen Informationen habe ich in die Formulierung meines Re-Briefings einfließen lassen.

Auf Basis dieser Ergebnisse habe ich im nächsten Schritt die Zielgruppe für das Produkt definiert und passend dazu vier spekulative Personas entwickelt, um eine genauere Vorstellung dafür zu bekommen, für wen die Webseite gestaltet wird und was die Ziele der Webseitenbesucher sind.

Anhand dieser definierten Zielgruppe & den spekulativen Personas habe ich im anschließenden Schritt die gestalterische Umsetzung auf konzeptioneller Ebene weiter ausgearbeitet und passende Typografie wie auch Farben definiert.

Nachdem Typografie & Farben festgelegt wurden, habe ich mich auf die Suche nach passendem Bildmaterial begeben und eine zu Bahia passende Bildwelt definiert – Eine Bildwelt, die sich an der vielseitigen & abwechslungsreichen Kultur von Bahia orientiert.

Nach der Definition der Schriften, Farben und Bildwelt begann ich damit, den Gestaltungsvorschlag für die Unterseite "Kultur" umzusetzen, um die definierten Gestaltungselemente im Kontext zueinander beurteilen zu können.
Die Kulturseite hatte dabei den Vorteil, dass Änderungen an den ausgewählten Elementen schnell und unkompliziert umsetzbar gewesen wären.

Um die ausgewählten Elemente auf allen Unterseiten mit gleichmäßigen Abständen und identischen "Rastern" ausrichten zu können, habe ich in diesem Arbeitsschritt außerdem die Layoutspalten für die Desktopansicht und die Smartphoneansicht definiert.

Die Kulturseite auf einem schwarzen iMac Mockup
Die Kulturseite auf einem schwarzen iMac Mockup

Umsetzung

Nachdem ich die Screendesigns für die Unterseite "Kultur" umgesetzt und die Farb- und Schriftwahl finalisiert habe, habe ich die Screendesigns für die Startseite und den Footer relativ schnell umsetzen können.
Somit blieb mir ausreichen Zeit in der Gestaltungsphase, um mich voll und ganz auf die Umsetzung der "Planer"-Seite konzentrieren zu können, die verhältnismäßig inhaltsintensiv war.

Für diese Umsetzung begann ich damit, alle Inhalte für diese Unterseite zusammen zu sammeln, zu erstellen und zu bearbeiten.
Darauf hin habe ich die interaktive Karte inklusive unterschiedliche Filter für die Hotelansicht gestaltet und um einen Slider mit einer Auswahl an Hotels von externen Anbietern ergänzt, die in dem jeweiligen Kartenbereich liegen.

Da man über die interaktive Karte Unterkünfte wie auch Strände aussuchen kann, habe ich unterhalb des Sliders für die Unterkünfte & Strände jeweils ein Foto & einen Absatz über die Unterkünfte & Strände eingeplant, damit die Seitenbesucher hier mehr darüber erfahren können, was diese einzigartig macht.

Um den Urlaub in Bahia abwechslungs- und erlebnisreicher gestalten zu können, folgt auf den Textabschnitt ein Slider mit einem Angebot an ganz unterschiedlichen Aktivitäten vor Ort – von Fallschirmspringen bis hin zum Portugiesischkurs.
Da unmöglich alle in Bahia angebotenen Aktivitäten in einen Slider passen, gibt es hier durch den Button "Mehr Aktivitäten >" die Möglichkeit, auf einer weiteren Unterseite, für die es kein Screendesign gibt, alle Aktivitäten in & um Bahia zu entdecken.

Am Ende der Seite bekommt der Kunde eine Zusammenfassung seiner Reisedaten in Form eines Fließtextes mit wichtigen Hinweisen, die zur Planung der Reise noch fehlen oder zu Dokumenten, die für Reise nach Brasilien unbedingt bereite gehalten werden sollten. Hier hat der Kunde auch die Möglichkeit, Anbieter & Preise zu vergleichen, wenn es für einer der ausgewählten Optionen in dem ausgewählten Zeitraum denn mehrere Anbieter gibt.

Zum Schluss hat der Kunde dann noch die Möglichkeit, über ein Textformular direkt Fragen zur Reise oder über die Webseite an das Bahia-Team zu stellen.

Zum Abschluss der Screendesigphase habe ich noch die Inhalte & den Aufbau der Navigation festgelegt und deren Darstellung für beide Ansichtsgrößen gestaltet.

Der Design Thinking-Ansatz kam während in der Designphase immer wieder zum Einsatz, und hat mir dabei geholfen, für komplex wirkende Herausforderungen einfache Lösungen zu finden.


Nach der Screendesignphase hatten die Mediengestalter, die bereits vor dem Abgabetermin mit den Screendesigns fertig waren, die Möglichkeit, ein eigenes Logo für Bahia zu entwickeln.
Ich nahm diese Zusatzaufgabe als Möglichkeit wahr, um zum einen ein einprägsames Logo für das fiktive Unternehmen zu erstellen, und zum anderen um mich mit dem Prozess der Logogestaltung innerhalb von Sketch vertraut zu machen.
Somit habe ich ein Logo gestaltet, dass in großflächiger Printwerbung wie auch als Social Media-Icon gut erkennbar ist, und die Vielfalt, Buntheit und die Reise zwischen Deutschland und Brasilien grafisch veranschaulicht.

Nach Abschluss der Designphase habe ich dann die Texte für das finale Konzept formuliert, welches ich ebenfalls in Sketch zu einer mehrseitige Konzeptpräsentation mit Inhaltsverzeichnis, Mock-Ups und Screendesigns in Desktop- & Smartphoneansicht ausgearbeitet habe, und konnte dieses termingerecht bei unserem Online-Dozenten abgegeben.

Die Planerseite auf einem stehenden, goldfarbenden MacBook Mockup
Die Planerseite auf einem MacBook Mockup

Bewertung

Mein abgegebenes Bahia-Konzept hat unser Online-Dozent insgesamt mit einer zwei bewertet.

Meine Umsetzung der Aufgabenstellung – die Inklusion des Design Thinking-Ansatzes in der Konzeptionsphase wie auch die Umsetzung des Konzepts & der Screendesigns komplett in Sketch – hat mein Dozent anfangs recht kritisch betrachtet.

Nach Abgabe & Bewertung hat er gelobt, dass ich mich bei der Umsetzung der Aufgabe nicht nur intensiv mit der Aufgabe und Brasilien auseinandergesetzt habe, sondern auch viel über Sketch und dem Design Thinking-Ansatz lernen konnte, und sich dieses positiv auf meine Gestaltung des Webauftritts ausgewirkt hat.
Er hat positiv betont, dass ich die in der Aufgabenstellung vorgegebenen Inhalte im Konzept gut & verständlich erklärt habe, ohne zu technisch oder zu ausführlich zu werden, und alle in der Aufgabenstellung benannten & im Konzept weiter beschriebenen Features sinnvoll in die Screendesigns integriert habe.
Zudem war er von meinem Einfallsreichtum in Bezug auf die Vorschläge für die begleitenden Werbemaßnahmen positiv überrascht.

Kritisiert hat der Dozent, dass manche Elemente in den Screendesigns zu wenig Weißraum hatten, dass die Buttons teilweise unterschiedliche Längen hatten, und dass diese auf der mobilen Darstellung zu klein dargestellt werden.
Im Konzept habe ich zu viele Worte über die Konzeption der Webseite verloren, im speziellen über die spekulative Zielgruppe & Personas.

Bewertet wurde die Arbeit unter anderem nach folgenden Kriterien:
• Gibt das Rebriefing die Kundenanforderungen wieder?
• Hat sich der Konzeptioner in das Produkt eingearbeitet?
• Vorschläge zum Thema Barrierefreiheit und Suchmaschinenoptimierung
• Unverwechselbarer Auftritt; eigene Idee erkennbar?
• Usability
• Ist die Gestaltung dem Produkt angemessen?
• Kann der Betrachter die unterschiedlichen Teile und Funktionen der Website anhand des abgegebenen Screendesigns erkennen?

Die Planerseite auf einem liegenden, weißen Samsung Galaxy-Mockup.
Die Planerseite auf einem Samsung Galaxy-Mockup.

Fazit

So umfangreich und arbeitsintensiv wie die Aufgabenstellung zu Anfang auch wirkte, gelang es mir durch meine strukturierte Arbeitsweise und der Anwendung des Design Thinking-Ansatzes, die Aufgabenstellung auf eine strukturierte und effiziente Arbeitsweise zu bewältigen.

Während der Umsetzung der Screendesigns und des Konzepts für Bahia habe ich zum ersten Mal erfahren wie es ist, alle gestalterischen Aspekte eines Projekts nur in Sketch umzusetzen. Von der Erstellung der Screendesigns, über das Logodesign bis hin zur Formulierung und Gestaltung des Konzepts.

Dabei habe ich gelernt, Informationen über mir fremde Orte & Kulturen direkt in meinem Webkonzept & meinen Designvorschlägen umzusetzen und interaktiv geplante Inhalte zu konkretisieren & logisch zu designen.
Zudem lernte ich während der Umsetzungsphase, mit Kritik an meiner Arbeitsweise umzugehen und meine Vorgehensweise sachlich & ausführlich zu erklären.

Aufgrund dessen, dass wir uns die Designvorschläge nach der Projektabgabe gegenseitig vorgestellt haben, durfte ich noch Erfahrungen damit sammeln, wobei es bei so einer Präsentation ankommt.

Anmerkungen

Für die Veröffentlichung des Bahia-Konzepts auf meiner Webseite habe ich die Screendesigns und das Konzept anhand der Kritik meines Dozenten überarbeitet.
Dementsprechend haben die Elemente in den Screendesigns nun mehr Weißraum und die Buttons haben eine einheitliche Größe & sind in der mobilen Darstellung komfortabler anzutippen.
Die Angaben zu den spekulativen Personas im Konzept wurden gekürzt.

Dir gefällt meine Arbeit?

Schreibe mir eine E-Mail, wenn Du mit mir gemeinsam Ideen und Projekte verwirklichen möchtest.

E-Mail verfassen