Dashboard UI&UX DESIGN

SocialMedia & Branding Dashboard for Maven 7

Our Contribution

For this project we focused on two things we’re very good at: prototyping a future web service and developing a design concept. We were tasked to produce a thought-out, functional and attractive interface. We did all of the UX and UI work, while the front- and back-end development are credited to the client.

Wireframes

The essential steps for starting any project include digging for information, research, analysis, a solid hypotheses, and the desire for something new. The client did all of this and, as a result, we were given a clear vision for the project: persona definitions, needs and expectations, scenarios, draft wireframes and content, as well as the brand colors and typography.

We studied these resources and started to work on the detailed wireframes & interface design.

 Site structure we got from the client

Navigation

Our main goal was to achieve a content oriented layout with easy navigation. As the visitors spend hours using the service every day, we wanted to match the visualization of the content with their needs. Every item that appears on the screen has to be clear and distinct. We experimented with two navigation patterns.

In the end, we decided to go with the classic dashboard navigation. As most of the users view the service on a 16:9 screen size, the use of space had to orient towards vertical rather than horizontal.

Data visualization

The data visualization system is the basis of the marketing strategy. It analyzes four different types of data: user behaviour, tweets, hashtags and the domains used in the tweets.

The incoming daily data needed to be visualized in four different ways, which we achieved by using the colors of the brand.

The visualization was created in D3.js framework. Our task was to design the visual relations accordingly.

  Hashtags, users, domains data visualization
 Timeline iterations

Typography & colors

We used perfect contrasts to convey a crisp and clean feel through typography and colors.

Basic headline

Basic headlines / Franklin Gothic Book

La presente Privacy Policy ha lo scopo di descrivere le modalità di gestione di questo Sito, in riferimento all’uso dei cookie ed al trattamento dei dati personali degli utenti/visitatori che lo consultano. Si tratta di un’informativa resa, ai sensi degli articoli 13 e 122 del Codice in materia di protezione dei dati personali

Body text / Arial Regular

Basic colors

 #002846
 #829FCB
 #1162A4
 #f8f8f8
 #a3162d

Graph colors

 #ADC55D
 #E09C33
 #7D78A9

Layouts color theory

Because we received the Brand book, we were able to use colors that are easy to distinguish but still allow us to show the connection between the different items in the content. We also kept the user scenario in mind, to make daily use easier we chose darker tones for the background and lighter, brighter colors to make the content stand out more.

Icons & UI elements

Custom icons reflect the entire site’s direction, so we kept it simple and clean.

For easy browsing and navigation we made user interface elements consistent in their placement and meaning.

Influence
Timeline
Hashtags
Domains
Opinion leaders
Brand reputation
Brand image
Brand engagers
 Main navigation
 Calendar
 Peakpoints
 Manage keywords
 Dashboard options

Final designs

Overall, we produced visuals throughout all 22 layouts that are easy to look at and content oriented.

 
59
Working hours
 
3
Meetings
 
42
Emails
Sketch icon
Sketch
Sketch mirror icon
Sketch mirror
Invision icon
Invision
Maven 7