Opennode.co

Bitcoin, for everyday.

Back to showcase

OpenNode is an easy to use eCommerce and retail plug-in solution, payment infrastructure API for developers, and the fastest payment processor to allow for brand new payment models and instantaneous settlements.

Client

OpenNode, Inc.

Services

  • UI/UX
  • Front End
  • Illustration

Deliverables

  • Website
  • Web App
  • Illustrations

Initial process

Styleguide

Colours

Our main colour palette relies heavily on the contrast between dark and vibrant colours. We defined specific colours for certain states and an orange as a connection point to Bitcoin, with blue as the main colour used for highlights and calls to action. For the backgrounds we used lighter versions of the main ones.

Styleguide

Typography

Two different platforms, two different fonts. Vaud for that bold modern personality of the website. San Francisco, as the system font for MacOS, is optimized to give you unmatched legibility, consistency and performance on the Web App.

Styleguide

First Illustrations

For the illustrations we tested multiple alternatives and styles. On the first iteration the concept was intimately related to people on a parallel dimension, using devices and other elements that were relatable to the product, and on the second we focused on 3D styled elements.

Styleguide

Final Illustrations

Sometimes even when we are happy with the results, if it doesn’t feel right for the project, we go back to the drawing board! After some brainstorming, and few sketches we decided to take some risks.

Styleguide

Icon sets

Just like the fonts, two different platforms, two different iconsets. For the platform we created a line icon set that would support the navigation items and actions.

On the website, a set of illustrations that represent each of the platform's core features.

Website

Website

Wireframes

Our obejctive was to represent the future way of making payments, portray the product story and show its features clearly and effectively and create a website that grabs the user’s full attention. So before creating "pretty pixels" we began by defining structure and content.

Website

Website Launch

The website opennode.co was launched to showcase the platform’s beta version! A single source of truth to explain the platform’s core features!

Website

Mobile

Even as a product for the future, we must not forget today's devices. We took that to heart and had special care when we designing the responsive version. Function was key when adapting the experience for on-the-go.

Platform

Platform

Redesign

After analysing all functionalities, flows and the user feedback from the already existing version of Openndode, it was clear that we needed to create a brand new design language to create a consistent, intuitive and pleasurable platform.

Platform

The Flow

In order to reduce complexity it was important to define priorities to achieve a platform that had a more intuitive user flows. We tried to understand which actions and elements had greater importance and relevance and which were the user's functional and behavioural expectations.

Platform

Components

We created a design system that served as a visual guideline for consistency on the entire platform. We also kept detailed documentation that we updated regularly throughout the design process as single source of truth that ensured efficiency in our workflow.

Platform

Onboarding

Not every change we made was a visual one! Even though we were building a brand new Web App we couldn’t disregard older Opennode users. For usability sake we needed to guarantee that ALL users knew where every main action was and how to execute them. To achieve this we created an onboarding tour that allows users to get a sense of the entire platform, just like we normally do when visiting a new city.

Platform

Getting Started

Creating an account with Opennode is FREE and extremely simple. Name, email and password is all we need. But in order for users to experience the platform's full potential they need to add a few things to their profiles. To simplify users' lives we created a checklist, so they could figure out which steps need completion in order to fully experience Opennode.

Platform

Instant Exchange

The old version’s instant exchange was creating some confusion amongst users.Two very relevant but different actions had the same visual treatment and were next to each other. To solve this we moved the instant exchange button and placed it between currencies.

Platform

New Page vs Modal

One of the biggest experience flaws of the old version of Opennode was the abusive use of modals. Every action opened a modal which didn’t allow for much leverage on secondary actions and extra details. That’s why we opted to open a new page as a consequence of every core action, allowing the user to focus entirely on his actions with step navigation always within reach with the use of breadcrumbs. Modals become more secondary and are now only used to view details.

Platform

Modals

With modals now being used for details, we still had to manage the way they display information. We opted to show only the essential information from the get go, allowing the user to extend it only when extremely necessary with a “show more” button.

Platform

The “Grid system”

We created a grid that was indepent of the sidebar, allowing the user to focus on a more organised content. To enforce this idea, every action the user has to take is always placed on a small and specific area, highlighted below.

Platform

Retail Process

There are two ends to the retail process, the opennode user (the retailer) and the client. The process itself is very simple, the user creates an invoice for the purchased products and the client selects the preferred payment method.

Platform

Mobile

Built like a native app, the platform adapts to the device. For retailers, the process is mostly done on a tablet or on a mobile, and that’s where the platform really shines.

Platform

Mobile Grids

Using the same 4-columns section of the desktop grid, everything feels right at home in this responsive version. The same components in the same place, with the same size, adapting only to the limitation of the screen.

Platform

Mobile Navigation

On the desktop version of the platform, the sidebar serves it’s navigation purpose by giving the user quick access to the platform’s core pages. On mobile, to allow the user the same level of practicality, we transformed the sidebar into a top menu for easy finger access.

Platform

Dark Mode

For all the Opennode users that use the platform mainly at night, it was essential to create a dark mode. It not only lets the user focus more on the platform’s content but also isn’t too tiring on the eyes.

AKASHA

Open systems to expand our collective mind

View project