SparkBeyond / Causality Studio
About
Causality Studio allows users to search the web for causality relations to anyphenomenon they wish to explore.By using AI-powered engine the system scan through relevant searchengines results looking for relevant causes for the chosen phenomenon.
The Task
Create a smarter user experience with a better user interface.Reorganize and redesigning the system for a more accurate,understandable, and unique design.
Personas
Who are the users of Causality Studio?Basically, it can serve anyone who needs to learn about causes of a certain phenomenon.As the system is flexible and can adjust itself to handle any question from any field of data,it can serve both amateur individuals and expert data scientists.It acts as a “causes search engine” and knows how to make links between causes.For this case study, I served as the random amateur user.
User Pain Points
Multiple focus areas, unclear hierarchy, presentation of irrelevant data for selection,multiple settings controls, unclear screen enlargement area,tabs and legend areas collide and compete visually,radically enlarged filter area taking up much of the screen space unnecessarily,problematic color in the graph and lack of clarity of the selected object or branch.In general, flood of information creates visual and cognitive load on users.
The Research Prosses
I researched the field of Data Science focusing on the structure of complex Big Data graphs to findsolutions to reduce visual information and achieve rapid understanding of the graph and its components.My guiding principle was to reduce and provide gradual exposure.In the initial stage, users are exposed to all graph elements but without their contexts.They then can decide which context they want to reveal. This way they can better understand theconnections and relationships between the objects and the structure of the graph.They discover the world displayed on the graph and digests the informationgradually without being overwhelmed with information and needing to decipher the graph.
Sketches
Wireframes
The Solution
I decided to create a unified control panel on the left side of the screen, where all the system controls are relocated.The system logo and the main tabs area, each with a unique icon, are at the panel top.When a certain tab is selected, it becomes highlighted and only the relevant controls are shown for each tab area.
I divided the filters area into a “fixed” and a “flexible” sections.-The upper section with the “fixed” filters is responsible for the different connections context betweenobjects in the graph and their job is to turn on or off visual contexts which help users better understand thegraph's structure and reduce the visual load.Under the “fixed” section, there is a newly added “flexible” section with filters that can be added, removed,or dragged when there is a need to create hierarchy between layers of information in the graph.Under the filters area there is a new section to add or remove tags.
The multiple settings controls transform to a single button located at the upper right side of the screenthat serves as the central entry point to all system settings.
The unclear screen enlargement control was also removed, instead, when the floating panel is closedthe graph expands and occupies the entire screen.
The graph structure is built on circles inside circles to decompose the visual loadcreating more harmony and clear appearance. It also maximizes the ability toseparate the various objects by dividing them into three groups -1 - Objects with the largest area that directly influence are on the right.2 - Objects with the small area that also directly influence are on the left.3 - Objects that affect indirectly and marked with a unique color located in the center.
Once an object or a branch is selected, it is used as a title and the rest of the elementsbecome blurred to maintain the general understanding of the object's position in the graph.Under the heading, the search results are shown on a full screen to focus on the selection andrelevance of the results displayed. This also enables an extended content view in each line.The action controls enabling removal or split are shown when row is hovered in the results table.
