Aranja + Memento

Memento Payments

We developed a state of the art marketing page for this ambitious FinTech startup

Tech stack

We didn't feel the need to sway away from our comfort zone for this project. The project called for Next.js and we've been enjoying using Framer-motion for the past couple of years.

TypeScript

Strongly typed programming language

Next.js

React website framework

styled-components

CSS-in-JS

Framer Motion

Animation library

Zustand

State-management solution

Different from the competition

Memento Payments are creating the generation social payment platform for banks. Their flagship product is a highly customizable white-label app platform. Michael, the in-house designer, had dreamed up an ambitious website to match their equally ambitious goals as a platform. The design called for many animated illustrations, some even interactive, to showcase the platform.

It was immediately apparent that Memento Payments' idea of quality matched ours, and we were quick to jump on board.

Hitting the limits

The website tries to strike a balance between professional and playful. The typography animates into view in a way that doesn't hinder the message we are conveying, and the interactions that happen on pointer events are subtle and to the point.

While experimenting with large interactive illustrations, we quickly ran into the performance limits of SVG (Scalable Vector Graphics). These scenes showcased simplified versions of Memento Payments' app platform and dashboard and contained a lot of nodes that we wanted to animate smoothly. The nature of the illustrated scenes made it apparent that we could reauthor the artwork using HTML and CSS, which we did. It worked beautifully, and we gained performance, control, and interactivity of the scenes.

All the artwork is done using HTML and CSS which allows us great control over it.

No viewport size left behind

In the mobile version of the website, the pricing page is a thing of beauty. It accomplishes the outlandish goal of comparing three pricing plans on a small screen by utilizing both horizontal and vertical sticky panels in an intuitive way. Swiping or scrolling a panel syncs with the opposite panel, so the user never gets lost in the details.

Since Memento Payments has a lot coming up, we built a mega menu to provide easy access and to provide an overview of their software's features and services. On the smallest viewports, this mega menu displays multi-level navigation with swift and satisfying transitions between levels.

“Memento Payments needed a new website to better represent the products we are offering. We had heard great things about Aranja but they exceeded our expectations. It was an absolute joy to work with them and I would recommend them to anyone wanting to create a beautiful product.”

Guðberg Sumarliðason

Product Manager — Memento Payments

Other projects

Sprotarnir

An educational app for kids made for Landsbankinn that has gone through three iterations since 2016

Pick a project to learn more