Being a small startup, every day is new and exciting. One day we are working on releasing a new feature, the next day we are redesigning our logo. We are always on a roll. This time our objective was to launch a completely new project.

We decided to kick-off the CoinOrderBook project because the team realized there is a considerable demand for real-time market data for cryptocurrency trading. Even though similar data is available from various sources, the industry is still missing accurate real-time data that is easy to consume. This is precisely what allowed us to think differently with all the data we have at our disposal.

We wanted this to be a quick hackathon. Everything related to the project needed to be done in a single 1-week sprint.

Today I will share the process we went through from a designer’s perspective. This is different because it is not only a design project but a real-world product, which needs to be available to our users within a short period.

Designing a new website takes non-trivial time and effort to research, brainstorm ideas and investigate concepts. The product specifications need to be written, wireframes created, site designed, and the implementations need to be tested and quickly iterated upon.

For this project, we had to accommodate all these steps within an aggressive timeline, but at the same time making sure none of the steps are skipped.

Process

I started by discussing with Michael (the CEO of Shrimpy) about the requirements, expectations, contents, and objective for the project. I tried to get a clear picture of the vision behind the project. Asking questions like “how will CoinOrderBook fit into our product ecosystem?”, “what features will differentiate our data service from other similar products in the market?”, and “what experience are we trying to promote with this website?”

Michael explained that although there are similar websites in the market, we will be focusing entirely on the real-time aspect of cryptocurrency market data. Up until this point in the crypto space, it’s been difficult for traders and active investors to get insights into how the market is behaving on short time scales. CoinOrderBook will act as the liaison between exchanges and these crypto traders. Instead of jumping from exchange to exchange to get the most up to date market data, they can have a single aggregated source which provides all the data they need.

In addition to the benefits of this project to the community, it also strengthens the Shrimpy ecosystem. CoinOrderBook demonstrates the capabilities of our developer APIs while at the same time provides another resource for the traders that use our portfolio management application. Being a public facing website, it also means we can leverage this project to funnel traffic to our other products and services.

After gathering all the information, I started to look at similar websites. Since we did not have a lot of time to come up with a creative design layout for the site, we decided to go with the more traditional layout what others have already done for similar sites. The data layout was comparable, but the data visualization was different than other competitors. We were having a hard time designing the visuals in a way that was both informative and appealing at the same time.

Instead of going into paper sketching or low fidelity wireframing, I directly jumped to XD and did the high fidelity wireframe just to have a clear idea of the design. This time we did not go into the long process of iterations and feedback; instead, we used the whiteboard and instant feedback to solve any problem throughout the process. After a few iterations, we were able to approach reasonable solutions to our concerns with the data visualization.

We wanted our first version of the CoinOrderBook to be useful and straightforward. We didn’t want any intricate design, so it’s easier to develop within a short amount of time.

For the logo, we improvised. Many of you know that we recently redesigned the Shrimpy logo. If you didn’t, you can read about it here.

While redesigning the new logo, we did a lot of iterations for the final logo. In fact, we found the perfect logo for CoinOrderBook from one of the alternatives that we already designed at that time. We decided on the logo not solely because we felt that the logo would go well with CoinOrderBook, but also it has an inherent characteristic that conveys the essence of the product. It has a semi-circular network of connected nodes resembling the shape of the letter “C”; C precedes both Crypto and CoinOrderBook.

After finalizing everything, I quickly had to work on the responsiveness of the website. It is imperative for the sites to function correctly in every screen size without sacrificing the quality of the user experience.

By the end of the week, we might have all been exhausted, but it was well worth it. CoinOrderBook launched exactly 1 week from the day we started the hackathon. Although there are improvements that could make the project better, everyone is proud of the first version of the website. It’s simple and sleek. There aren’t a lot of bells and whistles, so it’s easy to use. Overall, it was a fun and unique experience. You can see the live finished product at coinorderbook.com.

Thanks for stopping by. Really appreciate your time!

~Sumaya