The reorganized graph

Finally, after hitting the next semester break, I found some spare time to have a closer look at the Adobe XD developer documentation.

My interest came up early in the past semester when I started the Software Group project in the university with a bunch of other students. We were introduced to Capgemini – our customer we had to build a web platform for. They were looking for a service to plan their meetings in a way that allowed them to minimize the time of rooms being empty.

However, we started using Adobe XD to draft the user interface and make up some links between the views.

Screenshot of Adobe XD
Here’s the whole project in Adobe XD in an early prototyping stage.

My idea was now to export those XD files to GraphML files that could be parsed by yEd – a tool I had been using for tasks in the third semester in the course about databases.

Using graph analytics tools to analyze your prototype and find isolated screens that might not be reachable from other screens is the main idea here. I thought, that taking advantage of tools that already exist – such as yEd or other tools that are capable of parsing the exchange format GraphML would be cool since I could lift off a lot of work from me since I wouldn’t have to re-implement everything back into an XD extension.

So here we go, this is the export I get when I open the GraphML file in yEd:

Exported XD file in yEd
The file exported by my XD extension, opened in yEd.

Looks quite similar, doesn’t it?

What if we added some sort of transforms to this model to figure out which views belong stronger together than others? Oh wait, we can!

The reorganized graph
The model rearranged by yEd taking into account how strongly views are related to another.

Right in the center we can find a larger view, that’s the main menu. The elements on the right are related to the login and registration process, the elements on the left show the booking flow and templates.

What’s the next logical step? Right, automatically analyze this data and figure out which actions take to long to accomplish – leading to better UX. And maybe we can rearrange the views within XD as well, so we can keep the visual clues tight together and a developer does not have to look for thousands of views to find those important for the current task.

I’ll keep you posted once the extension has some more features than just this simple export and import, you might expect a download.

Update: Now, I am able to re-import the GraphML file to XD as you can see below.