Velcron

Working with Velcron to create the trading interface was one of the most challenging but rewarding experiences I had as a freelancer. The job was beyond what I usually do and allowed me to explore an industry I previously never had any exposure to. The experience was one of mistakes and delight. Documented here is the design/code process in all its glory and horror.

Velcron is a young new startup poised to change cryptocurrency trading platforms. They saw that in current trading platforms like Bitfinex and Binance, the UI was prohibitive to new users and confusing to power users and transactions were slow and at times unreliable. Velcron hopes to solves these problems with a novel decentralized trading system that allows ERC-20 coins to be traded with no central system. This allows for fast and super reliable transactions.

I was brought on as a freelancer to help design and code the front end user interface. There were a few parameters they wanted to uphold in the design.

- Familiar to pro users

- Easy for new users to learn

- sleek

- UI is data oriented; users can see the important data easily

Initially, I perceived the design was meant to be for consumers and not pro-users. I thought they were trying to build a platform similar to Coinbase and Robinhood. This misinterpretation of the vision of the product was a fatal mistake on my part in the beginning. As I created the first version of the interface, the design was not focused, and didn’t address their needs at hand.

It was after extensive critique from the co-founders that I refocused my mind and learned one of the most important lessons about design.

I took a while after V1 to understand pro-user oriented UI. I have always in my career built consumer-facing products and I built a mental framework for consumer oriented interfaces. When I translated that to the pro-user trading UI for Velcron, the UI was terrible. To help learn what it takes to make meaningful pro UI, I looked up all the cryptocurrency trading platforms and gleaned many design decisions they make. Eventually, I came back and tackled the UI again with V2.

V2 got a much more positive reaction from the cofounders and I personally felt that the UI found its own direction. I knew now what to improve, what to hone and what features they needed. From this point, I spent the time honing the UI design and getting it ready to be “converted” into code.

With V6, the “final version”, I pulled out my trusty atom editor and started to develop the components. I am a huge believer of the atomic design philosophy. The reusability of components, especially in a trading UI for a company in their early stages, is very important, and for that reason I chose to return to my favorite web dev framework: react + styled-components.

After a grueling few days of work, I managed to get all the components done, albeit I had to extensively polish everything I created.

The next few days were just a ton of polish and minor changes. Eventually though, as the design was coming together, the cofounders felt the design was missing something … it didn't feel sleek anymore and it was very important to us to make the UI not scrollable (users dont have to scroll the page to see data).

I went back into the components to reduce all the spacing and rebuilt the layout code to help suit their vision. Along the way, a reimagined a few of the components from the original design to save space and provide users with a better user experience.

One of the biggest pain points for me was the order form. The order form is the most important component for users to make transactions. It needed to be understandable, reduce mis-clicks, and conserve space.

I went through many iterations to try to get the design right.

The final version came out to have the right balance of space conservation and user experience.

After settling with the new order form, a whole slew of changes were made to the UI from where components are located to row heights. After an extensive amount of polish, the cofounders were happy with the UI.

Eventually, my time working on the project ended and I handed off my work to the CTO. The experience was challenging, but very rewarding. I truly learned how to take feedback and how to evolve a design into an live version.

Velcron is still heavy in development. I look forward to seeing their product released soon!

Note: I do not own any of the designs.