John Athayde

Product Design Player-Coach

Download as PDF

Summary

Designing and shipping for the web since 1997. A product design player-coach who still writes the code. I work the seam between design and engineering: leading discovery, shaping systems, prototyping the direction, and (when it’s the fastest way) shipping the front-end or full app to prove it.

Twenty-plus years of brand-systems-applied-to-product, treating print, marcom, web, and app UI as one coherent surface. Most of the work has been some version of this pattern: rebrand a company, apply the brand across every silo, and carry it into the product. Recent runs at PowerFleet (full company rebrand through NASDAQ relaunch during a 2x revenue, 4x headcount acquisition) and at ATI (a Driven Brands company). Earlier, I built and maintained Wilde, a packaged design system shipped as a Ruby gem and Bower package that powered the UI of 30 internal tools and skinned Salesforce flows at LivingSocial, before “design system” was the common term.

Currently running three Rails products as the sole PM, designer, and developer (PatchVault, Rostergeek, Talos), using them as a working lab for design tokens, Lookbook, and AI-assisted design system workflows. Also: musician with a serious guitar rig, permaculture practitioner on twelve and a half rural acres in central Virginia, and a longtime Scouting volunteer.

What I do

  • Brand-to-product parity. Running brand systems across every surface a company touches (print, marcom, digital, sales, trade show, app UI) and keeping them coherent as the org changes.
  • Design systems strategy and architecture. Token systems, component libraries, the design-to-engineering distribution layer, and the documentation that keeps them honest.
  • Design and engineering bridge work. Translating product strategy into structured technical plans, and prototyping in production code when it’s the fastest path to alignment. Comfortable across Rails, React, Angular, .NET MVC, and Elixir front-ends.
  • Discovery and applied research. Service safaris, shadowing, AT-ONE, persona work, and the kind of deep listening that uncovers what the org actually needs before anyone draws a screen.
  • AI-assisted workflows. Figma to code pipelines (Tokens Studio, GitLab CI), MCP tooling, local inference, the Anthropic API, and Lookbook/Storybook as the design-system surface for AI tools to read and write against.

Experience

Owner

Meticulous, LLC

· Charlottesville, VA

Co-founder and sole operator (since 2009) of this multi-disciplinary design and Rails practice. Product design, marcom web, print, development (Rails, .NET MVC, WordPress), film, and audio production and post. Released an animated short, The Sandbox, in 2005.

Recent and active engagements:

  • ATI (a Driven Brands company), full rebrand and product arc (Nov 2023 to Jun 2026). Multi-year contractor engagement covering the same pattern I ran at PowerFleet: full rebrand, brand guidelines applied across marketing, print, digital, and sales silos, reskinned the existing application and shipped the implementation in .NET MVC, and designed new product functionality with the internal team for the next version.
  • Cybermaniacs, strategic design advisor (ongoing since August 2022). Advisory engagement working alongside the CEO on both design and broader company direction: brand evolution, website rollout review, helping manage execution work with another design contractor, auditing the software platform and proposing paths forward, and sitting in on engineering hiring and build reviews.
  • Xirgo / Elastic M2M, V3 Auto UX (Aug 2024 to present). Led UI refresh and design strategy for a multi-brand, multi-language, multi-device Angular-based IoT platform spanning web and mobile. Architected the design token system and built the generation pipeline now running in production: Figma Console MCP generates the token file through Claude into the repo, which pushes to GitLab where a CI job parses it. Design and engineering stay in parity across white-label brand partners because the pipeline enforces it. Brought in by the former PowerFleet CEO and CPO at the startup of the new company; currently extending across the broader portfolio.
  • Procore, UX practice-building engagement (Aug 2014 to Feb 2016). Invited in by Sam Crigman, then Head of Engineering and now CTO, after my RailsConf talk on dev-designer collaboration. Trained the org on UX discovery, helped hire the first two UX designers, designed the Change Management and Submittals modules (80+ screens and states), and set the embedded-designer operating model before handing off. The team scaled to 15 within twelve months on that foundation. Procore became the AEC industry’s first unicorn and IPO’d in 2021.
  • Rails Foundation (ongoing). UX, design, and front-end work on the Rails guides (both learner and API guides) and marketing site content build-outs (case studies, foundation members, and similar).
  • AI tooling and MCP exploration. Built a series of autonomous agents (Scout, Bugle, and others) on top of the OpAgent framework, running on local inference and the Anthropic API, with integrations to HubSpot, Apollo, and Telegram. Figma Console MCP is in production in the Xirgo token pipeline above. Active in the MCP and Claude Code ecosystem for design ops, agency ops, and design-system context.
  • Other client work has included Driven Brands, Guggenheim Securities, Lifetime Networks, Ruby Central, The Academy for Educational Development, RTKL Associates, and more.

Sole PM, designer, and developer on three Rails products operated through Meticulous and Knightsbridge (the OSINT-focused research sister company):

  • PatchVault (Meticulous product). Development started 2013; in production with users since 2016. Patch design and trade documentation tooling for the Scouting community.
  • Rostergeek (Meticulous product). In rapid development; targeting public release Q3 2026.
  • Talos (Knightsbridge product). Internal use plus active client engagements; SaaS release in progress.

Co-founder & Chief Experience Officer

Ocufii

· Remote

