Opennode.

---

Initial Process.

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.

Typography.

Two different platforms, two different fonts. Vaud, thanks for the 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.

First Illustrations.

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

Final Illustrations.

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

Icon Sets.

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

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

---

Website.

Wireframes.

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

Website Launch.

Our objective was to represent the future way of making payments, portray the product story 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.

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 designed the responsive version. The function was key when adapting the experience for the on-the-go.

---

Platform.

Redesign.

After analysing all functionalities, flows, and 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.

The Flow.

To reduce complexity, it was essential to define priorities to achieve a platform that had 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.

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 regularly updated throughout the design process as a single source of truth that ensured efficiency in our workflow.

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's 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 gives users a sense of the entire platform, just like we usually do when visiting a new city.

Getting Started.

Creating an account with Opennode is FREE and extremely simple. Name, email and password are all we need. But 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 to fully experience Opennode.

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.

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 model that 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.

Modals.

With modals now being used for details, we still had to manage how 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.

The "Grid system".

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

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.

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.

Mobile Grids.

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

Mobile Navigation.

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

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.