Chat list shows who, the last message, ticks and unread count
Component 01
Work / Case study 05 / Web app
Voizzit Chat
A web app for chatting, sharing and calling, designed in Figma: one-to-one and group chats, a social feed, video calls and profiles, built on one shared component library.
What I did
User flowsWireframesUI design
Design systemDeveloper handoff
Chats, groups, calls and a feed, without the noise
Voizzit Chat is the messaging product from Voizzit in Dubai. On the web it brings together private and group chats, shared media, a social feed with stories and posts, and voice and video calls.
I designed the web app end to end: the flows for chats, groups and calls, the screens, and the component library the developers built from.
- Company
- Voizzit, Dubai
- Type
- Real-time chat web app
- Deliverables
- 38 desktop screens, flows, component library
- System
- 40+ components, Plus Jakarta Sans type scale, light and dark colours, 24px icon set
- Tools
- Figma
Context
Five products in one window
The app had to hold a lot: chats, groups, a feed, calls and notifications. Each one could easily have grown its own layout and its own rules, and the product would have felt like five apps glued together.
Goal
One calm layout, every feature inside it
The goal was a single layout that every feature fits into: a slim navigation rail on the left, the list in the middle, the conversation or feed in the main area, and details in a side panel only when you ask for them.
The interface stays light and neutral so messages, photos and faces carry the colour. Green is the only accent, so it always means sent, online or the next step.
Challenges
Dense conversations, clear states
Real chats are busy: unread counts, ticks for sent and read, voice notes, files, replies and group senders. Each of these needed a small, consistent signal that is easy to spot and easy to ignore.
Tasks like starting a new chat, adding members or choosing who sees a post open in a side panel or a focused dialog, so you never lose the conversation you were in.
Information architecture
Seven areas, one navigation rail
Everything hangs off the slim rail on the left. Chats are the centre of the app; groups, the feed, calls, profiles and notifications sit one click away and open in the same three-column layout.
VVoizzit Chat
StartWelcome2 screens
- Voizzit Web welcome
- Start a chat
MainChats6 screens
- All · Personal · Groups
- Conversation
- Message actions
- Photo with caption
- Voice notes · files
- Contact info
RailGroups5 screens
- New group
- Add members
- Group info
- Media · links · docs
- Mutual groups
RailFeed5 screens
- Stories
- Posts
- Comments · likes
- Create post
- Choose audience
RailCalls4 screens
- Voice call
- Video call
- Group video grid
- Call controls
RailProfile4 screens
- View profile
- Followers · following
- Highlights
- Posts grid
RailNotifications3 screens
- Today · yesterday
- Likes · follows
- Follow back
Process
Flows first, then the system
- 01Analysed the requirements for chat, groups, feed and calls
- 02Mapped the conversation, group and notification flows
- 03Wireframed the three-column layout
- 04Built the foundations: colours, Plus Jakarta Sans type scale, spacing, icons
- 05Designed the components and the 38 screens
- 06Handed off to developers and reviewed the build
"Conversation without clutter."
Design direction
Four rules for the whole app
ONE LAYOUT
Rail, list, main, details
Chats, groups, the feed and notifications all use the same three columns, so moving between them never feels like a new app.
QUIET SURFACES
Content carries the colour
Soft greys and white keep the frame calm. Photos, faces and the mint "sent" bubbles stand out on their own.
SMALL, CONSISTENT STATES
Ticks, dots and counts
Online dots, read ticks and unread badges look the same everywhere, so people read them at a glance.
FOCUSED TASKS
Panels and dialogs, not new pages
Contact info, shared media, new chats and post settings open beside or over the chat, so you can get back with one click.
Design system
Built once, reused everywhere
The Figma file has separate pages for icons, foundations, components and screens. Foundations cover light and dark colours, a Plus Jakarta Sans type scale, spacing and radius. More than 40 components, from chat rows and message bubbles to call controls, have their states built in.
Type Plus Jakarta Sans, one family for every size
Component 02
Colour neutral surfaces, one green, mint for sent
Component 03
Files show type, size and pages before you open them
Component 04
Messages text, photos and voice notes share one bubble
Component 05
Calls one tile per person, controls in a single bar
Component 06
Stories a green ring until you've seen them
Component 07
Chat actions in one short menu, the risky one in red
Component 08
Where it stands
38 screens, one system
The web app covers the full product: welcome, chats and groups, message actions, shared media, links and docs, new chats and groups, the feed with stories, posts, comments and likes, post creation, video calls, profiles and notifications.
Every screen is built from the same components, so the developers had one set of parts to build and new features slot into the existing layout.
What I took away
- 01In messaging, small states like ticks and unread counts matter more than big features.
- 02One layout for every feature makes a large product feel simple.
- 03Opening tasks in panels keeps people inside the conversation.
Keep exploring
Next: ILLAM
Previous: Voizzit Website