Skip to content
Ein junger Olivenbaum in einem weißen Topf auf einem blassgrünen Tisch vor einer zartrosa Wand.
#web

Olea Sacra

Storytelling-Website und Onlineshop

> for olea sacraweb · 2017
01· das projekt
> Entwickelt für Olea Sacra.

Eine Geschichte in Kapiteln.

Olea Sacra verschenkt Olivenbäume aus Stecklingen eines jungen Baums aus dem Garten Gethsemane, gegen eine Spende an die Franziskaner, die das Heilige Land betreuen. Die Website musste diese Geschichte erzählen, bevor sie um etwas bat.

Wir haben sie in sieben Kapiteln gebaut, jedes ein ganzer Bildschirm mit eigener Farbe, einem Zitat und Panels, die sich zu Briefen, Fotos und Dokumenten öffnen, mit animierten Übergängen von Kapitel zu Kapitel. Das letzte Kapitel ist der Shop: wählen, wie viele Bäume und wie viel Spende, mit Karte oder Überweisung zahlen und die Bestellung per E-Mail verfolgen, bis der Baum mit seinem Herkunftszertifikat ankommt. Dahinter ein Backoffice für Bestellungen, Rechnungen und Versand.

> cat /works/olea-sacra.md
TYPWEB
KUNDEOLEA SACRA
JAHR2017
gebaut mit
  • Ruby on Rails
  • React
  • MongoDB
  • PayPal
  • SendGrid
  • Docker
#web
02· in zahlen
7> Kapitel
4> E-Mails von der Bestellung bis zur Lieferung
2> Zahlungsarten: Karte und Überweisung
03· so funktioniert es
Kapitel eins in Blassgrün: "Ocho olivos milenarios viven en el huerto de Getsemaní", mit "Olivos santos" in großen Buchstaben unten.
01

Lesen

Sieben Kapitel, jedes mit Zitat und Panels, die sich zu Briefen und Fotos öffnen.

Kapitel vier in Gelb: "Un olivo joven descendiente de los olivos santos de Getsemaní", mit einem gezeichneten Olivenzweig.
02

Weiter

Animierte Übergänge führen von einem Kapitel zum nächsten.

Die Kaufseite auf dem Desktop: "Comprar un olivo", das Foto des Baums, die Anzahl der Bäume und die Spende zur Auswahl.
03

Spenden

Bäume und Spende wählen, per Karte oder Überweisung.

Dieselbe Kaufseite auf dem Handy.
04

Verfolgen

E-Mails begleiten die Bestellung von der Zahlung bis zur Lieferung.

04· credits
for olea sacra. DESIGN - WEB - E-COMMERCE. 2017

Arbeitest du an etwas Ähnlichem? Erzähl uns, was du brauchst.

05· nächstes projekt
> cd /works/las-lomas-de-denia
Las Lomas de Denia> Web
> navbar collapsed · scroll to the end
Crowtec