For the next stage of this project, I will focus on developing my microinteraction ideas further through digital design. This involves translating my initial concepts, sketches, and storyboards into low-fidelity and then high-fidelity prototypes, intending to create functional, interactive experiences that effectively engage users and bring each concept to life.
With my sketches and storyboards completed for each microinteraction, I moved on to developing them further by creating low-fidelity mock-ups in Figma. This allowed me to explore how each concept would look within a digital interface, while also beginning to define the functionality and interaction flow of each microinteraction in a more structured and tangible way.
<aside> <img src="/icons/camera_orange.svg" alt="/icons/camera_orange.svg" width="40px" />
I developed my sketches and storyboards into low-fidelity mock-ups in Figma to better understand the layout and functionality of each microinteraction.
</aside>
To begin the development phase, I broke down each of my microinteraction concepts, Dynamic Island, clothing shop cart animation, and ice cream transition, into low-fidelity designs. I focused on establishing the core structure and necessary elements for each interaction in its simplest state before adding further detail. This helped me understand how each system functions at a basic level and provided a clear foundation to build upon in later, more refined stages of development.
My Dynamic Island design developed into a relatively simple structure, which aligns with its minimal and compact nature. I began by establishing the core elements, including a fitness ring to represent activity progress in its default state. As the interaction expanded, I introduced key information layers such as text bars for stats, along with placeholder boxes to represent charts, timings, and additional fitness data. This approach helped define how the interface transitions from a minimal idle state into a more detailed information view while maintaining clarity and hierarchy.
For my clothing app microinteraction, I broke down the experience into a series of key screens to represent the full add-to-basket animation flow. This included a home screen where users can browse and select items, followed by two additional screens that demonstrate the transition and confirmation of adding an item to the basket. I focused on laying out the basic structure of each screen, positioning text and buttons to establish a clear hierarchy and functionality, which will later support the development of a more refined and animated interaction.
For my final ice cream transition interaction, I planned out the main screen that would be consistent throughout the animation, featuring four different flavour options. I included numbered sections to help structure the layout, along with basic shapes to indicate where labels and interactive tags would be placed. I also added button elements to represent how users would transition between states, including one fully developed section to demonstrate how a flavour selection would expand into a detailed view within the interaction.
With my low-fidelity designs for each microinteraction completed, I feel confident moving forward into the next stage of development. These initial layouts have helped establish the core structure and functionality of each concept, providing a clear foundation to build upon. The next step will focus on refining these designs digitally, adding detail, and developing them into more interactive and realistic prototypes that bring each microinteraction to life.
With my low-fidelity designs completed, I moved on to developing each microinteraction in greater detail. This stage focused on refining the visuals and adding relevant design elements to help bring each concept to life. I broke down each animation step-by-step, carefully defining how the interaction evolves across different states, ensuring clarity in both structure and user flow as the designs progress towards higher fidelity.
<aside> <img src="/icons/arrow-up_orange.svg" alt="/icons/arrow-up_orange.svg" width="40px" />
I developed my low-fidelity designs further by adding detailed visuals and breaking each microinteraction into clear, step-by-step animation stages.
</aside>