AMID
UX/UI Design & three.js Development
When complex ideas
need more than just text.
Year:
2025
Type:
Professional
Focus:
Design & Development
Collaboration:
Specto Design & Dev Team
Lung Model Appear Animation
Hero “Aurora” three.js Element
The Challenge
How can a highly technical research project be communicated in a way that is both accessible and visually engaging?
Websites for similar EU-backed research projects often rely on outdated visuals, rigid structures, and heavily academic language. Information is difficult to navigate and key project updates are often buried within dense content. While functional, these websites rarely support clear understanding or engagement.
AMID website presented an additional layer of complexity. The project focuses on radiotherapy planning and medical image processing, both topics that are harder to grasp through text alone. Communicating its purpose required translating abstract and technical concepts into a more intuitive form.
The goal was not only to improve usability, but to differentiate AMID from comparable projects. The challenge was to design a website that feels modern, intuitive, and visually distinct, while introducing interactive elements that help with understanding.
Custom "Aurora" radiation gradient shader
Context & Position
The project was developed in a professional setting as part of a small design team, in collaboration with developers and project managers.
On the client side, we worked closely with a project lead and a brand owner to align the structure, content, and visual direction. While a basic visual foundation existed, it was not fully defined for digital use, so the direction was expanded and refined throughout the design process to better support clarity and communication.
My role combined UI/UX design with the implementation of interactive 3D elements using three.js. I sourced and adapted 3D models, developed custom shaders, and defined interaction behaviours such as scroll-based motion and mouse interaction, while ensuring performance across desktop and mobile devices. The 3D elements were introduced as part of the communication strategy, aiming to help with the understanding of complex concepts rather than act as purely decorative features.
Isolated 3D Lung Element
Design Thinking & Decisions
The primary focus of the design was to structure complex information clearly while using interactive 3D elements to support understanding. Rather than relying on text-heavy explanations, the interface combines a minimal content structure with visuals that help communicate abstract ideas more intuitively.
Interactive 3D elements were introduced at key moments to draw visitors attention. In the hero section, a gradient-based aurora effect represents radiation in an abstract form, providing an immediate visual cue without relying on technical language. As the user scrolls, the effect gradually fades, allowing attention to shift toward the content.
Below the hero, an interactive 3D lung model constructed from particles introduces a more concrete reference. Highlighted points indicate areas of interest. The ability to rotate the model allows users to engage with the element, creating a subtle connection the professional research process. Additional elements, such as a rotating orb within the knowledge base card, are used selectively to draw attention and visual cues.
The use of three.js was intentionally limited to moments where it adds clarity or engagement. Rather than applying it across the entire interface, the goal was to create contrast between interactive and static sections, ensuring that visual elements support the content rather than compete with it.
Orb Model
Scroll Interaction
Iteration & System Expansion
The most significant iteration involved the 3D lung model. Early versions explored more abstract forms, but feedback by the client revealed that the level of abstraction was too high. The design shifted to a recognisable lung model, providing immediate context and strengthening the connection to the medical domain.
Technical constraints played a key role in shaping the final implementation. The lung model was optimised by reducing polygon count, and adjustable parameters were introduced to balance visual quality and performance. This allowed for efficient testing and refinement across devices while maintaining a smooth interactive experience.
The process was closely tied to clients feedback. Once the art direction was confirmed, the structure and visual system were applied consistently across the site, followed by developer handoff.
Adjustable Parameters
Parameters influencing the 3D object
Outcome & Reflection
The project resulted in a modern and visually distinct platform that communicates a complex research topic more clearly. The combination of structured content and interactive elements allows users to understand the project with less reliance on dense text, while also creating a more engaging experience.
The integration of three.js proved especially effective in bridging the gap between abstract concepts and user understanding. Interactive elements provide visual context and encourage exploration, helping users form a more intuitive sense of the subject matter.
If revisited, further improvements would focus on performance optimisation and exploring alternative technologies to refine the 3D implementation. The project strengthened my ability to combine design and development, using interactive systems not just for visual impact, but as tools for communication.