PROJECT SCREENSInside the design
Auto-scrolling — hover any screen to pause
UI/UX design for VOIZZIT CHAT — a real-time chat and messaging product delivered for both web and mobile with consistent patterns and feature parity.
Voizzit Chat had to deliver a fast, clean, and intuitive messaging experience with a consistent interaction model across web and mobile — handling real-time states and dense conversation content without clutter.
Conversations are dense: threads, notifications, presence, delivery states, attachments. The challenge was surfacing all of it while keeping the interface calm — and keeping web and mobile in lockstep as features shipped.
As Senior UI/UX Designer at Voizzit I designed the product end-to-end: requirement analysis, conversation and notification flows, wireframes, high-fidelity UI, interactive prototype, then developer handoff and design QA.
One library spanning web and mobile — feature parity without designing everything twice.
Real-time states — typing, sent, delivered, read — visible at a glance without noise.
Contrast-checked colors and comfortable touch targets across every density.
Desktop multi-pane gracefully collapses to a single-column mobile experience.
I audited real conversations — dense group threads, media-heavy chats, rapid-fire exchanges — and mapped which signals users actually check: who's online, what's unread, did it deliver. Benchmarking leading messengers showed that clarity of state, not feature count, decides whether a chat app feels fast.
Typing, sent, delivered, read — users glance at these dozens of times a day. They must be legible at a glance, invisible on reflection.
Real conversations are messy. The design must organise density rather than pretend it away.
Users switch between desktop and phone mid-conversation; any mismatch in behaviour reads as a bug.
Lives in the desktop app across dozens of conversations. Needs a multi-pane layout, keyboard-friendly flows and notifications that inform without interrupting.
Checks in from a phone between meetings. Needs the same conversations, one-thumb reachability and zero relearning from the desktop experience.
A calm, neutral surface lets message bubbles carry the colour. Hierarchy comes from spacing and weight rather than lines and boxes; real-time states use small, consistent glyphs; and the shared component library keeps web and mobile pixel-comparable so switching devices feels seamless.
Click-through prototypes were walked through common scenarios — join a group, find a shared file, reply from a notification — and each rough edge fed the next iteration. Special attention went to the collapse from desktop multi-pane to mobile single-column, tested until nothing felt lost in the transition.
Auto-scrolling — hover any screen to pause
Shipped for web and mobile with a shared design system, clear real-time feedback, and a distraction-free reading experience. Explore the full visual case study on Behance.
View full project on Behance