My Role

I solicited feedback from the team about the goals of the gallery, and prioritized the features that would exist in the first version. I worked with my Visual Designer and the Developers in Hungary to create a design that was feasible on a short time frame. Finally, I completed the final version of the Gallery CSS code so that it met Tableau’s visual and UX requirements.

Project Kickoff

Scoping

I began by tightly scoping the work. I decided that the gallery would include 2 core pages, and reviewed the content on each page with the team.

Early Mockups

I mocked up a few layout ideas during the scoping process to help the team visualize what a gallery with these features might look like.

I've learned that adding color too early gets me detailed feedback I don't need yet. Shades of grey all the way!

Creating the Design

Once the scope of the project was approved by the team, I created an IA diagram that shows all possible flows a user can take through the gallery. This helped our development team in Hungary to quickly understand the nuances of the user experience despite our time zone difference.

Let's be real, I make one of these diagrams for most projects I work on. They provide structure, and help dev and test down the line. Good UX is more than mockups and brainstorming.

Explorations

I worked closely with my visual designer to explore and evaluate design choices, and ensure that we were keeping future features in mind in our original design. Some of our explorations are shown below.

Main Gallery

We included search and ratings (which were not shipped in the first release) so that our design had room to grow.

Extension Details Page

You can tell we're starting to finalize things because there are colors!

CSS Updates

With one week to our code-completion deadline, the design was complete, but the final website was not polished or responsive on many desktop sizes. It didn’t meet Tableau’s standards to ship. The development contractors in Hungary weren’t familiar with Tableau’s visual design language. Additionally, the 10 hour time difference between the developers and designers made it difficult to quickly communicate and iterate on the fine-tuned adjustments that were needed.

I gained access to the code repository, and made the final touches to the CSS, HTML, and JS code that we needed in order to meet the requirements to ship the gallery on time.

I got to learn about flex-box froggy while doing this work, so it was a win-win.

Final Flow

The slideshow below shows the flow for a user to download an extension from the gallery, beginning in Tableau Desktop.

Future Work

In addition to the work for the first release, I created user journeys for a variety of scenarios we expected to support in the future.

The example below shows a developer uploading their extension to the gallery through a new developer portal.

REFLECTIONS

This team functioned somewhat like a startup within Tableau, and working this way was exhilarating. I learned that being part of a quick-moving team necessitates flexibility, and a willingness to step out of assigned roles when necessary.

While I was conflicted about my decision to jump in on the code, it ultimately enabled the Gallery to ship on time - which contributed to the broader Extension API experience. Additionally, this project gave me first-hand experience bringing a design-spec to reality. Ultimately, coding for a week made me a better designer.