This project transforms a technical Wikipedia entry into a modern, responsive «Industrial Startup» web experience by reimagining a classic locomotive as a high-end product for fictional customers.
What?
The objective was to rethink how technical, text-heavy information can be presented in a more engaging and commercially driven way. Instead of following a dry, encyclopedic layout, I chose to treat the Henschel DHG 700C as a cutting-edge product for a fictional modern customer. This approach allowed me to establish a robust design system and focus on high accessibility, ensuring that even complex industrial data feels intuitive and visually compelling on any device.
4 days
from concept to code
8 hours
of dedicated Figma design and prototyping
49
commits to the GitHub repository
How?
The process began in Figma, where I built a comprehensive design system using components and variables to maintain a consistent “startup” brand identity. For the functional prototype, the focus shifted to technical performance and meaningful motion. I integrated Three.js for a custom glitch hover effect in the gallery and used the GSAP library for high-performance SVG animations. A highlight of the development was the dynamic hero section, where an isometric locomotive illustration responds to cursor movement to create an immersive sense of depth.
Learnings.
Managing a full cycle from high-fidelity design to functional code within a 96-hour window was an intense exercise in prioritisation and efficient execution. I discovered that technical data becomes significantly more accessible when paired with a strong narrative and subtle micro-interactions that guide the user. The project reinforced that a clear design system is essential for maintaining flow, allowing me to focus on complex details like custom scroll-watchers only when they truly enhanced the overall user experience.
