Digital Experience & Interaction designer.


Realtime Monitoring Tool

The Challenge.

We wanted to design a new platform that allow marketer to monitor social media data and insights in realtime. The challenge was that brands sometimes require a constant monitoring of their social media activity, and social media monitoring tools are a bit comprehensive, so wouldn't it be better to be able to access this information quickly and be able to analyze these data in a simpler layout?   

Company: Crowd Analyzer

When:  Feb 2017

My Role: Interaction Designer

Let's make that elegant!


So we started our process trying to understand more about the pain point we are tackling here. This research included desk research, clients/users interviews.

Key findings:

- Our clients needs are basically focused on a quick overview of the monitored data, in a more simple way

- Marketing companies managing different brands wanted to be able to put management in the picture 


With what we had we started to brainstorm ideas of how our platform will look like, and since we were a bit fascinated by the command center concept, we started to discover how we can use it in this project.

our personas


Based on the research we set up two personas. That helped us creating realistic goals to our platform and what we want to achieve with it and how it can help our users. We referred to them throughout the entire platform development process.

To develop those two personas we conducted user research and stakeholders interview as well. as a startup, our stakeholders are more involved with the clients and they know them quiet well, we used this knowledge as extra insights to our user research to develop more complete personas.

1st Persona: Amal
A digital marketing specialist working in a marketing agency and managing multiple brands on daily bases
highlighted goals: Be able to deliver an insightful reports to client

2nd Persona: Fahd
A marketing manager for a multinational company, managing multiple brands under the big entity
highlighted goals: Understand how each marketing department of each brand is doing.

Initial sketches of the screens

I started the design process with sketching the ideas we brainstormed, trying to visualize how it would look like.

The basic idea was there - the concept of command center - so the sketches was more focused about the dynamics of the visuals and trying to find a way of making it more customizable.

This point was solved by adopting the blocks, dividing the layout into 3 equally sized blocks, and giving the ability to extend one block to double the size in some cases.

developing the wireframes for command center

We started putting the sketches in a more high fidelity wireframes, focusing on the data and how to visualize in blocks based layout.  


Once I was done with the wireframes, we started the UI designing phase.

As inspired from the command center concept, the dark style was more appealing in that case, along with an fluorescence accent of blue.

The design was made compatible with different screens, including LCD screen and custom made screens, adopting the users need, so they can use this command center on different events for examples.

The tool used here was Adobe Photoshop.

More users

Lessons I've learned

This platform was used afterward in many events, like: , and we had different technical requirements with each events based on the setup, and with each event we were enhancing the platform to ensure the maximum flexibility of the elements to different -unexpected - screen sizes.