Wireframes & Prototyping

• Initial prototypes focused on simplifying interactions while ensuring powerful data manipulation capabilities.

• Iterated based on feedback from internal teams and user testing.

Base Design System

Typography

When designing the interface for our machine learning product, clarity and usability were key. Given the complexity of machine learning workflows, we needed a typeface that could present dense data clearly while maintaining a modern aesthetic. Inter was the ideal choice due to its readability, versatility, and clean design.

Optimized for Complex Data

Inter’s precise letterforms and tuned spacing ensure excellent legibility, even when displaying detailed metrics and technical information. This makes it easier for users to quickly interpret complex outputs.

Color

Our color strategy needed to reflect our brand identity while supporting a highly functional interface. With red as our primary brand color, we faced the challenge of using it effectively without overwhelming the user. Additionally, dark mode was essential to align with developer preferences and improve usability in low-light environments.

Developer-Focused Dark Mode

Dark mode wasn’t just an aesthetic choice—it was a functional one. We created a thoughtful dark theme with high contrast and desaturated accents, reducing eye strain for developers working long hours while maintaining the product’s personality.

Flexible and Accessible

Every color was tested for WCAG compliance, ensuring accessibility across both light and dark themes. This allowed us to deliver a visually cohesive experience while meeting the needs of all users.

Iconography

Our iconography system needed to balance customization for unique product concepts with the speed of using a pre-existing library. I designed a series of custom icons to represent Tecton-specific ideas, ensuring clarity for complex workflows while reinforcing our product’s identity.

Custom Icons for Unique Concepts

Some concepts—like feature pipelines and real-time data flows—had no clear visual analog in standard libraries. I created a bespoke set of icons to represent these ideas, ensuring they were simple, scalable, and aligned with our visual language.

Efficiency with MyIcons

To speed up delivery, I adopted the MyIcons library for common actions and UI elements. This approach allowed us to maintain a consistent look while focusing custom design work on areas where unique visuals added the most value.

Component Library

Key components designed and implemented:

Tables

Tables were a core UI component for Tecton, essential for managing and exploring large datasets in machine learning workflows. I designed a flexible, scalable table system that handled complex data structures while maintaining performance and usability across varied use cases.

Select menus

Select menus were critical for navigating complex options in Tecton’s interface. I improved interaction patterns to make selection faster and more efficient, optimizing the experience for users handling large datasets and frequent inputs.

Usability Insights & Iterations

Error Messaging

Error handling was crucial for improving user trust in Tecton’s complex workflows. I standardized error messages to ensure they were clear, actionable, and consistent, helping the team identify issues faster and ship a more reliable product.

Showing more info by default

Early usability testing revealed that engineers preferred more transparency over simplified UIs—we adjusted designs to surface more system details rather than hide them.

Better filtering

Filters were essential for managing large datasets in Tecton. I expanded filtering options and optimized table interactions, making it faster and easier for users to find and act on specific data, especially when performing bulk operations.