Black Box Studios
Scope
Desktop Interface, Experimental UI, Interactivity, Design & Code
Goal
The goal of Black Box Studios was to design and develop a conceptual web experience for an analog photography business specializing in darkroom access, equipment rentals, archival inkjet printing, and high-resolution film scanning. While the project served to anchor the visual identity of the brand, my primary goal was to completely bridge the gap between design and development. I operated across the entire product life cycle, navigating the project from initial ideation and visual strategy to live execution using HTML, CSS, and vanilla JavaScript.
User Archetypes
Brent
Role: The Professional
Goal: Efficiency & Speed
Key Feature: Quick-Book Dashboard
Oliver
Role: The Student
Goal: Education
Key Feature: Mentorship Booking
Rebeca
Role: The Artist
Goal: Gallery Space
Key Feature: Integrated Artist Gallery
Rod
Role: The Manager
Goal: Operations
Key Feature: Admin Dashboard
Wireframes
Figma Prototype
GSAP Scroll Trigger
The goal of Black Box Studios was to design and develop a conceptual web experience for an analog photography business specializing in darkroom access, equipment rentals, archival inkjet printing, and high-resolution film scanning. While the project served to anchor the visual identity of the brand, my primary goal was to completely bridge the gap between design and development. I operated across the entire product life cycle, navigating the project from initial ideation and visual strategy to live execution using HTML, CSS, and vanilla JavaScript.
Final Product
The final phase of the project involved translating my designs into a functional platform using HTML, CSS, and vanilla JavaScript. As my first significant dive into front-end development, this stage presented a steep but rewarding learning curve. Moving from a static concept to a fully interactive, live-hosted website was an incredibly fulfilling experience that solidified my understanding of the bridge between design and code. I have provided a link to the live site hosted on Netlify below; I encourage you to explore the interface to experience the micro-interactions and animations in real-time.
Tech Stack
Conclusion
In conclusion, this project provided a profound look into the multifaceted effort required to bring a digital product to life. Although this was a solo endeavor, I pushed the boundaries of my process by owning every stage of the lifecycle, from initial concept and research to wireframing, high-fidelity design, and final engineering. This experience gave me a newfound appreciation for the cross-disciplinary communication required in a professional setting, specifically how insights must flow seamlessly between research, design, and programming teams to ensure a successful build.
Reflecting on the process, if I were to approach this project again, I would dedicate more time to refining user flows before entering the wireframing phase. A deeper initial dive into the logic of the booking process would have provided a stronger foundation for the complex interactions required, ensuring a more streamlined transition into the final design and development stages.