ZZGraph

Inspiration

Both of us have experience using a variety of product management tools such as Trello, Jira, Linear, and so on. Generally (with the exception of Linear), the user-interface is typically unenjoyable to use. Furthermore, these systems generally encourage the typical backlogging -> assigning -> pulling workflow for moving tasks along, backlog generation in most of these systems does not also involve specifying the requirements of each task in-depth.

This project is meant to encourage the user to do the good practice of understanding all of the dependencies by visualizing the relationships between tasks

What it does

It allows Project Managers to graphically build out task lists and dependency graphs, aiding them in creating more helpful production pipelines as well as understanding priorities better.

Seeing a dependency graph is useful in general. The number of incoming and outcoming edges allows Project Managers to get a sense of the amount of blockers and dependents, and thus allows them to understand importance of certain tasks.

This is an alternative to applications such as Jira, Trello, and AirTable. In many management systems we've experienced, there are a lot of backlog tasks created, and then connecting blockers almost seems like an afterthought. The advantage of a graph-based project management system is to encourage more thought about the relationships of tasks. Our conclusion is that it is much easier to create relationships in a graph than through typing words into a dropdown.

As for the color palette, it is minimal intentionally; we wanted the accent colors to stand out and mean something. For example, green very evidently indicates the completion of a task, while red represents something is blocked.

How we built it

This project was made with React & typescript, and the graph view was created using the react-flow library.

We spent a considerable amount of our development time designing. We were particularly inspired by Unreal Engine's blueprints and Unity Engine's ShaderGraph in terms of design language, and Linear for its minimalist design and colorscheme.

Challenges we ran into

Ideating was definitely difficult because we were trying to create something cool but also useful in an area we were familiar in. We had high standards for our project, so we constantly shot down mediocre ideas until we settled on this one, which definitely used up a lot of our time.

Accomplishments that we're proud of

We came into this hackathon thinking mostly about create a beautiful experience for the user. We had tangential experience while developing parts of UX/UI for video games, but no formal design applications. Throughout this hackathon, we learned a lot from our research of UX design principles, our friends into design, and our observations about UX in the world around us.

What's next for ZZGraph

ZZGraph hopes to integrate AI and agents/skills. AI would help in many different ways, such as completions while typing, graph creation, and automatic assignment. Agents would help the end user, or the assignee, get to their tasks more conveniently.

Built With

• react
• typescript
• vercel
• vite