Dustin Kirk
Principal Product Designer at Tealium

With 15 years of experience working on enterprise applications, I bring system level thinking to each project I work on. I've specialized in defining and implementing enterprise scale UX systems in areas including building and retrofitting design systems, establishing highly scalable UI patterns, and engaging cross-functionally with stakeholders and product managers to ensure all needs are met.

I have an innate desire to solve problems and enjoy taking on ever more difficult and complex challenges that blend people and technology. This has lead me through life as I studied Computer Science and Psychology at Rensselaer and went on to get a M.S. in Human Computer Interaction. Other activities of note include completing the Entrepreneurship Development Program at MIT, presenting at the O'reilly Strata Data Conference, and receiving a patent on event tracking via CSS.

Design Leadership
Design Team Org

In strategizing the growth of the design team, I detailed out a plan that would grow the team from being the lone designer to a team size of 30. The following team structure is organized to provide designers focused on product features and slowly build out supporting roles. More specialty positions are created to make product designers more effective and efficient by removing cross-feature tasks and artifacts. Additionally, user research and usability testing deserves a team of its own, and will be built out adjacently. Scaling the team involves hiring generalist Senior Product Designers at first, and slowly adding more specialized roles.

Design Team Roles

In addition to defining the organizational structure of the team, I detailed out the primary responsibilities of each position. This was used to effectively explain the growth plan and strategy to other members of the product team, upper management, and give the design team a concrete idea of the responsibilities each role would have.

Feature Design Workflow

As a startup, Tealium's organization was very sales oriented, with new product features being driven by individual customers and the sales teams. And for many years lacked product managers, project mangers and any kind of structure around the feature development process. While it worked for a while, the forming of the product organization in 2019 brought in new product managers, project managers, and scrum masters. With so many new people, it was important to get everyone on the same page and formalize the product design workflow. This artifact was useful for the product designers to know what was expected, but also for other stakeholders to understand the design process as a whole.

Design Objectives

Starting out the year 2020 leading two new designers, I identified areas of the product that were lacking or non-existent. These areas included usability and design validation prior to development, a lack of consistency across the product, the lack of graphics and visualizations for product features, the disjointed experience as users cross from the product into areas such as the support portal and documentation, and to prepare for future company growth and distributed teams.

Design Team Deliverables

Upon completing the list of objectives, I created a quarterly roadmap indicating when specific deliverables would be completed. As there is obviously much more work than two designers and myself at the time could complete, this roadmap was used both as a indication of prerequisites, but also for pitching the expansion of the design team to company executives.

Design Systems
Design System: Foundation / Colors

Tealium has had a few minor efforts at creating a design system. After two separate attempts that were incredibly incomplete, and difficult to maintain. It became a goal for 2020 to institute a full fledged design system. In doing so, foundational elements such as grids, iconography, and typography topped the list, with priority number one being a color system.

Unlike most design systems which focus on a just a few hues, and possibly 8 levels of brightness, Tealium's design system is intended to eventually extend beyond the product alone, and into customer touch-points including community forums, and marketing material. We desired to build out a full pallet across many hues that could be used for user generated badges and labels, while still looking good with the product pallet.

As a whole, the the color system was inspired by San Diego, the home of Tealium's headquarters. The vibrant colors of the consistently blue sky, aqua color of the water, yellow accents on buildings, etc. all played a part. The overall look of the product is white and bright, and the vibrant accent colors give it a friendly feel that is fitting with the company's culture and offsets the dreary corporate feel of legacy enterprise applications of the past.

Several system level constraints helped define our pallet such as reserving status colors like red, orange, and green to only be used for indicating status (success, failure, warning). This drove the use of desaturated colors like Mint and Coral to be incorporated for use in areas such as customer defined labels, as well as in charts and graph visualizations. Blues and purples, being status neutral, were expanded to allow a broader range of hues for use in gradients and well as charts and graph visualizations.

Care was taken to avoid a muddy looking pallet as dark shades of yellow and orange often do if applied uniformly across hues. Similarly, the pallet was reduced by removing many of the darker colors where it wouldn't be clear what the difference between the colors would be, for example Aqua 850 vs. Sky 850.

Another deliberate decision was to avoid a straight pallet of grays. Our system grays start out with no saturation on the light side, and build up a slight blue saturation as they get darker. While gray is appropriate and often used to shade areas such as header backgrounds and toolbars, the slightly saturated dark text helps takes away dullness of gray on gray.

Design System: Components / Buttons

This is an example of one of the components that I built out for the design system. These components utilize Figma’s auto-layout functionality to make it easy for designers to copy into their mockups and modify the content. Additionally, much thought and consideration was put into the naming, organization and variations to ensure they were relatively easy to maintain, and make creating mockups incredibly effecient.

Design Patterns
UI Pattern / Tables

This is an example of a UI pattern I created to replace our existing use of accoridions throughout the products. This pattern is designed to facilitate organizing and locating items from an enormous list of possibilities. As users need to locate and take action on a few items amongst thousands, this pattern is designed to handle the most extreme use cases Tealium’s customers face.

UI Pattern / Slideouts

This is an example of a UI pattern I created to replace our existing use of modals. This pattern is designed to solve many issues by maximizing screen real-estate, keeping users in context as they dive deep into configurations, and enables users to be incredibly efficient.

UI Pattern Iteration

In this example, you can see the iterations leading up to the final UI pattern. This pattern had three objectives, all which mean allowing the user to quickly navigate to list items which they may have pinned for quick access, items which were selected as part of a multi-step selection, and items which might otherwise get lost because they were added and don't match the currently applied filter. The end solution is a simple and elegant way to address these otherwise often skipped over use cases.

Design Specifications
User Permissions

This is an example of a feature I designed to handle user permissions. This feature mockup showcases annotations, handling of edge cases, errors , and is an example of what would be shared with product managers and developers. This specific example is a V1 of a larger vision which would include managing roles and profiles.