👨🏻‍💻 Meetings With UX Design Students

Meeting 1

The first week we did get an introduction of the UX group. The UX group do not work all day at school like we do; they make their project individually. The design we will get from the UX group is not individually but is a combination of the work of the group so that we don't have to choose the best design.

The first week of meeting the UX group we had shown what data we can get from the API. We showed that we can make different sessions and what we can do with this data. With a simple prototype we showed a graph we have made.

The UX group didn't have a digital design but had made a sketch on a big a2 paper that showed the concept. They had made a harmonica menu for all the parameters that they didn't know yet where to place so this item could be replaced on another location on the screen later in the design process. They also made a simple menu on top of the website we could make in our next prototype with buttons like next, download and autoplay. The most important aspect of the design that yuri had given is that the graph must be shown as big as possible.

Meeting 2

The UX students showed their first prototypes. They showed three designs and told us about their ideas for new features. They wanted a collapsable menu with parameters, every time you click a new parameter the other one closes. Not only that, but they also had the idea to be able to hover over the people and friends circles to reveal extra information about the data point. While this is a good idea to inform people about what they are looking at, it is complicated because the graph is so dense with information. The dots are so close together that it's difficult to distinguish them from each other. They also had the idea to incorporate onboarding, they showed us a few examples of graphs where the user is first introduced to the topic by showing screens of what the data entails. We thought this was a good idea, but are going to start on it when we have a better grip of the data and visualisations. Lastly, they wanted to show a graph of the relationships between friends and other information Marcio incorporated in his visualisation in the form of a line graph. The graph shows, for example, that the distance between friends grows smaller as you get deeper in to the filter bubble.

This week, we spoke with the UX students again to update each other on our progress and expectations. We started off by listing what we did in the last couple of days. Joeri made the menu to start and reset the simulation. Remco is experimenting with D3.js and showed the graph he made, which consisted of dots to show people and friends. Tim showed how he made a zoom function to zoom in and out of the canvas, and also how you can drag over the page to show different parts of the graph. Nora started on capturing the data points' X and Y axis and storing them in local storage to be able to take a step "back" in the simulation, since this is not incorporated in the API itself since this is not it's purpose.

Meeting 3

This week the UX designers showed us cool inspirations for the unboarding for the website. The idea they had was that instead of showing the data all at once you get the data in smaller portions. In one of the examples they show they could go back to previous steps and asked if we could add this in the next prototype. The UX team had made the first digital designs and shown the colours they have chosen and made a corporate identity for the website. The graph itself didn't change yet because they mostly focus on the UX and how you navigate to the website. They wanted an autoplay button so that you can show the data being formed in front of your eyes instead of clicking the next button.

This week we have experimented a lot with the API and how we could visualise the code. We have shown different versions of graphs we have tested like a headmap and a bubble graph and functions like drag, zoom and autoplay, harmonica menu and changing sessions. Remco showed the autoplay function that he made with a cool transition. We showed more examples of prototypes we have made and the main website with the new design.

Meeting 4

This week we started the meeting with a short presentation from Yuri about visualisation shapes and what works and what not. The prototypes we made were shown with circles and lines but what yuri told us whas that instead of only using circles you can use different shapes so that you can differentiate what the item represents. The same you could do with a line instead of changing the colour you can change the thickness of the line. We used colour to make the difference between circles and lines but this does not work for all people because you can be colour blind.

From the UX designers we didn't get a design at that moment because the where gone change the design with the tips of Yuri. Yuri didn't have enough time to complete the meeting so UX came to our classroom to show a couple of ideas they have about the design with the new knowledge of Yuri. They also made an onboarding for the website so people could better understand what the project represents.