You Are Here: Digital Metabolism Test

What the Project Is: 'You Are Here' is an educational web experience that bridges digital media studies and artistic expression to address the environmental implications of technology. It functions as both a critical tool and an interactive artwork that challenges misconceptions about digital sustainability.

Conceptual Foundation: Grounded in Dr. Amanda Starling Gould's framework of the "digital-environmental metabolism," the project explores how digital systems are intrinsically connected to material infrastructure. This conceptual approach reframes technology not as immaterial, like the terms "cyberspace" or the "cloud" may suggest, but instead embedded in physical, environmental, and social systems.

Audience & Practice Demonstration: Designed for digital natives who may not fully understand the environmental implications of the technologies they rely on daily, the project demonstrates a practice that combines:

• Critical thinking about technology in sustainability
• Interactive design that invites both reflection and engagement
• Artistic exploration of digital media's ecological impact
• Accessible communication of complex systems thinking

Approach Taken: The project employs a question-based interface that encourages participants to engage in reflective interaction, making abstract concepts tangible and personal. This philosophical approach prioritizes user agency and critical consciousness over passive information delivery.

Initial Research, Inspirations & Readings

• Primary Theoretical Framework: Dr. Amanda Starling Gould's concept of digital environmental metabolism
• Interdisciplinary Research: Digital media studies, artistic expression, and sustainability practices
• Thematic Exploration: The intersection of technology, ecology, and cultural practice

Inspirational Works:

• Soli (2021), an artistic exploration of media and digital art's role in transcending traditional notions of reality / spirituality.
• Interdependence, a podcast with Holly Herndon and Mat Dryhurst, discussing digital culture and creative practice
• The Permaweird by Venkatesh Rao, an essay exploring cultural and technological shifts that have reshaped creativity and society

Concept Formation & Early Mappings

• Identified the gap between user awareness and the material reality of digital infrastructure
• Developed the core question: "How can interactive design reveal hidden connections between digital systems and environmental impact?"
• Conceptualized the "grid" metaphor as a visual and conceptual representation of interconnected systems

Goals & Constraints

Goals:

• Educate digital natives about environmental implications of technology
• Create an engaging, reflective user experience
• Demonstrate the relationship between digital and material systems
• Foster critical consciousness about digital sustainability

Constraints:

• Communicating complex systems thinking in an accessible way
• Balancing artistic expression with educational clarity
• Creating an interactive experience within web technology limitations
• Ensuring the project remains engaging rather than didactic or overwhelming

Audience Needs

Primary Audience: Digital natives (ages 18-35) with high technology engagement but limited awareness of environmental impact

Needs Identified:

• Clear, relatable explanations of abstract concepts
• Interactive engagement rather than passive information consumption
• Personal relevance and agency in the experience
• Visual and conceptual clarity about complex systems

Wireframes, Sitemaps & Storyboards

• Site Map Development: Created a comprehensive blueprint outlining the purpose of each page, key features, and connection logic to maintain cohesive experience
• Wireframing: Planned the layout of each page, determining placement of headings, question-based interface elements, navigation, call-to-action buttons, and visual media
• User Flow Storyboarding: Mapped the journey from initial context-setting through question progression to final reflection

Style Guide, Typography & Color Systems

• Visual Language: Digital, interconnected aesthetic reflecting the "grid" concept
• Color Palette: Command-line interface palette: White, black, blue reminiscent of digital systems that underpin our polished user interfaces
• Typography: Archivo Black for headings and Space Mono for body text to maintain the command-line interface aesthetic
• Visual Metaphor: Grid-based geometric patterns representing digital infrastructure and interconnectedness

Accessibility Decisions

• Semantic HTML structure for screen reader compatibility
• High contrast ratios for text readability
• Clear navigation labels and logical tab order
• Alternative text for all images and diagrams
• Responsive design ensuring usability across devices
• Question-based interface designed to be cognitively accessible and non-overwhelming

Technical Planning & Architecture

• Platform: Static website built with HTML / CSS / JavaScript
• Hosting: GitHub Pages for reliable, accessible deployment
• Design Tools: Adobe Photoshop and Figma for mockups and visual design
• Development Environment: Visual Studio Code for code implementation
• Architecture: Modular page structure allowing for scalable question additions and content updates

