ElementPad

Interactive Product Design for Movement-Driven Computing

ElementPad Design System – From 0→1

Abstract

ElementPad is an interactive hardware and software product that merges physical ergonomics with digital control. Within the product, Tristan Pittard created a unified HUD design system built on reusable components, accessibility-first patterns, and Light/Dark theming. This system enabled multiple interface formats (Full, Mini, and Stats), giving users flexibility while maintaining consistency, clarity, and trust across the platform.

Overview

ElementPad is a movement-driven computing product that combines a physical standing pad with a customizable HUD interface. Co-founded by Tristan Pittard, the project spanned hardware and software design, including product strategy, UX research, and interaction flows. A key focus was building a HUD design system, a framework of reusable components, themes, and interaction patterns that allowed the interface to scale across formats (Full, Mini, and Stats) while staying accessible, consistent, and adaptable.

The Challenge

The core challenge: Create a unified design system for an unprecedented hardware–software ecosystem that could:

Scale seamlessly across hardware and software interfaces
Adapt to different space and visibility needs
Maintain usability in Light and Dark modes

Clearly indicate which application was “in focus”

System Architecture

The ElementPad HUD was built as a component-driven system with three distinct interface formats:

Full: mimicked the physical pad layout, displaying all assigned buttons
Mini: reduced footprint while keeping all active buttons visible
Stats: ultra-thin strip for maximum screen space, hiding button tasks

Each format was powered by the same design standards and reusable components, ensuring consistency and scalability across modes.

Theming & Accessibility

Fully supported Light and Dark modes for user preference and visual accessibility
Dedicated application icon space provided clear context for which app was active

UI patterns and interaction states validated with engineers to support keyboard-free accessibility and cross-application consistency

Governance & Reuse

The system included:

Shared button states, typography, and iconography
Clear component rules for when to use Full vs. Mini vs. Stats layouts
Collaboration artifacts that bridged design and engineering, ensuring efficient implementation and a cohesive user experience

Outcomes

Enabled multiple UI modes without fragmenting the design language
Improved flexibility for users: more visibility when needed, more space when preferred
Demonstrated how system-level design thinking can scale from hardware to software, creating a cohesive ecosystem with wellness and accessibility at its core

Why cause marketing?

Social Cause Marketing is about doing things for the right reasons. It’s the art of leveraging creative thinking to unite brands and nonprofit causes, driving meaningful change in communities and beyond.

A mentor once put it this way: “It’s selling teenagers safe sex instead of Nikes.”

We bring ideas to life—painting stories on any canvas to help you share your message in a way that resonates.

With a strong track record in delivering impactful advertising, public relations, and social marketing campaigns, we craft culturally relevant and audience-centric strategies focused on health promotion, community well-being, and sustainable lifestyles. Our expertise spans digital design, content creation, branding, social media management, and public art initiatives. By integrating creative storytelling with data-driven insights, we inspire action and drive measurable outcomes for public health and social impact initiatives.

We partner with nonprofits and small businesses to amplify their voices and create lasting change.