Reut Levi Katzav
UX/UI designer

The purpose

The purpose of the dashboard is to present the data from the different sources so that the salesperson can know which source has better results and which ones have less.

The information should be clear and easy to understand, so that the salesperson promotes the product sales in the best and most effective way.

I got wireframes that I needed to work on. The UI was completely open.

Your Project Title

Inspiration & research

I was inspired by Data Visualization on all kinds of sites on the net and also read articles. I researched how to present information in a good visual way and how to organize it.

Link to some of the articles I read:

Article 1Article 2Article 3, Article 4.

Images for inspiration on Data Visualization:

Your Project Title

Choosing colors

It was important to me that the colors of the buttons and navigation would be different from the colors of the categories in the graph.

Buttons and navigation colors

Buttons and navigation colors

Categories in the graph colors

Categories in the graph colors

The graph design process

Versa number 1- At first I tried designing by layering within one column per day. One column arranges and separates the days in the timeline.

But the visibility was busy and crowded, sometimes a thin layer can disappear between the many layers.

Your Project Title

Versa number 2- I continued to design with a connector line between the points in the timeline. This makes it easier to see the difference between categories than a single column design.

This design helps the user to see the development of each category over the timeline. But there is still a visibility overload when the categories appear next to each other. 

Your Project Title

Versa number 3- I switched to a 7 column display.

I have 7 categories so each column will be thin (but not too much). On mouseover, one of the columns expands and displays the category process over the timeline.

Each category column is viewed separately and if the user wants to go deeper he can mouseover it to see more detail.

And that is how the design looks:

Your Project Title
The mouseover design to expand on a particular category.

The mouseover design to expand on a particular category.

When there are no search results, I used an illustration related to the world of data and shows that there are no results. The microcopy also offers help with the solution, if you change some parameters you may find better results.

Your Project Title

What I have learned from the project

  • I researched and read a lot about the different ways to view data. I began to understand the different needs of salespeople and what's important to them to see.
  • It was very interesting to understand the difference between timeline data and  display data.
  • I enjoyed the challenge of finding a solution to show the 7 categories in a readable and understandable way.
  • I was exposed to new tools for choosing colors in the graph, and the importance of color darkness in graphs.
  • I started taking part in a great group- Data Visualization on Facebook. I really enjoy all the materials that designers share there.