The Problem

When I joined the brand new three-person visual design team at Tableau we were tasked with implementing a full-scale overhaul of the UI and were given a 350 page pdf from an outside agency to use as our guide. This pdf created a lot of confusion for our thousand person dev team.

There has to be a better way

Sorting through the pages in InDesign to make updates was an arduous task, and finding the correct artifact to use proved to be nearly impossible for our developers. As I ramped up on the team I started sketching ideas for a design language system and showing them to the creative director. During our first hackathon, I concatenated the 350+ pages of the PDF into a 53-page website architecture following the principles of Atomic Design.

User Interviews & Scenarios

Next, I gathered key users from the Product, Engineering, and Design orgs to interview and uncover pain points and user scenarios. The product managers wanted simple UI examples they could play around with, whereas the developers wanted a self-service icon library and to know how these artifacts could be coded. They were often confused about what version of an artifact they should use. The PDF had several duplicate examples that were slightly different and this was causing misalignments. The UX designers wanted a single source of truth that would dictate what UI elements to apply and when to apply them.

Adding to the Information Architecture

This led me to expand the AI to include not only an atomic design system but also a widget's library, icon library, and copywriting guidelines. A tall order for such a small team. I created a pitch deck for resourcing and demonstrated the appropriate allocation for such a project but there was no funding to back me up. So I did what needed to be done.

Competitive Analysis

I performed a competitive analysis of other design language systems such as the Salesforce Lightning Design System, Material Design, Microsoft Design and the Apple HIG. I wanted to make sure that we were not leaving any good ideas on the table. The Competitive Analysis helped me adjust the level of detail and organize page structures.

Making One Layout Work For Many Users

After working through user scenarios for Devs, PMs, and Designers I found a patter of progressive disclosure that helped orient users before diving deep into the details.

Screen Shot 2021-09-07 at 6.47.56 PM.png

Conclusion

I continued to provide visual design support for half of our 1000 person development team while I built the design library on the side. I was able to garner support from other UX designers along the way and the components library that I created in Sketch got all of the designers to agree on one design tool. Several months later we were ready to launch and I hosted a brown bag to orient the dev team to the new DLS. One week later I sent out a survey to solicit feedback from the Dev, PM, and Design orgs. My customers were so overjoyed to be done with the old PDF that there was no negative feedback. Today the team has outgrown my original pitch and the DLS has created jobs for over 20 designers. In the end, I wasn't just building a design language system, I was building a design culture platform for all of Tableau. It was the first fully responsive web experience created by Tableau and it bought back trust from the dev team who had given up on our old PDF.