How we built LINCD (Linked Interoperable Code and Data)
A revolutionary developer tool that combines semantic graph databases with a React framework
March 20, 2024
7 min read
We designed and built an open-source repository to make building with graph databases (Linked Data) more accessible for developers. The repository houses community-created assets like UI components, ontologies, and data sets.
Graph databases are a powerful way of structuring data that emphasises relationships between data points. Using nodes (data objects) connected by edges (relationships), these databases create a semantic network that captures how information is interconnected. Also known as Knowledge Graphs or Linked Data, this approach makes information both human-readable and machine-interpretable, enabling sophisticated querying and analysis of complex relationships.
Executive Summary
LINCD provides tools to help developers build apps with linked data. It reveals UI components and packages that match your data types, enabling fast integration through copying and pasting code snippets. We needed to create a brand around LINCD and build an intuitive platform for developers to browse existing components and documentation.
- Timeline: February 2022 - July 2022
- Role: Product Designer
- Team: 1 Product Designer, 1 Frontend Developer, 2 Engineers
- Other Main Stakeholders: Other co-founders of the project, Slack developer community
My Role
- Collaborated with other co-founders to define the product vision and roadmap.
- Introduced a user-centric design process to a multidisciplinary team.
- Defined a user-friendly product and visual direction.
- Created a prototype for initial product ideas, and designed the branding including logo, typeface, and assets.
- Led the frontend development and created Design System and Design Pattern Library for engineer and design teams.
Problem Statement
Linked data is a revolutionary data standard that drastically improves sharing, maintenance, and analytics of data. We built a technology that enables the creation of components and packages with linked data structures. Many developers still need to learn about linked data, and when asked, they are interested and may want to include it in their tool stack. The problem is the availability of education in this area, and minimal resources exist to develop applications with linked data structures.
Stakeholders
The critical stakeholders for the repository are developers. Talking to many developers,
it's clear that this group of people is proud of their knowledge and skills. They like to
learn and improve their skillset while showcasing their skills to the world through
developing useful applications and getting recognized for doing so. They consider coding a
work of art and like to produce clean code. Our framework currently works with Javascript,
so they must be familiar with this programming language.
To better understand our crucial users, I made a persona to capture archetypical information
about the goals and characteristics that represent the needs of this larger group of users.
Brand
We wanted the brand to embody a professional and trustworthy emotion while portraying a refined modern look and feel.
Logotype
After many iterations, I landed on the symbolic logotype of two related links. A symbol that is simple, highly recognizable, and personifies the nature of our product. The links are two rounded rectangles arranged horizontally with two contrasting colors.
Typography
A clean, easy-to-read landing page incorporating a tech/coding-like feel with the headings is essential. Montserrat is a modern font with a wide letter style. Its initial design intended for posters makes it work exceptionally well with website copy that needs to grab the attention of the reader. Inter is a well-rounded font that works well in many situations. It doesn't portray much emotion but is very good for informational text.
Color
The primary color of blue portrays the feeling of trustworthiness and professionalism. These were the primary colors to use on our landing page, with the lighter shades reserved for accents. To give the repository a futuristic modern feel, we opted for a dark-theme styling using hints of colors as accents to make certain features pop.
Abstract Concepts
Linked data relies on a graph-style database to connect relationships between resources. This database can have a unique way of displaying data and the relationships between objects. The nodes and links lead to an abstract style that works nicely. As graph databases are a core feature of our product, I wanted to incorporate this as a visual component of the landing page.
Ideation
The main challenge was to design a user interface that captures crucial information for sharing and allows intuitive browsing of all the connected parts between UI components, ontologies, and packages.
Inspirations
Jakob's Law dictates that users spend most of their time on other sites. Meaning that
users prefer your site to work the same way as all the other sites they already know. By
leveraging existing mental models, we can create a superior user experience in which the
users can focus on their tasks rather than on learning new models.
Considering this, we took inspiration from other repositories popular with Developers, such
as GitHub and Codepen.
Concept Designs
Rapidly sketching wireframes enables you to quickly explore layout and UI designs before spending time creating high-fidelity prototypes.
Final Prototype
The result is a fully interactive prototype where we test our assumptions with a closed user testing process. We can gauge the intuitive design, the position of elements, information architecture, and feature prioritization.
Testing
Some features in our prototype were not crucial to the library's operation and would
present significant development time and challenges. As a result, we decided to push
these features further down the release schedule. The community comments feature is a
nice-to-have, as many community-relevant updates will take place on Github, where the
code is stored. This function could be helpful to users in the future; however, because
this is a new platform, we need to grow the user base before community features become
helpful.
Taking these insights, we continued to build an alpha version of the repository, as we knew
more subtle changes, particularly with search, would come from a working application.
Before
(With community features)
After
(Without community features)
Alpha Testing
Our user tests revealed some surprising truths. Through observation and feedback, it was
clear that the ordering of information for each category disrupted the user from either
understanding the content or making clear choices.
Repository navigation needed work. It was easy to get lost in the status of your search and
forget where and why you started searching.
Iterating The Design
We have started implementing the suggestions from our alpha user tests, introducing breadcrumbs and superior search bar functionality. We also have begun organizing the information displayed for each category, paying attention to what is necessary at first glance.
Outcome
The landing page and repository designs received positive responses from our testers. Yet there were still areas to improve on, including the search and navigation of the repository.
Reflection, lessons, next steps
It was clear that the LINCD repository still needed iterative improvement. The superior
connectivity of the ontologies classes and properties means you can achieve many search
layers when finding suitable data types. Further progress will undoubtedly come from using
the repository and working with the communities feedback.
On reflection working with a tight budget is challenging, but you can make it work with the
correct grit and persistence. Assembling a small group of people who believe in the overall
mission is critical. We will continue to build the repository and improve our documentation
over time. We are seeking funding for continued improvement and maintenance.