Building Prism, TrackVia’s First Design System

Company & Timeline: TrackVia, July 2022 - February 2023

Role: Project Manager & Lead Designer

Collaborators:

  • Kyle Turner, SVP of Product and Engineering

  • Stephen Kennicut, Senior Software Engineer (web)

  • Josh O’Steen, Senior Software Engineer (iOS)

  • Eugenio Macebo, Software Engineer (Android)

Background & Context

TrackVia is a custom workflow automation platform that helps field service and operations managers streamline their work and increase productivity. It’s powered by a low-code app building platform that allows anyone - from IT professionals to citizen developers - to quickly and securely build their own software to fit their custom needs.

The Problem

When I joined TrackVia as the third design hire, I quickly identified a significant gap: there was no formal design system in place. TrackVia serves three client platforms — web, native iOS, and Android — and this lack of a unified design system resulted in significant problem for both customers and our teams, including:

Inconsistent User Experience: Each platform provided a disjointed and fragmented experience for end-users. Without a cohesive design system, it is difficult to tell that these dashboards are from the same product, let alone showcasing the same resource.

Inefficient Development Workflow: The absence of a shared design language led to inefficiencies and misalignment between design and development teams.

This image on the right is a diagram created by a software engineer to describe the frustrating design & development process of making design updates prior to design system implementation.

Accessibility Challenges: Without a design system in place, the product struggled to meet modern accessibility standards, limiting its usability and compliance with legal requirements.

The Opportunity

I recognized an opportunity to create and implement a design system that would:

  1. Unify the User Experience: Establish a cohesive design language across web, iOS, and Android platforms 

  2. Streamline Collaboration & Design / Developer Efficiency: Foster better alignment between product and engineering teams

  3. Enhance Accessibility: Ensure our product meets and exceeds accessibility standards, enabling TrackVia to compete in more robust environments like HIPAA, SOC 2, and FedRAMP

The Process

Research and Discovery

The first phase of this project involved in-depth research and discovery to understand pain points, brainstorm solutions, and generate buy-in and engagement. In this phase:  

  • I researched existing design systems to identify best practices that we could adapt. I learned about the importance of using a tokenized approach, documentation methods, and how to measure outcomes. 

  • I engaged with engineers to uncover historical pain points in design-development collaboration and articulate our opportunities for improved partnership.  

  • I set meetings with leadership to get buy-in for the project. I communicated the value of a design system, how I would approach building one, and secured dedicated resources to bring the project to fruition. 

  • I reviewed our research repository to understand user frustrations related to inconsistency and visual design, and visually documented instances of opportunities for improvement. 

Goal Setting and Collaboration

I worked closely with developers to set shared goals and priorities. Together, we developed a structured plan that included weekly check-ins and sub-project milestones to maintain momentum.

Design and Implementation

I approached the system iteratively, first defining out all of the design tokens, and then working with developers to get our systems connected. We built and tested components and tokens across platforms. Along the way, I tackled foundational design updates such as:

  • Modernizing the font for improved readability.

  • Updating disabled background states to enhance clarity.

  • Revising error text to align with accessibility standards.

  • Overhauling our Forms product with modernized inputs for enhanced usability.

Iteration and Refinement

We kept process flexible, conducting regular reviews to refine components and ensure alignment with both user and developer needs.

The Solution

To address these challenges, I designed and implemented a tokenized design system that serves as a shared language between design and development teams. Key features of the solution included:

A Tokenized Approach: The foundation of our design system was implementing design tokens, which allowed for consistent and scalable updates across platforms. By creating named entities that stored visual design attributes in a platform-agnostic format, I was able to develop a shared consistent language across iOS, web, and Android clients. The use of tokens were crucial for ensuring scalability, reducing miscommunication, and ensuring accessibility.

Integration Between Tools: The system leveraged an integration between Figma (design) and GitLab (development pipelines), enabling seamless collaboration. We used Figma’s token plugins and integrated these with GitLab’s development pipelines, enabling developers to pull token values directly into the codebase.

Unified Processes for design updates: With the developer’s partnership, we created a standardized process for updating UI components across iOS, Android, and web teams, ensuring cohesion and long-term scalability.

The Impact

Improved User Experience

  • Reduced user frustration by achieving parity between web, iOS, and Android platforms.

  • Delivered a seamless, cross-platform experience through concurrent work on key features like lanes and attachments, unified under the design system.

Streamlined Updates

  • Design and development time for updates decreased by 40%, as the tokenized system enabled quicker, more consistent changes across platforms.

  • Crucial design changes, such as modernizing the font and updating error text, which previously required cumbersome coordination, became streamlined. Updates were pushed efficiently across all platforms with clear communication.

Scalable, Themed Implementations

  • By using a tokenized approach for our design system, we were able to deliver “dark-mode” for our customers, a long asked for feature by customers. Our shared language for tokens across iOS, Android, and web made this an easy implementation, whereas before, it was a logistically impossible request.

Accessibility Compliance

  • The design system ensured compliance with accessibility standards, enabling TrackVia to meet legal requirements and expand into regulated environments like HIPAA, SOC 2, and FedRAMP.