Client: Memgraph Ltd
Deliverables: Design system (v1.0), Demo applications (v1.0)
Time: Dec 2017 - Feb 2018
Team: Product & Business dev, 2 full-stack engineers
My role: UX/UI Designer, UI Engineer
(Foundation SCSS, Jekyll)


Memgraph is the world’s first real-time distributed graph database, which aims to deliver high-performance at enterprise scale. It is engineered to support the needs of enterprises with colossal amounts of data. Memgraph aims to help businesses harness the power of real-time connected data, so they can build the next generation of intelligent applications.

Problem space

Memgraph’s Demo Applications need to showcase the live previews of different datasets in order to better represent the product’s capabilities to prospective clients. Use cases cover industries such as telecommunication, finance or IT network management. The demos are usually presented at meetings and on trade shows and need to be quickly developed and adjusted.


We collected all the product feedback we had from meeting prospective or existing clients, looked into competitors and had co-creation workshops to define the best possible solutions for data visualization. We also took a deep look at competitors to see how they tackle the problem of complex graph data visualization.

Together with core team, I laid out a customer journey based on the feedback collected from surveying early adopters and target audience. We found out that we needed to focus our efforts on users from two sides - the business side (decision makers) and technical side (developers).

Journey mapping

Journey mapping



Target audience


We wanted to showcase 5 different use-cases of Memgraph, but keep a consistent look and feel between them. The first step in doing that was to identify requirements for demos and to lay out the modular layout that can accommodate all of these features.

Main Requirements for demo applications

Demo lo-fi wireframes

Demo low fidelity wireframes

I made detailed wireframes and flow diagrams for all five demo use-cases to serve as a reference point for testing and communication with stakeholders and developers before progressing towards development. Example below is for the ConConnector demo.

ConConnector wireframes ConConnector wireframes

UI design

Consistent UI design was imperative for all applications, to ensure smooth experience when demonstrating product capabilities. To achieve this, I built a simple Sketch component library. Consistency also meant that modular design ensured that same components can be reused during development process.

UI design Component library in Sketch for Memgraph project

Images below show four screens coming from different demo applications, while using shared components.

UI design

UI design

UI design

UI design Memgraph demo applications - UI

From design to implementation

After initial wireframing iterations, I was able to create a modular design with components that could be easily extended for specific needs. The implementation of design components was based on Foundation framework and was served from one central repository into all of the demo applications for ease of use and maintenance.

The central design repository also consists of a simple dynamic style guide for easier implementation into future projects.

Repository structure

Design system modularity

Project outcomes

Conconnector in action Conconnector in action by cofounder Marko

Check out my other case studies:

Back to projects