Code Implementation

• Built semantic HTML structure for accessibility and SEO
• Implemented CSS styling for responsive, visually cohesive design
• Created modular components for reusable question blocks and interface elements
• Developed navigation logic for smooth user progression through the experience

Interaction Logic

• Question-based progression system guiding users through the experience
• Navigation between sections maintaining context and continuity
• Call-to-action buttons ("Take The Test Here") with clear visual hierarchy

Animation, Graphics & Motion Exploration

• Geometric grid patterns as visual motif representing digital infrastructure
• Visual hierarchy guiding attention to key information
• Illustrative graphics representing interconnected systems

Components Built & Media Created

• Title, introductory context, and visual grid graphic
• Modular question blocks with consistent styling
• Clear pathways through content
• Grid animations, diagrams, and supporting graphics
• Screenshots and process documentation

User Testing & Feedback

• Tested with target audience (digital natives) to assess comprehension of concepts
• Gathered feedback on question clarity and engagement level
• Evaluated effectiveness of visuals in communicating abstract systems
• Refined language for accessibility and clarity

Code Refactoring

• Optimized CSS for performance and maintainability
• Improved semantic HTML structure for better accessibility
• Enhanced responsive design for mobile and tablet experiences

Visual Polish

• Refined color palette for optimal contrast and visual harmony
• Adjusted typography sizing and spacing for improved readability
• Polished interactive elements for smooth, intuitive interaction

Adjustments for Clarity, Storytelling & Accessibility

• Clarified question wording to ensure comprehension
• Enhanced accessibility features based on testing feedback

Final Deliverable Details

• Format: Interactive web experience (HTML/CSS)
• Deployment: Live on GitHub Pages
• Accessibility: WCAG 2.1 AA compliant
• Responsiveness: Fully functional across desktop, tablet, and mobile devices

Features Completed

• Interactive question-based interface
• Educational content on digital environmental metabolism
• Visual grid metaphor representing interconnected systems
• Responsive design for all devices
• Accessible navigation and content structure
• Documentation of research and process
• Call-to-action linking to interactive test
• Integration of theoretical framework (Dr. Amanda Starling Gould)

Product Delivered

A fully functional, accessible web experience that educates users about digital environmental metabolism through engaging, reflective interaction. The project successfully bridges artistic expression and critical systems thinking, offering digital natives a clearer understanding of their role within the complex structures that underpin modern technology.

What I Learned

• Systems Thinking: Deepened understanding of how digital infrastructure is intrinsically connected to material, environmental, and social systems
• Educational Design: Learned how to communicate complex concepts through interactive, engaging interfaces
• Artistic-Technical Integration: Discovered how artistic practice and technical implementation can reinforce each other to create meaningful experiences
• User-Centered Design: Recognized the importance of designing for the specific needs and awareness levels of target audiences

Challenges & Breakthroughs

Challenges:

• Translating abstract systems thinking into tangible, interactive experiences
• Creating engagement without oversimplifying complex environmental issues

Breakthroughs:

• The question-based interface emerged as an effective mechanism for fostering reflection and personal agency
• Interactive design proved more effective than static information delivery for this audience

How the Project Shaped My Design Philosophy

This project reinforced a design philosophy centered on:

• Ecological consciousness
• Critical engagement
• Accessibility & inclusivity
• Systems thinking
• Artistic-activist practice

Future Plans

Features to Add or Extend:

• Create a results page that reflects individual user responses and provides tailored insights
• Allow users to share results and engage in discussions about digital sustainability
• Translate content to reach global audiences

Improvements I'd Like to Make:

• Implement lazy loading and dark mode
• Develop more sophisticated visual language and motion design

You Are Here: Digital Metabolism Test is a comprehensive portfolio project that demonstrates my ability to integrate critical thinking, artistic vision, and technical skill. The project successfully educates audiences about the environmental implications of digital technology through an engaging, interactive experience grounded in rigorous theoretical frameworks. It showcases my capacity to bridge disciplines, communicate complex ideas accessibly, and create meaningful digital experiences that foster critical consciousness and engagement.

This design brief provides a complete roadmap for understanding the project's conception, development, and future evolution, serving as both documentation and inspiration for continued growth in my creative-technologist practice.