Understanding Data.

Nano insights( Client name is an alias for confidentiality) is the largest marketing and insights company, with the majority of its product, focused on customer data surveys from top companies. For this project, they approached us with a unique problem and a proposition. They had extremely detailed data and they presented all of their findings which are very detailed in PowerPoint which made things really cumbersome, plus the fact that it was not on the cloud and the data visualizations were not interactive seriously inhibited the decision making of the top execs for their client, one of the largest banks in the world. The data gathered over 10M+ data points under the various sectors in more than 30 odd countries that determine the future trends and provide valuable insight to its customers who use these to make important business decisions.

joshua sortino LqKhnDzSF 8 unsplash uai

The product was originally represented as a huge presentation and excel sheets that showed trends and figures in various market segments. The client wanted to concise these down to a dashboard that could be easily navigable with advanced functionality such as data filters and relations from data points. This required an understanding of how the customers are going to use the dashboard what are the various calculations and filters that would be used to arrive at the data figures and what are the different data types and the models that represent them as visuals.

Navigating Clarity.

One of the bigger challenges faced was to create an easily navigable user journey. The original product was on PowerPoint and Excel sheets and although this was hard to navigate the customers were used to this form of navigation. This was a key point of consideration when designing the dashboard. We structured it into 4 key blocks of which 3 were identical representations of the elements on their previous product.

Wireframe uai

The Navigation block on the left would act as the central hub where users could navigate through the different markets and each dashboard would contain the market data with a top to bottom filter hierarchy. Colour and Opacity played an important role to quickly find the relations between markets and this could be easily stacked on top of each other add complexity while still keeping the overall dashboard clean and easy to understand. Additionally, each graph when clicked would show an isolated relation to making it easier to use and avoiding the use of multiple filters and rules to arrive at a certain insight point.

Data Visualisation Types.

Data Visualisation was key to making sure the user experience that we ( Client + Analogy) sought was represented in the right way. At the same time, we had to be cognizant of the fact that we had to develop, test, and also make sure there were no bugs in the overall application. We also had to keep in mind behavioral traits on the user side to make sure that they were not being presented with something that was radically new and different which made their job harder. It had to have the right amount of innovation in terms of UX, navigation, and UI and so we set out to figure out the basics of graphs and the kinds that should go into a dashboard. There were multiple prototypes and visual options built in the form of graphs and some of them are outlined below with all the information and data changed so as to maintain client data confidentiality.

The key would be to make sure if there was a bar graph or a pie chart, they were represented in the right way and showcased relevant data that made sense. Read below on why there were chosen.

Bar Chart uai

This type of visualisation was used to represent a relationship between a few data points and markets, the bar chart is simple to understand and is best to represent simple relations between data

Stacked Bar Chart uai

The stacked bar ads a second layer of complexity to the original bar chart. This is used when you want to represent multiple characteristics under one market and compare this with the characteristics of another.

A stacked bar graph gives a quick overview of the differences between the two market segments as well as breaking down the composition of each market response.

Scatter Point uai

A scatter point graph provides a birds-eye view of the market trends between multiple markets, this type of visualisation is a great way to understand future trends as it is capable to display data at a much larger scale, the drawback of this type of graph is that you cannot go into some of the details that make this relation.

when combined with a dual-axis chart this type of graph becomes extremely powerful showing global trends and the relation between two markets.

Radial Graph uai

Radial charts are best used to display data points that add up to 100 or a fixed number that will be used between two markets. This shows the percentage breakdown of each data point. This type of data visualisation can be stacked with concentric circles to show the relation between 2-3 more markets.

Bubble Chart uai

A bubble chart shows the data relation on 3 different axes, X, Y and Z can be used to display various forms of data this can also be overlayed onto another bubble chart to provide insight on the relations between the two market segments.

Understanding Data Relations and Filters.

Each data visualisation type and chart had to be mapped out so that this could be then translated as a working model in Power Bi. The team collaboratively working with the client’s data processing department as well as the power bi developer to better understand the complexities, calculations and various data types that would be to arrive at the final data points.

charles deluvio OWkXt1ikC5g unsplash uai

At this point, we decided to try out two different approaches, a data calculation approach where power-bi would calculate the raw data and generate visualisations and a compiled data set that was light and faster to run. Each of them came with its own set of challenges the compiled data approached required multiple ‘”hacks” and tricks to apply certain data filters white the other approach was too data-intensive and had to be heavily optimised to avoid an application crash. and We hired two separate power-bi development firms to build these relation models. Since the project was a very high stake and we were running very short on time we ran these two approaches parallel.

markus spiske qjnAnF0jIGk unsplash uai

Power Bi Development.

Being a design firm our primary focus is on the user experience and the customer experience, this project required us to break the traditional way to working and pushed us out of our comfort zones, many times the team would find themselves into development territory, whether it be looking to how to work a certain formula, looking into code and experimenting on different ways and workarounds in power-bi. Along the way, we learned the basics of the platform and enough to communicate effectively on what we wanted from a design point of view, although we weren’t experts in the power-bi, the team’s ability to quickly iterate on possible solutions and workarounds proved helpful to move things at a faster pace. For the first time, it was the design department’s duty to keep track of the backlog of development changes and making sure that the product runs all features before the launch date.

powerBI example image uai

Race against the clock

We concluded this project in on an exhilarating, stressful but still exciting week for the project, the creative director VT Rao and the lead design Joel D’silva flew down to Pune to meet up with the development team of what can only be described as a 3 day of sleepless nights, record-breaking video call time, and extreme energy and enthusiasm from the development as well as design teams.

With only 3 days left for the launch of the product, all the teams work through and pulled it off. The result was a platform that provided a lot of value to the client and as well as its consumers, not only coz the UI was clear, concise, had soothing colors in a cool tone for longer periods of time but also had a very clear user journey and information architecture that lead the users from point a to b in a simple and logical manner.

maico amorim SJWPKMb9u k unsplash uai

Conclusion and Learnings

  1. Bringing in experts from each domain on the project calls and this will go a long way, you will clearly get an idea of the overall scope of the project and what are some of the challenges you will face along the way.
  2. Logging changes from the client and the dev team keep the communication clear and open. This will avoid a last-minute rush to implement “impossible” features and you will have more time to come up with worthy design integral alternatives.
  3. Understand the platform limitations before designing new features, each platform comes with its own set of limitations, this will give you a better idea of how long each one will take up.
  4. When working on a data-driven project is it’s essential to have all the data cleaned up and reviewed multiple times before you create your data models and visual language. Inputting data takes a long time and changing the data type mid-way not only will delay timelines, but drastically impact the quality of the design as well.
  5. Last but not the least, with data projects, work with an internal stakeholder who understands the impact of each decision or development change coz without a key stakeholder like that, it’s impossible to let non-technical or non-design folks understand the impact on time and deliverables.