For the next stage of this project, I am focusing on brainstorming and developing initial concepts for my microinteractions. This involves exploring different interaction scenarios and identifying ideas that are purposeful, user-focused, and suitable for development into functional, interactive prototypes.
Within my designs, I aim to create microinteractions that feel considered, distinctive, and purposeful, rather than relying on common or generic interaction patterns. When reading the brief, many ideas came to mind, and it quickly became clear that I wanted to explore microinteractions through my own design style, offering a slightly different perspective on how they can be used within digital systems.
<aside> <img src="/icons/map-pin_orange.svg" alt="/icons/map-pin_orange.svg" width="40px" />
I want my microinteractions to feel unique and purposeful, fitting naturally within the system rather than relying on generic patterns.
</aside>
My goal is not just to meet the brief, but to challenge myself by designing three varied microinteractions across different contexts that I feel confident in, including: one integrated into an existing app, one within a system that has not yet been fully explored, and one based on a personal interest. This approach will allow me to experiment across multiple scenarios, helping me expand my technical skills, creative thinking, and understanding of interaction design while learning through the process.
I decided to begin brainstorming ideas for my microinteractions by exploring how they could provide clear solutions and meaningful outcomes within different design systems. I used mind mapping as my main approach, as it allows me to visually organise my thoughts, identify which ideas stand out most, and see how certain concepts could be linked together to form stronger, more developed interaction ideas.
<aside> <img src="/icons/drafts_orange.svg" alt="/icons/drafts_orange.svg" width="40px" />
I used mind mapping to quickly explore and refine microinteraction ideas, resulting in clear, meaningful outcomes.
</aside>
With some initial ideas noted down, I found that certain concepts stood out more strongly, particularly transitions, notifications, and morphing shapes. These areas feel both engaging and relevant, and I can see clear potential in developing a microinteraction for each. Moving forward, I aim to explore these directions in more detail, refining how they can function and enhance the overall user experience.
For my first idea within morphing shapes, I decided to explore recreating the Dynamic Island seen on newer Apple iPhones. I was particularly drawn to its simplicity and how it smoothly transforms into different shapes depending on interaction and context. This makes it a strong reference point for understanding how form and function can work together within a microinteraction. As a result, I chose this as my first concept to develop, focusing on how to design and implement a similar morphing interaction in my own project.
<aside> <img src="/icons/palm-tree_orange.svg" alt="/icons/palm-tree_orange.svg" width="40px" />
I chose to explore a Dynamic Island–inspired morphing shape interaction, focusing on its simplicity and ability to transform seamlessly.
</aside>
I sketched out a range of initial ideas to explore how the Dynamic Island could transition and morph between states. While the concept is relatively simple in form, I recognise that refining the motion and interaction will require careful development. I also began to define the context of the interaction, choosing to focus on fitness, as it aligns well with the island’s purpose of delivering quick, real-time updates clearly and engagingly.
For my second idea, I explored notifications by designing a shopping-based app that incorporates a microinteraction when users add items to their basket. The focus is on visually confirming the action through a subtle animation, giving users clear feedback without disrupting their experience. While the concept is simple, I aim to make the interaction feel discreet and modern, ensuring it aligns with current design standards while still enhancing usability and engagement.
<aside> <img src="/icons/shopping-basket_orange.svg" alt="/icons/shopping-basket_orange.svg" width="40px" />
I explored a shopping app concept, focusing on a subtle, modern add-to-basket animation that clearly confirms user actions.
</aside>