What's included

• Phone-number onboarding. Welcome, phone number entry and a verification code screen with a fallback for when the code doesn't arrive.
• Chats list and new chat. The conversation list with an Ask AI or Search bar and Unread, Favorites and Groups filters, plus a picker with New group, New contact and Message yourself.
• A group conversation. Sent and received bubbles, a date separator, system lines for a pinned and a deleted message, and the input bar.
• Attachment menu and message actions. An attachment sheet for photos, camera, location, contact, document, poll and audio, and a long-press sheet with reply, forward, copy, star and delete.
• Contact info and blocking. Shared media, links and docs, disappearing messages, groups in common, and a block and report confirmation.
• Updates, communities and calls. Status and channel discovery, a communities screen, a calls list with missed calls, and settings.

Why wireframe a chat app before designing it?

• Get the thread right first. People spend most of their time in the conversation, so the wireframe puts bubbles, system messages and the input bar in their real proportions.
• Plan every message state. A message can be sending, sent, delivered, read, edited or deleted. WhatsApp leaves a 'You deleted this message' line in the thread, and each state needs a place on the screen.
• Keep message actions short. The long-press sheet holds five actions, few enough to scan without scrolling.
• Put safety in the main flow. Blocking and reporting sit in contact info, one tap from the conversation, and the thread opens with an encryption notice. Any app that lets strangers message each other needs both.
• Treat groups and channels as different products. A group thread, a channel directory and a communities screen show how chat grows into broadcast.

How to use this template

1. Duplicate the template. Copy the 15 WhatsApp screens into your Whimsical workspace.
2. Choose your identity model. Keep phone number sign-up, or swap in email, usernames or workspace accounts.
3. Define what people can send. List your message types, like text, photos, voice notes, files or polls, and cut the attachment menu down to those.
4. Mark message states. Annotate sending, failed, delivered and read on the conversation screen, and decide what an edited or deleted message looks like.
5. Add the empty and error screens. Sketch an empty chats list, a failed send with a retry button and an offline banner.

Group chat vs channel