Skip to content
A young olive tree in a white pot on a pale green table, against a soft pink wall.
#web

Olea Sacra

Storytelling website and online shop

> for olea sacraweb · 2017
01· the project
> Built for Olea Sacra.

A story told in chapters.

Olea Sacra gives olive trees grown from cuttings of a young tree sent from the Garden of Gethsemane, in exchange for a donation to the Franciscans who look after the Holy Land. Its website had to tell that story before asking for anything.

We built it as seven chapters, each one a full screen with its own colour, a quote and panels that open on letters, photos and documents, with animated changes from one chapter to the next. The last chapter is the shop: choose how many trees and how much to give, pay by card or transfer, and follow the order by email until the tree arrives with its certificate of origin. Behind it, a back office for orders, invoices and shipping.

> cat /works/olea-sacra.md
TYPEWEB
CLIENTOLEA SACRA
YEAR2017
built with
  • Ruby on Rails
  • React
  • MongoDB
  • PayPal
  • SendGrid
  • Docker
#web
02· in numbers
7> chapters
4> emails from order to delivery
2> ways to pay: card and transfer
03· how it works
Chapter one in pale green: "Ocho olivos milenarios viven en el huerto de Getsemaní", with "Olivos santos" in large letters across the bottom.
01

Read

Seven chapters, each with its quote and panels that open on letters and photos.

Chapter four in yellow: "Un olivo joven descendiente de los olivos santos de Getsemaní", with a line-drawn olive branch.
02

Move

Animated changes carry you from one chapter to the next.

The purchase page on desktop: "Comprar un olivo", the photo of the tree, how many trees and the donation to choose.
03

Give

Choose how many trees and the donation, by card or transfer.

The same purchase page on a phone.
04

Follow

Emails track the order from payment to delivery.

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

Working on something like this? Tell us what you need.

05· next project
> cd /works/las-lomas-de-denia
Las Lomas de Denia> Web
> navbar collapsed · scroll to the end
Crowtec