⟵ Back to main page


Designing SMM&A flow‑based interface

TDW allows users to generate live data feeds than can be viewed in reports from constantly changing and updating web data. Any online information can be pulled from social media, search engines, specific websites to online databases.


Data is everywhere today. We discuss big data, small data, think how to gather, understand and use these pieces of information around us and about us. Hundreds of startups focused on data appear in the market every year. UX design was totally changed with the possibility of using data about clients and clients of the clients.

For me, it had always been curious how not using data for UX design ,but instead using UX design for data would look like until this opportunity arrived.

The main goal was to create a new UX strategy and UI concept for Social Media Marketing and Analytics Tool with the flow‑based interface. Of course, I was delighted to participate in this contest.

TDW was a startup with the great idea of the really unique way to work with information, but weak first attempts in building good communication with their users and blurred understanding of who their users actually were. That is why, in applying this challenge, it was decided to start from the very beginning and catch all the missed moves.

The question I start with


  • What actually this tool does?
  • Who uses this software and how?
  • The process looks complicated for non-tech users. Can it be the other way?
  • If it's not, how can I simplify this one?
  • How solve the problem of icons and menus? Restyling is definitely not enough. There are also problems with the structure.

Market research

We can classify TDW to SMM&A software, with the main purpose of extracting, transform and visualise information (some tools also help to reuse it, but not in this case).

Main players in the market are Zoho Social, Hootsuite, Brand24, Synthesio, Sysomos, Brandwatch Analytics, Crimson Hexagon, Talkwalker, Buffer for Business. Let's check their interfaces!

Patterns of use provide different user journeys:

  • One time research (more based on extracting)
  • Non-stop monitoring (more based on visualising)
  • Reusing the information as a content (more based on transforming) provide different user journeys.

Extracting starts from an idea of boolean logic in a search. It's a type of search allowing users to combine keywords with operators such as AND, NOT and OR to further produce more relevant results. The interface of the data mining tool should provide it with the more intuitive and interactive way. Transformation can include filtering, restructuring, mixing, changing of the informational stream. Of course, we need to think how to build an understandable interface of settings, but in our case, we also have to deal with different streams mixing. There is a lot of work with layout structure and drag and drop interactions as well. This question is pushing us to research a data flow interface to understand if it's so intuitive as it looks and how it fits our audience.

Visualising part of SMM&A software usually presented as a customizable dashboard with a lot of screens, especially for online monitoring. The main questions will be how to prioritise presentation of data distinguishing to show the important and hide the secondary with flexible settings for any purpose. Heat maps can help with this and there is definitely a need for information design skills.

Persona development

I collected and analysed all information about service: videos, presentations, tutorial, mention in blogs to understand how TDW see the audience and how the company expects their users will use the product. There was no possibility to collect all data directly from the customer database or inviting and interviewing clients. That's why to determine the target audience, I reviewed about 100 responses from customers about service work and identified the common professions, characteristics and needs. The point is that we can use SMM&A tools to collect data about SMM&A tools! So I did. It helped to separate the main idea in 4 personas and looked at the interface through their experience.

Research again

The problem is that our users are not engineers, programmers or hackers. So we need non-tech-user-friendly, a-lot-of-data-friendly, touch-friendly, small-devices-friendly interface. The principle of interaction with the component-based graphical interface will be the same as a visual coding. (data flow or flow-based programming) So we are dealing with the same user experience and interface and can analyse a large number of similar software products. It can be tested on our audience and different devices before we start to design.

According to thesis written by Alia H. Shubair "The usability of a visual, flow-based programming environment for non-programmers," the Non-programmers have shown an adequate capability of manipulating data using the flow-based paradigm. However, the diversity of participants exposed different needs to be considered by developers of similar environments, like integrating some help examples and manuals to support new users who might not understand a certain part of the code.

Informational Architecture

