How to build a social media monitoring dashboard prototype

Justinmind
Justinmind
Published in
7 min readOct 19, 2017

Learn how to build your own social media dashboard with statistics and metrics all in one place with Justinmind prototyping tool

Keeping track of user engagement, likes, clicks, shares and followers can be a daunting task, even for the most proficient social media managers out there. That’s why a social media dashboard can be your best friend. Justinmind comes with pre-made widgets and an intuitive drag and drop — meaning you can build a social media dashboard with minimal effort but full effectiveness. And we’re going to show you how.

Whether or not you’re in the social media game, building a dashboard is a great way to create a simple user experience design while maintaining optimal usability. What may look simple at a glance often has a lot of design thinking behind it — having too many metrics in a dashboard may be a hindrance to the user. When you understand how to put a social media dashboard together, it can help you move on to more challenging monitoring systems and dashboards.

What is a social media dashboard?

A social media dashboard is a useful way to manage and view the analytics for your own or your company’s social media platforms. You name it — Facebook, Twitter, Pinterest, Instagram, these platforms can all be integrated into a social media dashboard.

Why use a social media dashboard?

Having all your metrics and data in one place makes it easier to see those important numbers in one place, available for a quick glance. This way you can measure your presence across multiple channels and what gets measured gets improved.

Social media dashboards can help you work more efficiently and effectively. The features found in a dashboard range from scheduling tweets, analytics overview, collaboration tools and content permission controls. Not all dashboards are born equal, some have more advanced capabilities while others take a more simplistic approach. Business preference and needs will determine your social media dashboard definition. In this how to, we’ll cover what goes into creating an analytics overview style of dashboard.

Download Justinmind & prototype your own social media dashboard

The benefits of building a social media dashboard

A good, well-designed social media dashboard has many benefits. As companies use multiple channels to get their message out to their customers and audience, dealing with all the work that comes with that can be time consuming. Here are just a few benefits to using a social media dashboard:

  • All-in-one monitoring at a glance. View all your vital metrics on one screen to evaluate progress.
  • Time-saving. No need to login to individual channels.
  • Analyze and compare your data, week on week.
  • Know which platforms and what content your audience responds to most.

What goes into building a social media dashboard?

In our example, we want to focus on the most important and popular social media channels: Linkedin, Twitter, Facebook and Instagram.

A dashboard can be broken down into various panels which contain content. The panels can represent the rise and fall of your number of followers, the number of clicks you’ve received, Twitter favorites, likes — the list goes on. Bar charts, line graphs and bubble charts help to make the data more visually attractive and easier to read. Download our Charts UI kit to populate your interactive wireframe with engaging data visualizations.

How to build a social media platform in prototyping tool Justinmind

Creating a social media dashboard might look scary, especially with all those numbers, percentages and graphs. But when you break it down bit by bit, the whole thing is a cake walk. Thankfully, Justinmind comes with pre-made widgets so many of these steps are completed with a simple drag and drop.

We can break the dashboard down into two parts. The first is the login screen and the second is the actual dashboard. Take notes and let’s begin!

Prototype a simple login screen with Justinmind

Since social media dashboards focus on the numbers, it’s a good idea to maintain a relatively simple and clean UX design. You want as few distractions as possible when crafting an interactive prototype of this nature because the focus should be ensuring users can get the relevant information without any stress or extraneous effort.

  1. Go ahead and create a new web prototype. You can adjust the size to your own preferences or maintain the standard 1024 x 768 pixels. Once you’ve got your web prototype open, to the left drag in 2 text widgets, 2 input text fields and a button into the canvas. These elements will represent the Username field, Password field and Log in button.
  2. Create another screen — name it ‘dashboard’. You can do this on the right-hand side, under Screens. We’ll come back to it later when we get into creating the social media dashboard. Exciting!
  3. Drag the login button up to ‘dashboard’ under Screen. This will link the two screens.
  4. Make your prototype high-fidelity by adding conditions, in this case verifying the user and password.

For bonus UX design points, don’t forget that when creating a login form in Justinmind, you can also simulate error messages that will tell users that they’ve entered incorrect information.

ui-design-social-media-dashboard-prototype

Building your social media dashboard

Congrats on creating an awesome login form. We love seeing what people create in Justinmind, so don’t be afraid to share your work with us on Twitter! Now, let’s get into the juice part -the dashboard.

Since you’ve already linked your login page with your dashboard screen, go ahead and fire that screen up.

Your social media dashboard definition is up to you so be creative. Remember, however, that you want to ensure that the dashboard is user friendly and not a headache to figure out. It’s meant to inform not confuse. When deciding on the composition and layout of your elements, put yourself in the shoes of the user — the person who will be looking at this dashboard — what information will make the most sense? What information is the most important?

Ideally, you want to know which panels are going where before you start your interactive prototype. A quick sketch should be sufficient to help you get started. In the widgets panel, you can use our range of shapes and text boxes to create the titles for your panels. Use text widgets as headlines for your panels.

Let’s say we want a panel to show our social media followers. You should drag in a text widget and write in ‘Social media followers’. You can repeat this to define your other panels: ‘Twitter favorites’, ‘Retweets’, ‘Instagram overview’ etc. Use the image widget to insert icons of your desired social media channels. Put your content in a dynamic panel. Click the plus sign in your dynamic panel to add additional panels. The additional panel will be used to switch between different time periods in your dashboard.

Let’s imagine the dashboard you’re creating shows the last 7 days of statistics. If you want your prototype to show more than one period of time, you can use the ‘select drop’ widget under navigation. This will allow you to switch between the dynamic panels to show either 7 days of statistics or a month.

How to populate your social media dashboard with real data

Since your social media dashboard will contain numbers and data, it’s a good idea to populate it with real numbers. This is possible in Justinmind with data masters and pre-existing CVS files. Why do you want to put real numbers into a prototype? It means that stakeholders can get a better idea of the functionality of your design and makes the UX design of your prototype more realistic. The full illusion, if you will.

Create a new data master in the data masters tab and give it a name. You can name your fields in the data master but they must correspond with the named fields in your CVS file in order to import properly. Click OK. Double click the data master to edit it, under review and records tab you will see an import button — this is where you can upload your CVS file. Click OK. You’ll see the data from your file has populated your data master.

Let’s imagine the dashboard you’re creating shows the last 7 days of statistics. If you want your prototype to show more than one period of time, you can use the ‘select drop’ widget under navigation. This will allow you to switch between the dynamic panels to show either 7 days of statistics or a month. Don’t forget that you will need another data master with additional data if you wish to switch between your dynamic panels. In this instance each dynamic panel should have its own table with its own data.

Once you’ve composed your panels in the prototype, populated them with real data using data masters, given them titles, added the relevant charts and graphs from the UI kit and inserted the right social media icons, your dashboard is done, ready to be sent to a developer.

Social media dashboards — the takeaway

The benefits of a social media platform mean saving time and working smarter. Prototyping a social media dashboard with Justinmind is complete in no time at all — with real data to boot. Coupled with our wide selection of useful charts, graphs and bubble charts and pre-loaded widgets, you can create a social media platform that packs a punch: real data with great data visualization and none of the pain of endless scrolling through spreadsheets filled with metrics. Who said data had to be ugly, anyway?

--

--

Justinmind
Justinmind

The best tool to design and prototype web and mobile apps: www.justinmind.com