XYZ INDEX

The “XYZ Index” is a DIY index tool that ranks different suburbs in Sydney and finds correlations between them. The result is based on a set of parameters that have a user-defined weighting. The more relevant the parameter to you, the more importance the algorithm will place on it. In addition, the ability to add your own data, or parameters, allows one to compare topics that are relevant to them.

Responsive image
Team

I worked on this project while


interning at Small Multiples.

Role

User Research

UX/UI Design

Prototyping

Time

June 2019

Tools

Resonsive image Sketch

Resonsive image InVision

Resonsive image Adobe

RESEARCH & SKETCHES

I began this project by researching precedents, including the OECD Better Life Index designed by Moritz Stefaner, as well as other data visualizations and graphics. I noted how certain colours or interactions helped or hindered the visualisations. Getting an idea of what is already out there helped me gauge what I needed to do next.

After doing my research, I went straight into sketching out ideas, initially drawing the first ideas that came into my head. I tried to work out how I could visualize multiple parameters, of which the amount of parameters could increase or decrease depending on the user, and not make the visualization change drastically or feel inconsistent.

Responsive image
Responsive image
Responsive image
Responsive image
Intial Sketches
WIREFRAMING

Assuming the number of parameters would be long, my first idea was for the user to start with an empty list and choose from a selection of parameters they wanted to focus on. Because of its potentially large number, I designed the interface to allow the user to pick and choose from a list so they could control what they wanted to see. After discussing these ideas, a problem arose – a blank page upon arrival. How is the user going to know what they need to do when they arrive at the screen? I needed to design for a smaller scope.

Responsive image
Responsive image
Responsive image
Responsive image
Iteration 1

I re-designed the interface to resolve my blank page problem and added a place for users to be able to add in their own data. I sketched out a simpler way for the user to be able to choose from the set of parameters. The problem here was that the tool needed to be screenshotted or made into a GIF for an email, and with a screen this big and with this much detail, it would not be as easy to read. The user could easily lose interest and not get to the next step of actually clicking on the link.

Responsive image
Responsive image
Iteration 2

I had to take a step back here and map out the user journey, from receiving an email to setting up a meeting with Small Multiples. The user should be able to play around with pre-set parameters, and a call-to-action would be required to prompt the user to get in touch and set up a meeting.

The next iteration of wireframes took a simpler approach and focused more on the user flow. I reduced the size and removed certain unnecessary aspects. I also added copy and fonts to get more of a feel for what the interface will look like.

Responsive image User Flows
Responsive image
Responsive image Responsive image Iteration 3
Responsive image Responsive image
REFRAMING

After creating this new design, I had to think about how the data itself would now be visualized. This is where we came across a big problem – we need to be able to visualize multiple dimensions of data. I sketched out old and new ideas of how multiple points of data could be visualized in an interesting way.

Responsive image
Responsive image
Sketches

After doing some more research, a viable solution was found to reduce the number of dimensions through machine learning algorithms. We discussed implementing methods like Principal Component Analysis or t-Distributed Stochastic Neighbor Embedding (t-SNE), which would be one way we could achieve what we needed to.

I researched some places that used these methods and was inspired by “An alternative data-driven country map” by Interacta. We could do a similar thing where we compare suburbs in Sydney, grouping ones that were similar. In doing this, it would still be important to make the ranking of suburbs viewable, while also showing a visualization the user can explore.

MID-FIDELITY PROTOTYPES

I wireframed this new idea involving t-SNE and experimented with how the ranking could also be included.

Responsive image
Responsive image
Responsive image
Responsive image
Iteration 4

I received some feedback about this new take, that making it so exploratory with the addition of t-SNE would no longer make this an index tool. The user should also not have to work hard to figure out their own insights about the suburbs. This is where the idea of clustering came in. For example, we could use another algorithm like ‘k-means’ clustering to group the suburbs. If we pointed out the clusters of suburbs that t-SNE creates and informed the user about their correlations ourselves, it would become a lot more valuable.

The next and final iteration was breaking down the tool into three separate sections. The parameters with their adjustable sliders, the rank of suburbs, and the clusters of suburbs where insights could be gained. Implementing a clustering method would mean we could automatically create what the user could view. By selecting on the group, the user gets a close-up view of the cluster and can select suburbs they want to explore more, being able to view the metrics of each data point.

Responsive image
Responsive image
Responsive image
Responsive image
Iteration 5

We initially wanted to have a whole screen dedicated to an individually selected suburb but decided on a tooltip instead, so it was easier to switch between viewing the different suburbs. This also meant we could keep the tool simple by having only two possible views of the visualisation – the overview of all the suburbs, and the zoomed in one of a group of suburbs.

FINAL DESIGN

The final visual design uses colour to make the three sections more distinguished from one another. It also defines the grouping of clusters and brought it to its final form.

Responsive image
Responsive image
Responsive image
Responsive image
Visual Design

Ideally, in the future, this tool could be used to find similarities between any types of data with any kind of parameters. For example, by a company who wants to compare cost and time of different projects, or a bank to find out trends about their credit card users.