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.

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 might interactive design reveal hidden connections between digital systems and environmental impact?"
• Conceptualized a location-based metaphor as a 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 rough outline for 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: Utilizing a command-line interface aesthetic, the project features a white, black, and blue color palette reminiscent of digital systems that underpin our polished user interfaces
• Typography: Bernoru Black for bold headings and Space Mono for body text to maintain the command-line interface aesthetic

Accessibility Decisions

• 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
• Progress tracker to help users feel engaged and informed
• Question-based interface designed to be cognitively accessible and non-overwhelming

Technical Planning & Architecture

• Platform: Vite framework using TypeScript and React
• Hosting: Vercel for reliable, accessible deployment
• Design Tools: Adobe Photoshop and Figma for mockups and visual design, Cavalry for motion graphics
• Development Environment: Cursor IDE for code implementation
• Architecture: Modular page structure allowing for scalable question additions and content updates, utilizing React components and hooks for maintainability and scalability

Code Implementation

• Built a responsive, visually cohesive design using TypeScript and React
• Implemented Tailwind CSS for styling the project
• Created modular React components for reusable question blocks and interface elements
• Implemented a progress tracker to help users feel engaged and informed

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") with clear visual hierarchy

Animation, Graphics & Motion Exploration

• Utilized Cavalry for motion graphics in results page
• React Bits library for index page background animation

Components Built & Media Created

• Title and introductory context (disclaimer)
• Modular question blocks with consistent styling and responsive design
• Side-scrolling Technosphere visualization

User Testing & Feedback

• Tested with target audience (digital natives) to assess comprehension of concepts
• Gathered feedback on question clarity, engagement level, and overall experience
• Evaluated effectiveness of visuals in communicating the concept of the digital-environmental metabolism
• Refined language for accessibility and clarity

Code Refactoring

• Optimized Tailwind CSS for performance and maintainability
• Improved React components for better maintainability and scalability
• Enhanced responsive design for better mobile and tablet experiences

Final Deliverable Details

• Format: Interactive web experience (TypeScript, React, Tailwind CSS)
• Deployment: Live on Vercel
• Accessibility: WCAG 2.1 AA compliant
• Responsiveness: Fully functional across desktop, tablet, and mobile devices

Features Completed

• Interactive question-based interface with progress tracker
• Educational content on digital environmental metabolism
• Motion graphics and animations for engagement
• Responsive design for all devices
• Accessible navigation and content structure
• Documentation of research and process using Figma
• 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.