Product Designer & Technical Strategist
4-Week Sprint (Concept to Prototype)
Environmental UX & Tooling
Solving the "Studio Vacuum" problem by simulating real-world usage stressors.
The Challenge
Designers often create products in "perfect" conditions: high-res monitors, fast Wi-Fi, and optimal lighting.
However, users interact with these products on moving buses, in harsh sunlight, or with limited hand reach. There is currently no unified tool that allows designers to "stress-test" their UI against these environmental factors during the design phase.
The Process
Audit: Researched environmental accessibility gaps and existing mirroring tools like Figma Mirror.
Logic Mapping: Defined the technical requirements for simulating motion, glare, and physical reach.
Prototyping: Leveraged Agentic AI (Google AI Studio) to build a functional web-based "Lens" app.
Verification: Conducted side-by-side tests of Figma designs versus real-world "stressed" versions.
The Solution
I designed and prototyped Context-Cam, a dual-system tool consisting of a Figma Plugin and a mobile companion app that applies hardware-triggered filters to static designs.
The Glare Simulator: Uses the ambient light sensor to overlay realistic screen washout, testing visual hierarchy in high-brightness settings.
Motion & Blur: Integrates the device accelerometer to simulate the visual difficulty of reading on the move.
Dynamic Reach Heatmap: An interactive overlay that maps the user's "safe zones" based on their specific grip and device size..
Flexible Input & Scaling: Skip complex handoffs by uploading PNGs, pasting URLs, or dragging screenshots directly into the app.
The Results
Reduced Design Iterations: Identifies accessibility and legibility issues before the handoff to developers.
Enhanced Empathy: Forces stakeholders to experience the product as a distracted user would, leading to better decision-making.
Data-Driven Decisions: Moves beyond "I like this color" to "This color fails in 60% of real-world lighting scenarios.
Technical Proof: Successfully demonstrated that browser APIs can be used to augment the design workflow.
Key Insights
Designing for the screen is only half the job; designing for the environment is where true usability is found. Context-Cam turns the smartphone into a mirror for reality, not just a window for pixels.
Let's Build Something Better!
Ready to transform your digital design process with accessible, scalable systems?