Mary Kate Hayden
 

 Quid

branding, visual, ux, ui & data visualization design

Quid is a data visualization platform for people looking to acquire knowledge quickly and easily about any subject of interest. When I joined Quid I served as the sole designer for the ~100 person company on what was likely the most complex product I will ever work on.

I’m so grateful and proud of my time at Quid, and the work I accomplished while I was there. Perhaps my greatest takeaway though, was that while UX design is something that will continuously inform what and how I design no matter the project, it wasn’t the work I wanted to spend my career doing. I am sharing a bit of work across all of the areas I worked in while at Quid because I genuinely believe who I am and how I design is a result of the experiences I’ve had within all of these areas of design.

Humblebrag: I walked away with three design patents for my UX work at Quid.

 

Branding, Visual & Data Visualization Design

Quid_Stationary.jpg
 
Quid_BizCards.gif
 
 
 
Quid_Notebook.jpg
 
Office-Shirt.jpg
Q-Shirt.jpg
 
Avatar-Shirt.jpg
Quidathon-Shirt.jpg
 

 

UX, UI & Data Visualization Design

My primary role at Quid was as a user experience designer, and it was absolutely the most challenging work I’ve done to date. To be honest, I have a hard time distilling this work into a format that makes sense for my portfolio, but I want to share a few of my projects because they are such a huge part of my career and this work really shaped who I am as a designer.

Also, I earned three design patents for my UX work at Quid.

One patent was for the Cluster Labels project I’m sharing, and two are related to a visual search methodology we created. Truly, my time at Quid stretched my creative and cognitive talents to their limits, but it was a tremendously rewarding experience.

 
 

ux // cluster labels

New Cluster Labels.jpg
 

Clusters, or categories, are groups of similar nodes (dots) distinguishable by their shape, color and name. They represent the major themes of a network and are super important for users during their analysis. Considering how significant the clusters and their labels are to the user, it’s a little crazy how difficult they were to read.

The new label placement may seem like a simple change, but working with unknown data and live visualizations presents a huge challenge when trying to create user experience solutions. You never get to design for the best case scenario. Luckily I was working with some really talented people and we developed a novel technology that used regions and a kind of magnetic force to define where a label was positioned in relation to a cluster.

 
 

UX & UI // Pattern Library

By the end of this project we had defined a pattern for 20 different categories within the UI of Quid. The Quid platform had 3 main sections: 1. Search 2. Viz 3. Share and because each section was built at different points in time with a variety of developers, the tool had become a hodge podge of UI.

At one point I thought this project would be the death of me, but I’m still here so things worked out.

If you’d like, you can check out the open source react library here.

 
 

UX & UI // Info Panel

New Viz Info Open.jpg
 
 
Old Viz.jpg

This last image was my starting point. Whew.

Like most things that I worked on within the Quid platform, the Info Panel was a vital element to the tool, and really hard to work with. As you can see from the image of the original design the Info Panel was hard to find, had really tiny UI elements, and no clear priority of information. It was a massive pain point for our users and internal client services team, so it was a very high stakes project for me.

It’s difficult to demonstrate the work that went into this project, and how much is going on within this panel, but I think even these few images show what a difference I was able to make in legibility, hierarchy and prioritization of information. This was very much like most of my projects at Quid - time consuming, mentally fatiguing and insanely complex with an outcome that (ideally) looks pretty dang straight forward.

 
 

Head of Design: Oriana Love • UX Design: Anna Spisak • UX Research: Radhika Sawhney * My UX and Data Viz work also had tremendous support from the Data Scientists, UI and Visualization Developers who I worked with at Quid.