For this project the deliverable is an immersive prototype, this means that providing screen designs with micro and macro interactions is not enough and we need to connect the screens so it appears exactly how a user would see it if we went on and developed this into a working narrative website or application. This means I need to consider how my user would navigate the narrative and the pacing of the interactions and transitions.
As I had already created my high-fidelity screen mock-ups I was able to go straight into Figma’s prototyping mode and begin the process of adding transitions, macro-interactions, micro-interactions, and animations as well as creating the interactivity I have planned for my timelines and Saturn V infographic.
Firstly, I wanted to connect all my screens in order and select the transitions between them. I have always considered this as a design for a single-page website that a user scrolls down to access more information with animations and transitions triggered by the scrolling itself, as I mentioned before I found out that Figma does not offer scrolling as a trigger for any transition or animation, therefore I had to think of a workaround.
The workaround I chose was to use an alternative way that you can scroll on a webpage, using the arrow keys as my trigger so as a user taps the down arrow key to scroll down the page this would trigger the required transition and appear as if it was a scrolling trigger. On the up arrow, the transition would be reversed to achieve the same effect moving up or down the page.
To make this effect appear real I needed to select the best animation style which looked like scrolling, for this, I found that slide in from either below or above worked best, especially if I set the animation to work linearly. I did try having an ease-in and ease-out setting however this created a bouncing effect when the content came to rest that didn’t look right and would have affected a user’s experience. I also had to experiment with the timing of the animation and I found that 750ms which equates to three-quarters of a second looked correct and gave the feel I was looking for.
To create my interactive timelines and Saturn V infographic, I created the frames with the content that I wanted to be shown to users and added an open overlay option when a user hovered over the trigger point, which was the image or image title on the timelines or the correct stage of the rocket on the Saturn V. You can see how this was created below along with the settings I used.
I used the manual option so I could place the overlay where I wanted onscreen.
To make it easier for my users to enjoy them I also made it possible to make my launch and working on the moon videos as well as the journey to the moon and the distance covered comparison infographic able to be viewed in full-screen simply by clicking on them.
