Bitcoin, for everyday.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Open systems to expand our collective mindView project