TUNE Experience Language
I have a natural tendency to break a problem into manageable chunks. I used to take things apart and put them back together as a kid to understand how they worked. I could even keep track of all the little screws. That applies to design too.
Key Takeaways
- Designed multiple enterprise-class design systems
- Fostered a culture of reusable design and built tools to make it easy
- Defined a process for writing specs for engineering
- Improved user testing productivity with consistent and coherent mock data
I spent many years developing software before I decided to focus on design, which taught me how to engineer a solution for easy reuse and maintenance. Now we have a fancy term for this, but I’ve designed, built, and maintained a few design systems for enterprise-class products.
At TUNE we call our design system TXL, or TUNE Experience Language. This is a mature component library that everyone on the team is comfortable working with and contributing to. One of my first big initiatives when joining the company was to get everyone moved over to Sketch and to build a symbol library for TXL. My goal was to improve the mechanical part of our process to free up time for understanding our users and exploring solutions.
A huge part of having a successful design system is a close relationship with the engineering team who maintains it. I helped evangelize TXL throughout the organization and manage the communication with engineering for new components and updates.
These are the building blocks of our table component. We have columns for each data type complete with sample data for quick designs, row states for hovering and grouping, and support for sorting and pinned columns. We publish all our components into our InVision design system manager.
Our specs are built from our symbols, making them less error prone and enforcing a single source of truth. By putting the effort into the design system, we can make hi-fi designs earlier in our process, and we avoid tedious redlining for individual feature work.
We try to minimize changes for the sake of change, but inevitably we need to make modifications or additions. With our design system we’re free to explore in the context of an active feature, adjusting individual styles and components and seeing the changes replicate throughout multiple pages or workflows. When we’re ready we can adjust the specs and publish an update for our design and engineering teams.
Working with a library this large can get complicated. I developed a Sketch plugin to automate repetitive or complicated actions.
We’re designing a lot of management and reporting workflows that present information in tables. During customer testing, if the mock data looks too fake our users waste time trying to make sense out of the data instead of concentrating on the problems. One of the plugins I built enables us to create a table from data pasted from a spreadsheet. We have a shared sheet of sample data we can pivot however we want, then copy and paste into Sketch, and end up with a perfect TXL table like this:
