In this page I will go through the Development of these micro-interactions
This is the first set of drafts of the Micro-interactions, These will not be designed but will focus solely on the interaction itself, it will be made through Lo-fi mockups
For the airline site I started by laying down the foundation of buttons and organised the layout, similar to the sketches I had done before
And after much time and trying to find the proper resources, I couldn’t find a plugin on Figma that would do what I want which was a moveable 3D Globe, so after some time I went for accessibility rather than aesthetics. I will however rectify this and aim to redesign the map to follow a style in the future, but for the time being, let’s make this plane and components move
Screen Recording 2026-02-17 at 15.13.02.mov
This is just a rough example of selecting the destination, It would have a drop down for the flying from and flying to, as for this example this airline only goes to a few select places. A line will draw from each point to show where the journey is.
Then after that you will press search for flights and it’ll give you 3 flights to choose from
Screen Recording 2026-02-17 at 15.26.40.mov
Apart from the boring design, I love how this flows but I think the main flaw is how hard it is to see the journey, so I have the idea of hovering over the text of each flight to be able to see better
Screen Recording 2026-02-17 at 15.33.22.mov
I think it works great, although It still is a little hard to see, But that can be fixed in due time of course with the design part. But I like this micro-interaction, I would’ve wanted it to have a plane draw from one place to the other but maybe that is something I can research when refining these!
Again, following my sketches I moved to create a rough draft of the sites layout and such
I then added a payment button at the button and created a rough animation of the transaction, this is done in a way where you have the option to cancel, incase you notice something wrong or change your mind, which would help the user.
I then prototyped it and then created a screen which would track the users order, giving them context to prepare for their order being ready