​Nanoom is an API that enables Nano pull payments for recurring and subscription based invoicing, easier check out and more.  

Overview

Understanding Nano

​Nano is a decentralized, sustainable, and secure digital money providing solutions where existing financial systems may otherwise be lacking.

Nano is fee-less, instant and open to all, providing a simple option for peer-to-peer money transfers.
It makes digital money accessible and connects people to the global economy with minimal impact.   

THE CHALLENGE

​Making Nano enabled payments user-friendly

As cryptocurrency continues to be on the rise, the Nano community is also expanding, resulting in a greater need for better User Experience and Interfaces for products. One of the biggest struggles being that the technology enabling Nano payments is not straightforward and consequently, the UX is lengthy and not user-friendly. Most Crypto payments are made by either scanning a QR code, or copying and pasting a long, unmemorable address. There is currently no way for merchants to request a payment from a user like they do with credit cards. So recurring payments can be cumbersome as the only current way is to pay an invoice manually every month.  

USERS

Developers at Wallets and at Providers ​   ​​

Nanoom targets developers who work for a merchant or a nano wallet who wants to integrate a seamless payment experience using Nano. As an API, Nanoom provides a way for both parties to connect to a payment network. So developers working on point of sale devices can integrate Nanoom and enable merchants to charge. 

TEAM & ROLE

Team of 2: the Dev and the Designer

I partnered with a web developer who is a crypto-aficionado as well as Nano community member, to build this new product. I wanted to build something that aims to not only promote Nano, but also helps make cryptocurrency more accessible to the masses.

​My dev partner came in with the product development and I breathed life into the brand's look and feel, addressing branding, UX writing, and responsive Web Design.  

Nanoom was developed to improve Nano's usability and target a $149M industry that's lacking in UX. ​   ​

How We Did This

An API was the solution to connect wallets to providers

The original goal for the project, was building something that makes Nano payments as easy as possible. When we started working, we realized that in order to allow payments to be processed seamlessly and automatically, we needed a way to connect a wallet to a provider.

In order to achieve our original goal of allowing users to do one-click Nano payments, we needed to connect the button to the wallet where the users' funds are stored. We then realized that this same process could be used for many other services, and the only way to make this to work, was through an API.

As a payment request solution, Nanoom enables anyone to request a payment from anyone else. If accepted, it executes the payment, much like a credit card.

Look and Feel

In combination with my colleague's industry expertise, we decided off the bat that we wanted the brand to not only be accessible, but represent an up and coming, innovative look. 

Think about the fresh, passionate energy commonly seen in the StartUp world. With Crypto and Fintech breathing innovation at every corner, we wanted the same for Nanoom. 

Shaping the Brand

So...Why Nanoom?

For brands as much as for people, naming is a huge part of one's identity. It adds to one's personality and can evoke different emotional responses. So for this project as with most, I tackled naming and branding right from the start.  

Collaboratively, we both came up with a list of 17 different names, narrowed down to 3, and then voted on Nanoom.

Nano + Zoom (as in fast⚡️, not the company 😌) = Nanoom

Logo Design Process

I enjoy drafting out initial ideas by hand. Pen and Paper always help me get more ideas flowing.

I then transferred some ideas onto Adobe XD, playing with shapes and using the Nano logo as a starting point.

Exploring alternative shapes, these logos reflect a wallet, the Nano logo, a credit card, as well as a folded bill.

Voted on the blue logo in reference to the original blue Nano logo.

4 steps and several back and forths later, we set on the logo we felt evoked slick, memorable, and clean. 

I went for a concept that I felt Nano lovers would all embrace, placing part of the Nano logo front and center, while also referencing other familiar financial icons: a wallet, a folded bill and a credit card.     

Ideation & Wireframing

through Invision Freehand

With my teammate working from overseas, digital tools such as Miro and Invision Freehand proved to be invaluable for brainstorming and ideating concept sketches.

We ran remote realtime collaboration while on Zoom and added notes on the Whiteboard for each other to reference whenever needed.

Here’s one of the wireframes I drafted for Nanoom's landing page, as well as some loose scribbles. 

Design Language

From the drawing board to
custom designs

After a few iterations of wireframes, I drafted out Nanoom's high fidelity design in Adobe XD, which made sharing more efficient thanks to their quick link feature.  

I defined as well, all visual design language including:

• Typography
• Colors
• Icons
• Buttons
• Custom illustrations 

All elements were carefully selected to evoke Nanoom's innovative, reliable, and clean personality. 

Mixed a youthful, very round font for Nanoom's logo with a not so serious san serif for the body text.

Picked a range of purples, blues and turquoise colors inspired by isometric illustrations.

Consistency was key throughout all major elements from color to roundedness.

Isometric Illustrations are at the heart of innovative fintech and wanted to try this new illustration technique

Picked simple and clean illustrations that told Nanoom's story.

Nanoom's logo in both dark and light versions.

Nanoom in Action

No code,
​No more templatized Websites

With web apps on the rise, I chose to build with Webflow because it gave me the best resources to replicate my designs.

​It gave me the autonomy I needed to bring my designs to life the way they were meant to look and feel making front-end development much more accessible and automating the backend.

Without Webflow, it would have taken a few extra days and an increased communication with my dev colleague to build this website from scratch.    ​

Overcoming Challenges

Learning Webflow on the Go

This was the first time I used Webflow to build a design into a real, working, responsive website. Like with any new tool, there were several growing pains during my "learn by doing" experiment. 

The responsiveness was definitely my biggest struggle, coming in with limited knowledge on how to properly structure the main breakpoint layout. Between that and not knowing the best way to efficiently cascade the designs up and down, it took me way longer than anticipated.  

Remote Time Zone Differences

With my teammate being overseas, it was tough working through the different time zones. There was a very small window where we could synchronize our schedules. 

In the end we found our flow. Each working on our own part of the project, occasionally sharing assets and progress shots via chat or zoom.

Tight Deadline

We completed the project in a two week sprint, with the second week practically on full speed. We were working on a tight deadline and time constraints on both ends. 

​In the end we pulled through, deployed the project successfully on time and supported each other the whole way. 

Still intrigued? You've made it this far.

See Nanoom Live

​on your phone, computer or tablet

Next Steps

I am currently in the process of learning Webflow properly as I expand my knowledge of the tool. Working on Nanoom has definitely been a great push and I was able to get a good grasp of Webflow, so learning it formally now, makes all the difference. I plan to apply my new skills tweaking Nanoom and tackling other projects already on my pipeline. 

Monitoring Nanoom for Nano community activity is also in the works as a next step for the product development.

See Next:
Latitud