Sci-Fi Dashboard

  • Category: Web Design 
  • Completed at: Lonres.com, 2014 (Current work in progress)
  • Responsibilities: Design and Layout
  • Tools: Photoshop, Illustrator, Balsamiq

I was asked to design a status dashboard to be displayed on a big screen TV in the office.  I was told what information needed to be shown, but was encouraged to experiment with the design and produce something a bit different.

I started off by wireframing the content to make some sense of the categories of information I needed to display.   

TV-Dashboard-WireframeTV-Dashboard-Wireframe

After discussing the wireframe with my boss, we decided to lose the notifications (bottom right) as it should be obvious enough from the display when something was wrong.  We also agreed that the dropdown menu on the top right might be unnecessary and could be removed for now.  I got to work on producing a design.

TV-Dashboard-Design-13TV-Dashboard-Design-13

My boss liked this design, and so did everyone else I showed it to.  But he felt that it was a little plain, and there wasn’t enough variety of design presented.  He wanted to see something that was brighter and more interesting and really stood out, so I decided to spend some researching sci-fi interfaces.  I thought the way they displayed information might work and be quite a lot of fun too.  I looked at films like Oblivion and Prometheus, and games like Crysis.  They all had futuristic, distinctive UI styles.

I started work and put together the following:

TV-Dashboard-Design---Future---22TV-Dashboard-Design---Future---22

I used a satellite photo of London as the background, because I felt it was appropriate for the content we were displaying.  Our systems cover property in all of London.  The crosshatching and the font choice were meant to signify a sparse, high-tech look but something wasn’t working and my boss agreed.  I decided to go back to the drawing board again and produce something a bit different.

TV-Dashboard-Design---Future---31TV-Dashboard-Design---Future---31
sci-fi-dashboard-on-wallsci-fi-dashboard-on-wall

I decided to really focus on the UI feel.  Using a photo of a plant, I managed to blur and blend it into a simple background.  Adding some binary and fiddling with blend modes produced a pretty convincing star field.  Adding the hexagon tiles either side framed it.  I wanted to produce a curved, pespective UI but this was going to be too hard to design and too hard to develop too, so I just left it with the curved area in the middle.

Work in Progress…

The design looked pretty good, and was very unlike anything we’d seen in the office before.  Whilst it was a bit over the top, people appreciated it as something that wasn’t just a boring dashboard.  It had a personality and was fun to look at.  Unfortunately it is a little bit too busy, and I am currently working on refining the design to make it easier to read.