A case study Enterprise is the enterprise offering from ThinkData Works Inc. It is primarily a tool for higher level analysis of (open) data catalogues, that provides meaningful meta information about that data in an organized way.

The team that was assigned this project was made up of 4 people. Myself, Matt Morgan (designer), Bronek Sculz (front end dev), and our content strategist (Lewis Wynne-Jones).

My role was 3 fold.

  1. Understand who the product is for and make sure our plans aligned with the goals of our users.
  2. Lead the team’s scrums and sprints while managing the Jira board—keep everyone on track and motivated.
  3. Write front end code (Angular JS and SCSS).

Who is the product for? Enterprise is the direct result of user feedback.

Time and time again our business development team reported back to us that clients needed a way to manage their organization's data. The clients they were referring to were always business executives or data scientists. As such, there are two main user profiles for Enterprise. Building and designing software for 2 very different types of people was a fun and interesting challenge.

We came to learn that business executives wanted a window into the life of their data scientists. Accessing company databases by way of the terminal just wasn’t a suitable option for a lot of executives. Even though they fundamentally understood the value of the data they were purchasing, they wanted to see the quantity of their companies data and the relevant meta-information (source, license, update frequency, etc…).

Knowing this about our users we built a platform that provided a big picture view of a data project, provided direct links to the source, and included license information for each data set. We also built a ‘data marketplace’ for executives to be able to browse our catalogue of premium data in case they wanted to know what else was available.

Expand, view, license, source, and download.
The (open) data marketplace.

UX Challenge — Part 1

Designing the ‘Saved Filter Views’

Our CTO and data scientists were keen on implementing a feature called ‘saved filter views’ — a brand new feature for Enterprise v2 which we all thought to be pretty neat. The idea was fairly simple. When you ‘filter’ or ‘order’ the table in any way, let the user save their ‘filtered view’ so they can revisit it without having to redo the work they did to filter the table the first time around.

Here is the current implementation of the saved filter view (SFV).

On load, if the user doesn’t have any SFV’s — appears ‘disabled’.
Once the user orders or filters the table, the ‘create’ button becomes active.

If the user clicks ‘create’ a dialog will appear.

Create SFV Dialog
If the user adds or removes any filters, they are then able to ‘save’ their changes.

Now, part of the problem is that if the user wants to return to an unfiltered state, they have to select ‘Filter Views’ which appears just as any of SFV would. As well, it would be ideal if the ‘unfiltered state’ was grey instead of blue because as seen earlier, blue implies that the item is actionable and active whereas the grey implies that the item is disabled and or not influential.

However, if we switched the ‘unfiltered view’ back to grey, it would imply that the item was disabled and that clicking on the area would NOT display the list of your saved SFV’s — which indeed it would.

‘Unfiltered View’

There is certainly room for improvement, but for iteration 1 it had to do. All in all, the feature works — if you know how to use it.

UX Challenge — Part 2

Placing the ‘Saved Filter Views’

At ThinkData Works, we value the full width — full height data tables. Data is the star of the show and we want users to feel like they have room to interact with their data. In the first iteration, the SFV ended up in the top bar but we all felt a little unsatisfied with it.

3 separate buttons, search bar not spaced very well in the nav, without filters.
3 in 1 buttons and search are centered, right-aligned filters in nav.
White actionable items, all actionable items centered in nav.
Grey actionable items, all actionable items right-aligned in nav.

Adding the SFV buttons to an already crowded top bar didn’t feel like the most elegant solution. On 13 inch laptops — there wasn’t enough room and even on larger screens, we had to remove the nav links to accomodate the top bar features. We needed a solution that would address the two main issues.

  1. How can we keep the nav links in the top bar (My Projects, Marketplace, etc…)
  2. How can we give more space to the important filter features without sacrificing the full screen table experience?

Using Invision, I prototyped a solution that would address the 2 issues. By adding a filter toggle and a full width dropdown area, we could accomplish both of our goals. If the area defaulted to be open, the user would know the functionality was there, but could have the option to hide it if they didn’t need it. Though you can’t show sticky elements in Invision, the table header row could be sticky (fixed on scroll) which would preserve the full screen table experience.

Prototyped ‘filter view’ proposal.

The important thing to keep in mind is that we shipped our product. As time goes on we will continue to iterate on our designs and we will take advantage of user data to inform our decisions.

There is always room for improvement, but we feel pretty good about Enterprise v2.

Thanks for reading!

Like what you read? Give Jordan Bibla a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.