Innovative UI Design: Introducing Sentry, The Interactive Mascot

Innovative UI Design: Introducing Sentry, The Interactive MascotInnovative UI Design: Introducing Sentry, The Interactive Mascot

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Muhammad Haseeb

• 6h

Meet The Sentry: a little security guard who lives inside your login screen. Instead of a standard progress bar, he acts as the UI's emotional feedback layer, reacting in real time to your password strength.

As you type, his posture tells you everything you need to know. A weak password literally puts him to sleep, while a medium one makes him snap to attention. Nail a strong password, and he stands proud with his arms crossed. When you finally hit login, he either gives you a crisp salute on a success, or goes into full panic mode on a failure. Mess up too many times? He completely locks you out with a firm "nuh-uh" attitude.

I designed the character from scratch in Adobe Illustrator, brought the layered SVG into Rive, and rigged him up using 4 bones and 7 distinct animations. The logic is all tied together with a state machine that listens to three specific inputs: a strength number, a success boolean, and a login trigger.

To ground the whole piece, I built out a sleek mobile UI mockup directly on the artboard—complete with a phone frame, text fields, and a login button. It places him right where he belongs: inside a living, breathing product, rather than just floating in an empty void. X Post : https://x.com/Haseeb47176936/status/2069391146011480149?s=20

characterchallenge riveapp Rive Art Direction Animation Adobe Illustrator Rive Animation

Filip Panov

max

• Jun 16

The concept that didnt make it through the selection process but majority of the brand language, imagery and the visual identity system were adopted and harmonized with the selected one to create one unity and expand the entire design system.

The logo features a modern, intelligent logomark built around a three-phased star symbolizing curiosity, signal throught the noise, and transformation. Constructed from sharp vertical lines with varying stroke weights, it creates a subtle optical illusion that reflects the brand’s core idea of clarity emerging from complexity. The three phases are conceptually tied to the brand name - Ctrl, Shift, and the final outcome: taste. This is paired with a confident, taste-led wordmark blending script and serif typography to spark intrigue and character.

The overall identity is editorial, bold, and creative-first slightly irreverent yet refined. It is opinionated rather than instructional, community-driven and culture-forward, designed to feel like a living platform rather than a one-off campaign.

The visual system combines pitch-black foundations with shades of grey, accented by subtle color tints, glowy gradients, grainy 3D elements, visual distortions, and futuristic AI-generated imagery, creating a rich, expressive language for rooms filled with artists, technologists, and builders. You can see full project here You can see the final selected direction. Thanks for the feedback in advance, much appreciate your support.

creativeintelligence Brand Design Adobe Illustrator