Hospitals are high stress environments where getting lost isn't just an inconvenience, it's a critical failure. My challenge was to replace confusing static signage with a digital companion: a web based, 2D/3D wayfinding system, that guides patients anywhere in the Hospital with the same ease as a GPS, ensuring that physical or language barriers never delay care.
Hospitals are high stress environments where getting lost isn't just an inconvenience, it's a critical failure. My challenge was to replace confusing static signage with a digital companion: a web based, 2D/3D wayfinding system, that guides patients anywhere in the Hospital with the same ease as a GPS, ensuring that physical or language barriers never delay care.
Hospitals are high stress environments where getting lost isn't just an inconvenience, it's a critical failure. My challenge was to replace confusing static signage with a digital companion: a web based, 2D/3D wayfinding system, that guides patients anywhere in the Hospital with the same ease as a GPS, ensuring that physical or language barriers never delay care.
Using G Element's focus on Smart Cities as a foundation, I was tasked to build an Indoor Digital Wayfinding Companion. The requirements were to move beyond static 2D maps and build a web based, interactive 3D navigation system that is accessible to all phones. My role was to engineer the logic and frontend that would translate a digital twin of a hospital into a user friendly tool, featuring dynamic intelligent routing and inclusive modes for wheelchair users.
User Flow for Patients and Visitors
The challenge was rendering a heavy 3D Digital Twin in a mobile browser without lag. I utilized React.js for its component modularity, but the real breakthrough was my use of VS Code with AI-assisted workflows (Gemini 3.0 /Claude Opus 4.5). This allowed me to rapidly prototype complex Dijkstra or A star algorithms (for the routing logic) in days rather than weeks, proving that high fidelity 3D navigation could run smoothly on a patient's average smartphone.
Modeled an accurate 3D replica of a hospital floor via Figma, translating physical architectural constraints into a digital interactive map.
Developed a node based routing system in Blender and exported as .glb into a React.js. Rather than simple A to B lines, the logic accounts for user constraints dynamically re routing paths based on the user's mobility / profile position.
Leveraged AI assisted coding tools (Gemini 3.0, Claude Opus via VS Code) to rapidly prototype complex logic flows and accelerate the development of the React component architecture.
Standard maps fail vulnerable users by sending wheelchair users to stairs they can't climb. I engineered a 'Profile Based Routing' system that fundamentally changes the map's topology based on the user. For a wheelchair user, the shortest path isn't a straight line, it's the accessible line. By strictly prioritizing elevators and excluding escalators in the backend logic, the system respects the user's dignity and safety.
Standardized medical terminology for a diverse international audience. grouped synonymous terms (such as: A&E, ER, Emergency) under universal icons to reduce cognitive load for non-native English speakers.
Building for Scalability: Two Iterations
The final deliverable was a plug and play navigation module. By designing the architecture to be modular, I ensured that G Element could easily redeploy this same wayfinding engine for future clients (like malls or airports) simply by swapping the map SVG and nodes, without rewriting the core code. It wasn't just a one off app, it was a scalable product foundation
Final version of the web based App for Hospitals in Singapore, focused on immediate patient/visitor experience.
Overall I learned to bridge the gap between 3D modelling and web development logic, while making sure every logic scenario is patched and can work backwards, despite whatever stage the user is at their navigation.
Overall I learned to bridge the gap between 3D modelling and web development logic, while making sure every logic scenario is patched and can work backwards, despite whatever stage the user is at their navigation.