Co-founded a consumer product company; led brand and experience design from initial identity through consumer product launch.

  • Created the brand identity end-to-end and applied it across packaging, collateral, web, and trade show presence, carrying the company through its consumer product launch.
  • Designed and shipped the initial mobile experience, taking the product from concept through launch-ready UI.
  • Concepted a range of desktop interfaces for the platform’s operational and management surfaces.
  • Represented the company at consumer trade shows, running booth presence and launch marketing alongside the product work.

VP of Design

PowerFleet, Inc. (formerly I.D. Systems)

· Remote

Sole design leader through a transformative acquisition that doubled revenue and quadrupled global headcount. Hired and managed a designer as a direct report.

  • Inherited at least five separately built products across divisions from the merged source companies. Brought them under a single PowerFleet brand and built out the shared visual language across them through skinning and forward-looking concept work, the groundwork for a design system the company never got to finish. Did the design in Sketch and the HTML/CSS implementation in React myself, since no one on the engineering side was set up to. Built on variables throughout, which is the same abstraction, before “tokens” was the word for it.
  • Designed modules and third-party integrations for the next-generation PowerFleet Unity platform, in Sketch and later Figma.
  • Led reimagination of that platform end to end: research, IA, user flows, wireframes, visual design, and testing. Wrote, shot, edited, graded, and mixed a six-minute vision video for the Intermodal Concept, alongside a clickable prototype, for the FreightWaves F3 conference in 2021; the visual language from that work became the basis for Unity in H1 2022.
  • Rebranded the company end to end in Oct 2019 (web, print, video, trade show, brand guidelines) and relaunched on NASDAQ. Managed three primary brands and spun down legacy brands from pre-2019 M&A.
  • Authored brand-to-product guidelines that let international subsidiaries update their own software modules in step with the system.
  • Delivered against enterprise scope by sourcing and managing external contractors rather than growing headcount.

VP of Design

CargoSense, Inc.

· Remote

Sole design leader for a B2B IoT and logistics platform.

  • Ran all design and UX as a team of one: marketing materials, video/audio, web interface, mobile app interfaces, and application design and implementation.
  • Partnered with CTO and CEO on product flows for web and mobile.
  • Built and maintained a design system with engineering for the Rails, React, and Elixir platform.
  • Established and maintained brand guidelines across the company’s multiple product offerings.

Lead, Internal Tools UI/UX

LivingSocial

· Washington, DC

Led design and front-end development for the Internal Tools engineering division. Led a UX/front-end team of four as a player-coach.

  • Led the Customer Support redesign that took agent SLA from 20% to 90% and dropped call abandonment from 20% to 4%, using service safari, AT-ONE framework, and extensive shadowing of CSRs across phone and email support.
  • The design language extracted from that redesign became Wilde, a packaged design system shipped as a Ruby gem and Bower package that powered the UI of 30 internal tools and skinned Salesforce flows, maintained by a small team.
  • Enhanced workflows for customer support, deal quality and programming, and sales that improved metrics and KPIs across the board.

UI/UX/Design Lead

InfoEther

· Reston, VA · Acquired by LivingSocial, March 2011

Sole UX/Design resource and primary front-end developer (HTML/CSS) for a Ruby on Rails consultancy.

  • Gathered requirements from customers and turned them into designs and artifacts for engineers to build.
  • Implemented interfaces in the Ruby on Rails stack.
  • Designed print and web marketing materials for the company.
  • Worked on product development and vision for various internal products.

Partner

Hyphenated People

Ran a high-end UX and UI consultancy with Amy Hoy. Clients included Bear Stearns, Wine Library/Gary Vaynerchuk, Peracon, and Grab Networks/Voxant.

Creative Director

InPhonic Inc.

  • Built out the creative and microsites team from 4 to 15 over two years.
  • Managed 100+ jobs per month through team pipeline.
  • Directed work that improved ad performance on large media buys (MSN.com home page, others).
  • Redesigned the Wirefly.com property with Nathan Curtis at EightShapes (he took UX, I took UI).

Senior Web Developer

InPhonic Inc.

  • Created numerous microsites and marketing channels that stood outside the engineering platform.
  • Branded, built, and maintained properties, transitioning to team members after move to Creative Director.

Manager, Liquid Media Division

RTKL Associates Inc.

· Washington, DC

  • Ran procurement and project management of 3D rendering, animation, and multimedia for the DC office.
  • Coordinated with teams in LA and London for staffing and pipelines.
  • Key projects: US Capitol Visitors Center, Pentagon reconstruction (Phoenix Project), US Capitol Security Perimeter, National Trust for Historic Preservation website.

Education

Catholic University of America

Master of Architecture, January 2001

Bachelor of Science in Architecture, June 2000

Permaculture Research Institute

Permaculture Design Certificate, 2014

Publications and Speaking

  • The Rails View (Pragmatic Bookshelf, 2013). Co-authored with Bruce Williams.
  • Speaking since 2008; 40+ conference talks and podcasts (johnathayde.com/speaking). Recent: Blue Ridge Ruby 2026, Indie Rails and Remote Ruby (2026), RailsConf 2025 (“UX & Design for Rails Devs”), “Design Systems from Zero to One” (Frontrunners 2023, RVA.js 2023).
  • Podcasts: Melissa Perri’s Product Thinking, Ep. 91 (“Investing in Internal Tools & Design Systems,” Oct 2022), Maintainable (forthcoming).
  • DeveloperUX, training curriculum for engineering teams on UX fundamentals, drawn from training the engineering orgs at Procore, LivingSocial, and others.

Outside of work

Once opened for Coldplay as a semi-professional musician. Lives with my wife and four children on our permaculture farm outside Charlottesville, Virginia. Longtime Scouting volunteer.