The Product: T-REX


T-REX is a hybrid solution, combining field hardware with an online service. The hardware integrates with older pump jacks, extracting data and enabling users to manage their wells remotely via the internet. The T-REX website aims to display well conditions, provide notifications for well alerts, and offer in-depth data analysis for troubleshooting or determining necessary actions.

The team I worked with:
  • CEO
  • Product Manager
  • 1 Frontend Developer
  • 1 Backend Developer
  • 3 Hardware Engineers


Before diving into design, I sought insights about our customers. Conversations with the CEO and engineers provided clarity on three distinct personas that would guide my design decisions. While these personas varied in their job roles, they shared some similarities: predominantly blue-collar workers, spanning different age groups, and generally less tech-savvy, sometimes even resistant to new technology.

Atomic Design

Once personas were identified and I had a better understanding of the industry, I began constructing T-REX’s design system using Brad Frost's atomic design methodology, starting at the atomic level. While I incorporated elements adopted from Bootstrap, I added some customized elements to differentiate our software. I adhered to a few key principles including ensuring elements were built with 1rem (16px) foundation, and that color consistency was maintained for clear communication.


After establishing the atomic levels, I progressed to crafting the components (molecules), weaving between the Bootstrap framework and devising ways to deviate from a typical Bootstrap application. Recognizing our personas, I created a hard rule all clickable and interactive elements to be blue. From observing individuals who are less accustomed to modern applications, I noticed confusion over what they considered interactive. By creating a consistent "blue" pattern, although unconventional in more popular design methodology, it was an effort to offer an inclusive solution for this group of users.

Customer Interviews

When conducting customer interviews, I would present lo-fi prototypes and pose open-ended questions to gather feedback on proposed features. One thing I discovered from our target audience was that high-fidelity prototypes often left them confused, making them wonder if they were viewing the actual site. They also became overly focused on any incorrect data. As a result, I realized that filler text and numbers needed to be replaced with more realistic-looking data and lo-fi designs to lessen confusion about what they are looking at.

My note taking process started with customer consent to record the sessions. After each recording, I would extract the audio and utilize a process in Google Colab that employed AI to generate text transcripts from the audio. Once transcribed, I would highlight notable quotes or observations and organize them in a Confluence table for team members to review.

Requirements and Final Sign Off

With defined requirements, I proceeded to craft high-fidelity workflows showing expected behaviors, validation checks, messaging, and detailing happy-path vs navigating potential pain points. Upon completion, I would schedule a meeting with stakeholders to ensure all business needs were addressed.

With experience, I learned that sharing such intricate workflows with stakeholders could be excessive and time consuming. I pivoted to documenting the requirements in a JIRA ticket for stakeholders. We then collaboratively reviewed those tickets to ensure all requirements and business needs were accurately met. Despite that pivot, I continued to design workflows for development and QA purposes.

Feature Set Library

During the creation of high-fidelity workflows, I also developed a library for each feature used. This approach not only streamlined design updates but also allowed the ability to produce updated concepts without disturbing the current designs.

Design Handoff

Finalizing the walkthroughs, I would create a handoff document for the developers. This guide, which I crafted before Figma's dev mode update, was dubbed the "Lego Manual." It meticulously detailed all components and provided specifics such as spacing, icons, font styles, colors, and behaviors.

Continued Support

Upon completion, I collaborated with the development team to address design questions or concerns and negotiate potential component adjustments or behavior modifications as needed.