A fluent motion experience

How I pushed a design-led nonprofit project to launch

Project timeline

Goal

May 24 - continuing

Improve experience through motion

Project owner

UX design

UI designer

Frontend Engineer

Other Contributor

My role

How this project started?

It began with a conversation with the Design Director, who asked about potential improvements in our product line. I mentioned that the animations were lagging, and he agreed, allowing me to explore this area and initiate the project.

The status quo

Home page to List

Check Out to Order

Challenges

Glitching, errors and bugs

Let’s push our engineers to fix that

Next step: getting ideas for improvement

Experiences that we can improve

· Home Page Loading not smooth, causing stutter.

· Entering the list page causes flickering.

· Modules load inconsistently, causing instability.

· Laggy list view transitions.

· Reservation triggers two load events.

· An unnecessary white screen loads after payment.

· Transitions are abrupt, lacking fluidity.

· Instant page cuts lack dynamic growing motion.

· Excessive loading disrupts user flow.

· Modules need better feedback and guidance.

· Emotional design tailored to specific scenarios

Comparative analysis and brainstorming

We researched leading apps and motion design in general to inspire creative ideas.

Non-intrusive loading

List to order transition

Open trunk transition

List page grow animation

Curve guidelines

Homepage guidance

Pressed state

Our ideas

Transition; Natural loading; Motion as feedback;

Sorting our ideas

Categorizing our solutions into three areas and setting goals for each design approach.

Page transition

List to order transition

Open trunk transition

Page motion

Reveal

Load

Curve

List page reveal animation

Curve guidelines

Non-intrusive loading

Module motion

Pressed state

Homepage guidance

Enhance immersion

Smoother

More intuitive

Reduce anxiety

Improve feedback

Set priorities

We prioritize our solution based on: how bad the current experience is and how noticeable our solution will be.

Experiences that we can improve

Pushing UX-focused projects with no direct business profit is tough. Without development resources, I had to secure support from PMs.

Present, present, present!

Convey our concepts and foremost objectives to the Design Director and Product Director to gain their endorsement and partnership. With a bit of luck, we managed to align with Product Director's goal of delivering fast and smooth user experiences, and they are ready to integrate our solutions into the upcoming launch.

Separate the project, ship them one by one

Track each piece with a table

Glitching, errors and bugs

Experiences that we can improve

Final delivery

List page grow motion

This goal is to improve intuitiveness by loading the page step-by-step, helping users understand its structure and refocusing their attention on marketing slots.