UX/UI Interaction Highlights

UX/UI Interaction Highlights

Overview

The examples below highlight my work designing interactive elements that enhance mobile and web experiences.

MY ROLE

UX/UI Designer

DESIGNED FOR

UX/UI Immersive Programs

PRIMARY TOOL

Figma

© Mary Rose Design 2025

© Mary Rose Design 2025

© Mary Rose Design 2025

© Mary Rose Design 2025

Exhibit Interaction Highlights

NEXT

Portfolio / MOTION

Portfolio / MOTION

CHARACTER ANIMATIONS

CHARACTER
ANIMATIONS

To foster an emotional connection and enhance user engagement, I created Coco the Colon Cat, an animated interactive mascot on the UC and Wellness website. His subtle tail movements and slow blinks, along with his humor, compassion, and friendliness lighten and lift the user experience.

To foster an emotional connection and enhance user engagement, I created Coco the Colon Cat, an animated interactive mascot on the
UC and Wellness website.
His subtle tail movements and slow blinks, along with his humor, compassion, and friendliness lighten and lift the user experience.

PROTOTYPING

I use Figma to create wireframes and build interactive prototypes for my web projects. The mid-fidelity prototype shown below demonstrates key user flows designed to meet the needs and goals of the Aloha app's target persona.

I use Figma to create wireframes and build interactive prototypes for my web projects. The
mid-fidelity prototype shown below demonstrates key user flows designed to meet the needs and goals of the Aloha app's target persona.

WEBSITE INTERACTIONS

WEBSITE
INTERACTIONS

I added subtle animation to the Seapearl Properties website to enhance the user experience. For example, the menu’s “wave movement” is quick, but calming, just like the sea, and supports the brand.