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 do you explain a highly technical research project in a way that people can follow without making it feel dry or overly academic?
A lot of websites for similar EU-funded initiatives still feel stuck in the same pattern. The visuals are dated, the structure is rigid, and the language leans heavily academic. The information might be there, but it takes effort to get through it, and important updates often end up buried in dense content. They are functional, but not especially clear or engaging.
That problem was even more obvious with AMID. The project deals with radiotherapy planning and medical image processing, which are not easy topics to communicate through text alone. Explaining what the project is all about meant translating abstract and technical ideas into something people could understand more intuitively.
The aim was not only to make the website easier to use, but also to set AMID apart from similar projects. It needed to feel more current, more intuitive, and more visually distinct, while using interactive elements in a way that supported understanding rather than just decorating the interface.
Custom "Aurora" radiation gradient shader
Context & Position
The project was developed in a professional setting as part of a small design team, working alongside developers and project managers.
On the client side, we worked closely with the project lead and brand owner to shape the structure, content, and visual direction. There was already a basic visual foundation in place, but it had not really been defined for digital use, so part of the job was extending and refining it in a way that made the site clearer and easier to understand.
My role combined UI/UX design with the implementation of interactive 3D elements using three.js. I designed parts of the interface, sourced and adapted 3D models, developed custom shaders, and worked out behaviours like scroll-based motion and mouse interaction. A big part of that process was making sure everything still performed well across desktop and mobile.
The 3D elements were not there just to make the website feel more dynamic. They were part of how the project was communicated, helping translate complex ideas into something more intuitive and easier to grasp.
Isolated 3D Lung Element
Design Thinking & Decisions
The main design goal 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.
The 3D elements were introduced at specific moments where they could do some real work. In the hero section, an abstract aurora-like gradient suggests radiation without trying to describe it literally. It gives the page an immediate visual cue before the user has to process any technical language. As the page scrolls, that effect softens and fades so the attention can shift naturally toward the content.
Further down, a particle-based 3D lung model brings in something more concrete. The highlighted points hint at areas of interest and loosely reflect the way researchers read and work with medical scans. Giving users the ability to rotate the model made the interaction feel simple but meaningful. It created a direct link between the interface and the research process without overexplaining it.
Other elements, like the rotating orb in the knowledge base card, were used more selectively to guide attention and support the overall visual theme.
I was careful not to overuse three.js elements. The point was not to make every section animated or interactive. It worked better when it appeared in specific places, creating contrast with the more static parts of the site. That way, the interactive elements added clarity and atmosphere without competing with the content.
Orb Model
Scroll Interaction
Iteration & System Expansion
The biggest iteration happened around the 3D lung model. Early versions were more abstract, but client feedback made it clear that the abstraction was getting in the way. It looked interesting, but it was not helping people understand the idea quickly enough. Shifting to a recognisable lung structure gave the model immediate context and made the connection to the medical subject much stronger.
Technical limits shaped the final implementation quite a bit. The model had to be optimised by reducing the polygon count, and I added adjustable parameters so visual quality and performance could be balanced more easily during testing. That made it possible to refine the experience across devices without losing the smoothness of the interaction.
The whole process stayed closely tied to client feedback. Once the art direction was locked in, 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 more modern and structured digital presence for a field that usually feels rigid and difficult to approach. The site introduced a clearer information hierarchy and a more accessible visual language, which made it easier to understand the project quickly while also helping it stand apart from similar research websites.
One of the strongest parts of the final result was the use of interactive 3D elements. They helped communicate abstract ideas with much less reliance on text, and made the subject feel more intuitive and engaging.
If I were revisiting the project, I would spend more time on performance and optimisation around the 3D implementation. There is still room to refine the parameters, and probably to explore other technical approaches that could make the experience more efficient without losing the visual quality.
The project strengthened my ability to translate abstract ideas into clear visual systems, while also expanding my experience in developing interactive 3D elements for the web and working with emerging technologies.