Web app · SberBank / SberTech
Graph data visualisation service
Group project, all design deliverables by me · Used Figma, Photoshop & Illustrator
Latin dance classes In manhattan
01.Overview
Crystal View (BigRaph) is a graph visualization tool that is a key component of the Montecristo graph platform within the Sberbank ecosystem. This tool is designed to represent and analyze large datasets in the form of graphs, allowing users to understand better and track relationships between various entities, such as individuals, companies, holdings, and public procurement entities.
Crystal View provides an intuitive web interface that enables analysts and researchers to visualize data effectively and draw conclusions necessary for business decisions. Users can identify patterns, analyze different types of relationships and data, and detect anomalies, which is especially important for credit issuance and fraud detection tasks.
Crystal View provides an intuitive web interface that enables analysts and researchers to visualize data effectively and draw conclusions necessary for business decisions. Users can identify patterns, analyze different types of relationships and data, and detect anomalies, which is especially important for credit issuance and fraud detection tasks.
Graph visualization UI before the redesign and the Graph platform rebranding
02.Redesign drivers
The need for redesign of BIGraph (Crystal View) was driven by the following factors:
-
Low UsabilityUsers faced difficulties using the system, as confirmed by research, feedback, and surveys that regularly highlighted suggestions for improvement. -
Competitive PressureCompetitors had more modern interfaces, which posed a challenge to improve in order to maintain competitiveness. -
Graph OptimizationThere was a need to optimize the display of graphs on the screen for better data positioning and faster rendering of large datasets. -
Outdated InterfaceThe current design appeared outdated and did not meet modern standards, negatively impacting user perception of the product. -
Complex UXNavigation and task completion were complicated by overly complex functionality, requiring simplification. New business needs also demanded additional features and sections. -
Lack of Visual IdentityThere was a need to improve visual identity to attract and retain the target audience.
03.Research
Latin dance classes In manhattan
Methods
The research was conducted in periodic phases over a year. The primary focus was identifying user pain points, addressing interface issues, and discovering missing features. Feedback was collected through mass surveys, internal testing, and informal usability tests.
A feedback form and email support were also integrated into the interface to ensure continuous user input.
Data collection was hindered by the inability to integrate third-party analytics services, such as Yandex Metrica and Google Analytics since the service operates in an internal network without internet access.
A feedback form and email support were also integrated into the interface to ensure continuous user input.
Data collection was hindered by the inability to integrate third-party analytics services, such as Yandex Metrica and Google Analytics since the service operates in an internal network without internet access.
Key research findings
The research revealed the following key issues:
-
Complex and confusing navigationNavigation should be simplified by redesigning the interface and interaction logic. Key functions need to be placed in prominent locations for quick access. -
Inconvenience in performing certain operationsKey operations, such as running scenarios and searching for objects, need to be redesigned to make them more intuitive and easier to use. -
Insufficient user awareness of new featuresAn interactive guide and quarterly video tutorials should be introduced. To further improve user awareness, a release newsletter with information about new features and updates should be created. -
Long graph loading timesThe engine should be replaced to reduce graph loading times and improve developer convenience. Additionally, the interaction logic and forces between nodes need to be revised.
The old interface with outdated design and complex navigation, making it difficult to perform key operations
04.Design process
Latin dance classes In manhattan
Iterative design rollout
The design process involved creating a single main prototype and then gradually rolling out the new design in stages. Instead of introducing the entire redesign at once, updates were implemented iteratively, allowing users to adapt to the changes smoothly. This approach ensured continuous feedback, enabling incremental improvements throughout the rollout process.
Iterative design rollout illustrated by changes to the interface header, sidebar, and subgraph selection panel
Latin dance classes In manhattan
Graph rendering logic
One of the key focus areas during the redesign was improving the graph rendering process. In addition to creating the interface, I worked on analyzing and developing the logic for displaying graphs, which solved several critical issues:
These improvements significantly enhanced performance and improved the user experience when working with graphs, especially those involving large datasets.
- Expanding large nodes into smaller ones: A convenient solution was developed for displaying large nodes with the ability to expand them into more detailed parts. This improved data comprehension and enabled users to work more efficiently with large graphs.
- Node repulsion logic: To prevent node overlapping and improve graph readability, a dynamic logic was implemented to control the repulsion force between nodes. This made the visualization clearer and more user-friendly for data analysis.
These improvements significantly enhanced performance and improved the user experience when working with graphs, especially those involving large datasets.
Expanding large nodes into smaller ones and nodes repulsion logic examples for technical task
05.Final design
Latin dance classes In manhattan
06.Redesign results
The final design and refactoring eliminated the previously identified issues. Key improvements include:
- The loading time of large graphs was reduced by 4 to 10 times.
- According to surveys, users now find the necessary functions and complete tasks more quickly.
- The visual style was updated, making the interface more modern and intuitive.
07.Conclusion
Latin dance classes In manhattan
Key Takeaways
The work on the Crystal View redesign demonstrated the importance of thorough user experience research and continuous feedback from end users. The phased rollout approach allowed for system improvements without abrupt changes, ensuring a smooth adaptation for users.
Latin dance classes In manhattan
Impact on future projects
This experience strengthened my understanding of the importance of an iterative approach to interface development. In future projects, I began to place greater emphasis on gathering feedback, early prototype testing, and a gradual implementation process.