Highly Efficient Greeting Card Microsite

For the marketing campaign “Perfekt für dich” (“perfect for you”) Cloud Under developed a microsite with which users can say thank you to their partner, friends or family by creating a personalised e-card – and also learn more about the brand’s “perfect” latte coffee pads.

How it works

After entering a recipient’s name and picking one of over twenty adjectives such as perfect, exceptional, brilliant or hot for describing their friend, the user can customise the design of the greeting card with a large range of wallpapers. Changes and transitions are lovingly animated and updated instantaneously on-screen.

Once the user is happy with their design, they can download their individual design as JPEG image or share a unique link via Facebook, WhatsApp (mobile only) or email (mailto link). The shared link contains a unique ID which leads back to the microsite showing the design created.

Demo:

Screen recording of the microsite on a desktop browser

Efficiency and data protection

Whilst engineering this web project, we made sure that no personal user data is collected or at risk at any point. The back-end of the website does not employ a database at all. Asking for the first name of the recipient is as close as it gets in terms of personal data, yet this information still remains within the client’s browser whilst the user designs the greeting card. The preview and the card designer are rendered entirely on the client.

Only when the user finally elects to select the share button, the personalisation options are sent to the server, only to validate the data and encode the data into a hash-like code, which is sent back to the client and not stored anywhere.

Up to here the resources required for the web server are extremely low. For the back-end server application we chose Play Framework as it covers all requirements and handles server resources super efficiently. The front-end of the microsite is almost completely static and all assets are cached aggressively via CDN (AWS Cloud Front). Aggressive caching of assets means, almost all requests for HTML, CSS, JavaScript and images are handled by the CDN and almost never hit our source server.

This means the server can concentrate on only a few more or less simple tasks, including data validation and generating the hash-like code as mentioned above.

The biggest task is the actual generating of the downloadable and shareable greeting card image as JPEG file. This process does indeed require a bit of server memory for rendering the layered greeting card according to the user’s design. This relatively “expensive” process is performed on the fly, only when actually requested, i.e. when the user actually clicks the download button or the link has been shared on Facebook or WhatsApp and Facebook’s server actually request the Open Graph meta tag page preview image – and only if the image is not already cached by the CDN.

Example rendering with text written on latte glass (translated): Cloud Under, you are awesome to me.

Rendered e-card example

Rendering a new image on the server only takes a few dozen milliseconds. Because we expected a large amount of different unique images with a very little number of requests (downloads) each, we decided not to even bother storing the generated images permanently. Instead the images are requested via CDN. If it's already in the CDN’s cache, it is delivered from there and if not, it is rendered, delivered and cached for future requests. The user will hardly notice any difference, yet this process will keep the server cool even during peak times.

The only other dynamic part is the server route for the unique shareable URLs, e.g. https://www.perfektfuerdich-senseo.de/IGlrrpRDTE9VRFVOREVS, where “lGlrr[…]EVS” represents the ASCII-encoded card design. If the landing page is not already cached by the CDN, all there server has to do is decode the string, validate it and either respond with a standard HTML page with some customised meta tags, or if the code is invalid, respond with a 404 Not Found error.

If you need some cleverly engineered and affordable website, microsite or other piece of software, get in touch with Cloud Under.