Block DX

A decentralized exchange application for the Blocknet blockchain protocol.

Blocknet hero image with laptop screen of DX and mobile phone with the trade screen
Blocknet
Aug 2017–Nov 2017

The Blocknet client asked us to create a UI for their decentralized exchange. At the time, users could only access the product through the terminal. Our lean team quickly jumped into learning the ins and outs of trading cryptocurrency, identified ideal features for a great user experience, put together a unique look and feel, and built the front end for the exchange in 3 months. Since Blocknet is run by a decentralized community, our final presentation was a bit unconventional—We presented our final UI to the community on Youtube Live for final approval and received incredible responses (below).

My role

I was the designer on this lean team. So, I was able to own the design of each feature, the overall look and feel, and design system. I worked very collaboratively with one of our awesome UXers to create the UI. Together, with our rockstar front end developer, we were able to create a brand new exchange that was beautiful, intuitive, and well received by the users.

Full width image of comments from the live demo. Many comments are praising the UI

Research

Before we jumped into design or UX, we performed a competitive audit of 12+ exchanges to familiarize ourselves with all the possible features and get a feel for some of the patterns that users expect in an exchange in this space. We then outlined our point of view on the best solutions for the 9 main features that we thought the DX should include.

Image showing multiple slides from a research deck.

Moodboarding

While we were researching features, I was also examining the competitive landscape from a design point of view. Because the cryptocurrency design world is still in its infancy, it was exciting to imagine a unique experience for our client. The client had the beginnings of a brand expression on their original website. Starting here, I moodboarded and presented a few design directions that I felt would evolve the branding experience and work for the UI.

Moodboard direction 1 - Light
Moodboard direction 2a - Dark and flat
Moodboard direction 2b - Dark with demension

Design System

Once we were aligned on a moodboard, I developed the design system components and states. We were working very quickly to establish a MVP product. So, this system of components was very useful for the team to be able to stay agile and adapt to the different configurations and feature changes that we were testing in interface.

Full width image of the design elements and all their states.
Mobile phone in center and 4 additional screens to the side showing each tab of the mobile experience.
Vertical ipad with the exchange screen visible

Designed and coded by me © Emily Hom-Nici 2018