By Mauricio Bucardo, August 21st

I’m a user experience designer at YML and am passionate about motion graphics and photography. I love to prototype, build and bring emotion and delight to digital experiences. I had the pleasure of collaborating with the Cafe X team to animate, prototype and deliver their in-app animations.

Cafe X is a barista robot with an automated system that looks to ensure accuracy, efficiency and eliminate all human error while keeping the quality craft of your beverages.

Around a year ago, YML collaborated with their team to create a set of animated illustrations within the Cafe X App:

The goal was to echo a sense of humanity, cheerfulness, and humor throughout crucial and memorable moments of the App.

After exploring different styles, we landed on a set of cheerful illustrations with bright colors, along with bouncy and lively animation to contrast the minimal and industrial feel of the App.

Enabling Location

Most Apps forget what a nuisance it is to be bombarded with permission requests without context. This was the first crucial moment of the experience since it’s critical for the system to know the nearest kiosk available.

Having a looping animation here alongside the conversational text was designed to help and educate the user, and encouragethem to enable it.

Order Customization

Order customization is an emotional moment in the experience. The user gets to be creative and make their beverage perfect. So this is where — in my opinion — the most humorous animations occurs.

We decided to have a cow mascot that would react to the user milk type selection. We wanted to make this character feel alive, emotional and responsive to the user’s input, so even when he was not selected, he would hide and take a peek behind the milk carton.

The Shopping Cart

Another key moment in the App was access to the cart.

We all know that abandoned carts are common in e-commerce experiences. So having an animated icon in sync with the card modal was used to bring attention and emphasis to complete this user flow.

Waiting for Your Order

Finally, the last key moment of the experience was the waiting time between an order being placed and being completed. The possible lack of physical presence of the user could create anxiety due to the uncertainty of their order status.

So we created three animations for each of the steps: Order queuednow making and now ready. Each one transitioning to the next one as the order progresses in real-time.

Final Thoughts

Thoughtful micro-interactions and animations are an indication of awareness for your user’s emotions. That’s why they’ve seen a peak in the design community in recent years. At YML, we believe discreet, yet delightful, design moments like these drive positive feelings about a brand, and often influence user’s actions.

We continue to partner with the Cafe X team and are eager to continue helping them evolve in a dynamic brand.