My next stage focuses on translating my visual designs into real-life scenarios, exploring how my medical service could exist beyond static interfaces. This involves testing ways to present my designs in context, particularly through the use of AR, allowing the service to feel interactive, immersive, and grounded within a future living environment.
At this stage, I want to take my project further by integrating my digital designs into real-world contexts. This is something I’ve always been interested in, and now I have the opportunity to properly explore it. While researching how to achieve this, I came across a useful tutorial showing how to combine Figma and After Effects to overlay UI designs onto real-time video. My goal is to try this approach to demonstrate how my medical service would function in a realistic environment, helping bring the concept to life and clearly communicating how it interacts with the user.
<aside> <img src="/icons/sunglasses_orange.svg" alt="/icons/sunglasses_orange.svg" width="40px" />
This approach allows me to bring my designs into a real-world context, clearly showcasing how the service would function and interact with users.
</aside>
<aside>
How to build an AR app prototype using Figma & After Effects
</aside>
I feel this approach could work well, and I plan to follow a similar process to create my own visual demonstration for the project. While static visuals are effective, showcasing the service within a real-time video adds much more depth and clarity, allowing the concept to be experienced rather than just viewed. This step is particularly important as it aligns closely with the aim of future living, helping to present the service in a realistic, immersive, and believable way.
Before getting started, I revisited the blueprint I had previously created, outlining the key features required for my medical service to function effectively. One of the main elements was the use of puck-like devices placed throughout the user’s home to monitor and track health data. I felt it would be beneficial to bring this concept into a more tangible form, so I decided to create a simple physical prop that could be used within my overlay video. I sourced a container with a similar shape and applied a basic colour treatment to ensure it aligned aesthetically with the overall design concept.
<aside> <img src="/icons/die2_orange.svg" alt="/icons/die2_orange.svg" width="40px" />
Before starting, I revisited my blueprint and created a simple physical prop of the puck device to support the visualisation of my concept in the overlay video.
</aside>
I feel the prop I created, while simple and slightly rough in places, works effectively and should integrate well when I begin filming my overlay video. I aimed to give it a futuristic feel, which is why I added blue outlines along with the brand logo on top to align with the overall visual style. In a more advanced concept, the device would appear high-tech and capable of projecting holograms, but for this project, the current version successfully communicates the idea and will serve its role during recording.
At this stage, I began putting together the video element of my project, experimenting with how to effectively combine my designs with physical props. I decided to start by filming the footage I would use as a base, which proved to be quite challenging, especially as I was working independently. Capturing natural movement while also positioning myself in a way that would clearly demonstrate how the service works required careful planning and multiple attempts, but it helped me better understand how to present my concept in a realistic and engaging way.
<aside> <img src="/icons/video-camera_orange.svg" alt="/icons/video-camera_orange.svg" width="40px" />
This stage involved beginning the video production process, combining physical filming with my digital designs to start visualising the service in a real-world context.
</aside>
As shown above, this is my first draft video, created to establish an initial understanding of how the service could function in a real-world context. At this stage, the focus was on testing the basic interaction flow, particularly the action of tapping a prop and using hand movement to engage with the displayed screen. While the footage is still rough and will be refined into a more stable and polished version later, it serves its purpose as a starting point. This draft will now act as a foundation for further development, where I can enhance and stabilise the visual presentation if I can find a solution for it.
As shown above, this was an initial trial exploring how I could use After Effects to overlay my digital screens onto real-life footage to demonstrate how my medical service would function. However, I found that this approach was quite challenging and less effective than anticipated, particularly in terms of accuracy and execution. As a result, I decided to reconsider my method. While researching alternative techniques, I came across an example of integrating digital interfaces with virtual hand gestures, which felt more intuitive and achievable. This approach may provide a more seamless and engaging way to visualise interaction within my service compared to relying solely on filmed footage.