The most evident problem in the logic of menu/submenu are nested items. Elements can't belong to different logic groups in this case. Also, keeping all items in one menu panel without nesting makes it too long. Users will get tired of scrolling and choosing the right one will be confusing. I have defined the structure of current stage and rebuilt it to simplify the interaction with the Source, Options and Extract. To make more significant changes we need to understand exactly how each element works and how users expect it works. It's evidently the time to invite focus groups and play card sorting with them.

User Flow

Which problem are users trying to solve? Let's take one of our personas George, who cares a lot about protecting the online reputation of his company. So he needs to track his brand mentions across the globe, on every network. He opened the TDW, completed registration process, watched some tutorials, created a new query, added a Twitter as a first source, found right options for twitter to get last 200 posts with mention of the name of his company, added a translator from any non-English language to English and finally set all information to be extracted to table. Then he created two filters to sort all posts into two groups with positive and negative feedback, mentioning proper words. With another element on board, he merged all information to create a chart with feedback about his company and see how the ratio of opinions depends on the territorial factor. The last element sends all the information to the dashboard with special properties to renew it every 24 hours and send him notification by e-mail. Now he can repeat this procedure with other sources like Facebook and sleep peacefully.

Layout structure

TDW is planning to be a web service, but a complex interface and modern browsers possibilities require equating its design approach to creating UI for the desktop application. Based on the above and results of research UI of flow-based software we define the graph editing process as:

  • Adding new components
  • Seeing compatible places for making a connection
  • Finding the available components and graphs
  • Moving the components
  • Changing properties

By double clicking, you can manage the component in the pop-up or right side panel. We'll use the left panel like a functional menu and right one like properties for chosen elements. As any flow-based interface requires a lot of space, we will give the panels dynamic properties so it will expand and collapse.

Element system

There was a number of simplifications made in the data flow design:

  • Tool configuration and its result was merged in one block and indicated all data on it.
  • Created colour system for links and elements, including a special colours to mark all non-active connectors.
  • Visualised the information passing through the graph.
  • Added an icon inside each component to represent the type of element to show the difference between them.

Compact view

Browser-based flow editor makes it easy to wire together graph's element using nodes. But there is still a problem with some of the flow-based editors if they dive into too much detail, making graphs confusingly disorientated. Vertical and horizontal scrolling change to scaling and moving work area to any side. the amount of information inside each component changes by scaling. Managing the blocks we can easy stick it together to get more space or drag and drop it by any touch interface which make this system ready for mobile devices.

Adding new element

There are two different ways to add a new element. We can drag and drop any item to the work area or press “plus” button and also get the menu. The items that are not associated with the current block will be marked as inactive. It is also possible to add two elements and connect them afterwards.

Work area

The visual style of main service page is represented in dark colours by default with possibilities to change it. It relies on the TDW brand book-style guide. Navigation is possible by using the tool panels on each side (both can be closed if needed) and some functional items are located at the bottom of the page. The right panel replaces the browser frame and can now be used for options or for a tutorial. Left menu elements are supplemented with icons. The same icons will be on graf elements after being dragged and dropped to the work area. Also, the query can be changed, closed, saved or user can return to home page.


The best design of course, like a good joke, doesn't need an explanation, but unfortunately, in this case, there's too much complexity. The tutorial system is a combination of methods that include:

  • The guideline for reading on cold winter nights;
  • Video lessons, blog and ready presets;
  • First-enter escort;
  • Hover boxes with information about the items being covered;
  • The UI reaction on user actions;
  • Search input.

Hololens ready

The big bright elements with all data inside can be redesigned in 3d blocks and easily manipulated with AR devices.

The big bright elements with all data inside can be redesigned in 3d blocks and easily manipulated with AR devices. The colour's functional and aesthetic roles for Hololens must be reconsidered in relation to the user's real surroundings. The users use gestures to take action. Now Hololens support discrete gestures like air-tap and continuous gestures like navigation and manipulation.