Decentral TV

Cross platform blockchain wallet, exchange, markets and news - all in one app.

Overview

Decentral TV is desktop focused dashboard with the focal point being on a curated video playlist. The dashboard also offers live cryptocurrency ticker prices, live Twitter feeds, a real-time Bitcoin chart, headline news, and promo spots for potential advertisers.


The Process

The process for this project involved 5 stages - dashboard research, low fidelity wireframes, visual designs, and design hand-offs, and design implementation.

 

1. Dashboard Research

Various dashboard designs were researched on Dribbble, Pinterest, and Google. Specifically, dashboards with charts and graphs combined with dark and light themes were explored.

2. Low Fidelity Wireframes

This entire project was essentially a one page design consisting of widgets. The focus of the wireframes was to ensure that the widgets could adapt for desktop, tablet, and mobile. The wireframes were presented to the stakeholders, then revised based on feedback.

3. Visual Designs

Various designs were explored in terms of colour combination and dark vs light themes. The visual designs were presented to the stakeholders at various stages, then revised based on feedback. Ultimately, a high contrast colour palette was preferred in combination with a dark theme.

4. Design Hand-Offs

After the visual designs were signed off on, the final designs were handed off to the front-end developer. A style guide was provided with fonts, colours, and button states. All artwork was designed using Photoshop. Only PSD files needed to be delivered to the developer for implementation.

5. Design Implementation

Working beside the developer who is responsible for design implementation has it's advantages. This allows for rapid UI audits, and fine tuning can be done on the fly. The designs were implemented in an accurate and efficient manner.


Challenges and Solutions

The challenge of this dashboard was deciding on how to display the plethora of data. The solution was to compartmentalize each section, allowing the user to easily distinguish the nine different data sets - company logo, prices for exchanges, date and weather, Twitter feed, Bitcoin chart, news headline, price ticker, and promo spots.

 

Custom Built Chart

Bitcoin prices update in real-time every few seconds. A custom built chart was designed and implemented to align with the dashboard's style.

 

Live Twitter Feed

Live Twitter feeds from a curated list of sources needed to be displayed. Styles are applied to the feeds to align with the dashboard's style.

 

Live Coin Ticker

A scrolling ticker is displayed at the bottom of the dashboard. A fade to black is used on either side to separate it from the promo spots.

 

Fully Responsive

Although desktop focused, the dashboard was also designed to be fully responsive.