Tengu header image showcasing both the graph and sidebar

Client

Tengu

Team

Laurens Vandevyver
Dries De Roeck
Jonas callewaert

Duration

25 days

Role

Ux & visual design

About the project

What do you think the internet would look like if you had to visualise it? Is it just a bunch of servers in a big room with blinking lights? Is is just a web of connections that seem to make no sense at all? Think about this question and let me know what you think! Anyways, Tengu came to the studio with an idea for a new digital solution to a common problem developers have. How do you make a big network of services visual and easily maintainable? And to make it a little more interesting; how can we make this more accessible to multiple profiles within the same corporation?

Concept & wireframing

Kicking off the project our team started with a meeting with our client to find out all requirements for the platform. There was a platform built already that was hard to use and was mostly oriented towards developers already. Based on this the first rough sketches were made both on paper and in our google slides document. This is the point where I stepped in, I created more visually appealing wireframes to show to the client. This was our client could get a better understanding of how we visualised their platform. Based on these wireframes our client gave us more pointers and told us where we got some things wrong and had to go back to the drawing board. After finishing the wireframes and getting final approval I moved on to UI design for the application.

Tengu wireframe view of the graph
Tengu wireframe view of the sidebar

UI design

Into the dark mode

Starting off the project I explored multiple styles for the application, I wanted to find a style that would both be round and easily approachable as "developer-esque". I have a background in coding and multiple of the people I hang out with are frond-end, back-end or full-stack developers. They all have one thing in common, they swear by the dark mode in their code editor. This was my first ever project where I created a dark mode from scratch and ended up doing a lot of reading on it. One resource in particular that I found helpful was the material design guidelines on dark mode and layering. To create depth in a dark mode application you use an almost black background, fully black drop-shadows and lighter panels. The lighter your panel is the more it is perceived as "closer" to a user and so I created up to 9 "layers" to possibly use.

Tengu graph on a dark background

Graphs and lists

How do you visualise connections between different items while still making it easy to browse through? We came up with two different kinds of views for needs in the application. By default a user will see the graph view showcasing all connections between different services. By using the toggle on top of the screen a user can also switch to a list view to get a more structured interface thats easier to scan.

Tengu graph and create sidebar on the left
Tengu list view with details on the right

Dive into the details

In either way you are viewing the connections you can summon the detail panel that will pop over from the right of the screen. This screen primary showcases you an overview of past logs with either a column- or line graph. Next to this it's also possible to add comments, documentation and code to each item in here. These can be useful when users change something in the setup and need to document this for their teammates. Another in here are actions where custom actions can be defined for each different kind of item. Lastly there is a history tab that documents every change that has been made to the item from when it was created. From the details panel it's also possible to access the settings page for the selected item.

Tengu detail panel showcasing graphs and data logs
Tengu code tab open on the right

Manipulate data

Whilst on the right hand side of the screen users can view more details on selected items the left hand side of the screen was made to manipulate your view. Here users can create or apply previously saved filters to easily find what they are looking for. This is also where users can search for specific items in the graph or list. One of the biggest challenges here for me was creating an "and - or" filter that was both easy to use and ready to scale up as statements could become long and complicated. We ended up tackling this problem both from a UI as a UX standpoint but also had to put a limit on how  "deep" a user could filter.

Tengu filter view from the left, filled in

Drag and create

Lastly, creating new items to add into the graph is needed to expand a current setup. We created this easy to use and familiar drag-and-drop interaction for users. Users can easily access the create menu from the floating action button on the bottom left of the screen. Here different items are grouped by use case. We also introduced auto-snapping to easily create connections between already existing items. Users can also connect their services manually by dragging one of the "nodes" from the item to another one.

Tengu connect example with create sidebar

Reflection

The Tengu project has been one of my favourite ones so far for a couple of reasons. This was my first project at Studio Dott where I started creating an application from scratch. It was also the first time I had to create a functional styleguide for a client and this project has gotten me through the first covid-19 lockdown in march. So this one will probably always have a special place in my heart but apart from all of that I also really enjoyed this project. I enjoyed how technical it got and got to take a deep dive into a world I don't know a lot about. I'd like to do more of these projects in the future as these get me exciting and I feel like I can get lost in them for days. Definitely let me know what you think about the results here, I'd love to hear!

Tengu styleguide