Why a designer needs to be self motivated?
Architecture map story #Designstory
I work in a software intelligence company. One of the product used to generate actionable information based on the analysis performed on the software application code.
In one of the dedicated screen for the application details, we also have very important section where we displays Architecture map of the source code of the application. The main goal of this graphical representation of the source code architecture and technologies is to check whether source code has been delivered properly or not.
The map can be created before the analysis on the basis of assumption and then the user can run the analysis and check the results after analysis on the top of it for comparison.
This is how it looks like right now. Existing image_1 (BEFORE analysis) and Existing image_1 (AFTER analysis).
Before I did deep dive into it, I tried to understand it on the surface level based on the available visual diagram we have now in the product ( as shown above)
A few things which came forward from UX and UI perspective were:
1. Why are Web and Batch in different colors in Before and after analysis image? Is there any significance?
2. Is there any common thing between Web, Java Web Services and Java Persistence etc in the graph above as they are using the same background color?
3. What do these shape represent? Do they have any meaning?
4. What does this number represent? For example: 507 (105 DL) and what am I supposed to do with this information? Dynamic links are need to be reviewed and then the user should either validate it or reject it. But right now, it’s not happening in the diagram.
5. Why don’t we have same font size and font weight (comparatively bigger) for all the headings to clearly distinguish it from the sub-sets?
6. Why there is no margin and padding to the text? If the text is bigger, we can use truncated text and display the full name via tool tip on hover.
7. Why don’t we have legends to understand the meaning of different color arrows after analysis?
8. Why did we find the link at some places in the map after analysis when we didn’t assume it before? Why there is no reason to make user aware of it?
If I take the story a little backward, the task (agile story) given to me was just to provide a few colors to represent the technologies.
After going through the UX/UI evaluation of the map before/after analysis, I discussed with the respective technical team to consider those minimal points for the improvements in the graph.
But the issue they were facing was that this graph has not been designed/coded by them. They are using the code from someone else’s tool which was done long back. No one has touched it since a while. They cannot use this code directly into the product to display the map, hence they use an external tool Graphviz to push that code into graphical representation for our product. So, they simply use that graph without making any variations in it.
Hence it’s tricky and difficult to play with the code. Moreover it’s time consuming and costly.
So, it came back to the same question from their side that you provide colors for the technologies. Hence I provided as I needed to consider what needs to be done in the sprint and respect that. Image_Colors below considering the color palette.
But somehow I was not ready to deliver it in this mode without making further improvements in it. I decided to show the design improvements from my side to other related members inside and outside the team and try to figure out the feasibility of the idea.
Apart from the 7 points I mentioned above, I realised that there are more than 20 technologies so how many colors we will use to represent it.
But the main question which popped up in my mind later on was “Why are we even using colors to represent every single technology.”
I thought of using simply 4 colors to represent the group: Front end technology, Back end technology , Database and the extra elements. That makes it cleaner, simple and focused.
I did connect with some people outside the team to talk about the idea and they recommended me to reach out the person who are actually creating this code by using the tool Graphviz.
Now this person is none other than the Development Director. So, I was a bit skeptical about the fact that whether he would have time to invest on it.
But anyhow I went ahead with the idea and shared with him. I was happily surprised to see that he was willing to listen to the idea and participate in figuring out how we can make it work.
Now there comes another challenge with the opportunity. Graphviz library has color sets to choose from. We still needed to play around with the string manipulation to check “HOW” and “HOW MUCH” we can make it work.
The good news is after a few trials and a good amount of time, we learnt a few other things about the Graphviz library which can be probably a better way to use in it. We could implement the 70–80% of the idea.
I didn’t reinvent the wheel. But at least I tried and if I could bring even 30–45% improvement, that’s good enough.
At the end of the day, all I can say believe in your decisions and make it happen. Because the first thing which anyone would see is the visuals of it and then the UX. You won’t be present everywhere to explain why it’s ugly or not usable. Don’t leave it unattended and at least try once. Take the ownership. That ways, you will end up polishing your skills if nothing else. :)
Having said that, it’s not easy always. There are multiple points which needs to be considered like sprint timings, resources availability and team skill sets and most importantly willingness of the leaders to make it happen depending on the importance of it.
It was a fun exercise though. :)
