Dashboard UI&UX DESIGN
SocialMedia & Branding Dashboard for Maven 7
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.
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.
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.
Typography & colors
We used perfect contrasts to convey a crisp and clean feel through typography and colors.
– Basic headlines / Franklin Gothic Book
– Body text / Arial Regular
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.
The main navigation was designed to make moving between content units easier through the iconography. It allows the users to gain information easily by opening the menu and reading the textual content.
Overall, we produced visuals throughout all 22 layouts that are easy to look at and content oriented.