UX Motion / Interaction Design
EcoBrew Case Study
Using motion and micro-interactions to design a responsive onboarding flow for an organic coffee community, resulting in a dynamic and highly engaging user experience.
UX & UI Design • Visual Design • Interaction Design
Project Overview
Client: Cuppa (passion project).
Industry: B2C marketplace and social app.
My Role: User Research, Visual Design, UI Design, and Interaction Design.
Interactive Prototype: https://shorturl.at/qczsX
Introduction
EcoBrew is a passion project that blends my love for coffee and user experience. The mobile app connects coffee lovers with organic, fair trade beans sourced directly from small farms around the world.
This case study explores the design of an interactive onboarding flow that feels alive, responsive, and purposeful. Using micro-interactions, smooth transitions, and short-form animations, the onboarding flow guides users, provides feedback, and brings clarity to every interaction.
The Challenge
Onboarding is often the first real interaction users have with an app, and they play a key role in shaping engagement and retention. The challenge was to design a clear, welcoming experience that introduces Cuppa, helps users get started, and supports understanding through intuitive, purposeful interactions.
The Solution
I used motion and micro-interactions to guide users, make the app easier to understand, and create a more engaging experience. Motion helped bring clarity to each step while adding personality and setting the tone for long-term use.
Visual Design
These fundamental elements make up the visual design language and design system.
Colours
Primary, secondary and neutral colours.
Typography
The perfect fours type scale to create clear hierarchy and harmony between text sizes.
Spacing
The 8-pt spacing, using multiples of 8 to organise information.
Grid System
The 8-pt soft grid, using multiples of 8.
Number of columns: 4 | Column width: 64px | Gutter width: 16px | Margin width: 24px
Buttons & Inputs
Core interactive elements to allow customers complete tasks.
UX Motion Principles
Every animation and interaction was designed with intention, improving usability, supporting the user journey, and making the interface feel alive and responsive.
Usability Principles
To keep motion purposeful and consistent, the motion language was built on four core principles widely recognised and adopted in the UX and motion design community: expectation, continuity, narrative, and relationship.
Shared Axis
Elements move smoothly along a common axis (X, Y, or Z) to connect related UI screens or components. In the onboarding flow, this helps users move forward and backward by dragging left or right, showing the screens are connected and part of the same journey.
Fade Through
Elements gently fade out and in while moving slightly to create smooth transitions. In this project, I used fade through animations when navigating between screens, especially for text, to guide users through the story step-by-step.
Container Transform
Containers smoothly change size, shape, and position to show hierarchy and connection. For this case, the card expands into the sign-up screen, creating a smooth transition that keeps users focused and keeps a continuity between screens.
Scale
The buttons gently scale up or down when tapped to respond to user interaction, provide clear feedback, and make the experience feel natural.
Motion Patterns
Using familiar motion patterns helps users understand interactions and navigate with confidence. I followed best practices and Google’s Material Design guidelines to create a smooth, intuitive experience.
Learnings & Results
The result is an experience that’s both intuitive and emotionally engaging.
This project helped me better understand how design and motion work together to support usability. It taught me to pay attention to the small details, use motion with purpose, and focus on clarity, flow, and emotion to create stronger connections between people and products.
