Introducing WhatsApp X
The success of my project “The New WhatsApp” about its rebranding in 2015.
Today I'm sharing with you a refresh of a my past project “The New WhatsApp” created in 2015 rather as a provocation, published on Behance and which has been very successful, with +300.000 views on Behance, Medium, Dribbble and other social for creatives and so many great comments that still reach me today. Thank you all, it's an honor for me but I don't think WhatsApp should replace its iconic logo. Let me to clarify my real opinion about actual logo: I am aware of how much the current WhatsApp logo is a symbolic conquest, iconic logos are difficult to replace and a phone handset in an app icon like that (The sense of primary-default service) deserves a place of honor in the home of every mobile phone.
As Digital Product Designer I know how digital products must grow over time, and I took advantage of the italian Quarantine for COVID19 to redesign in a Sketch format (Figma version will be available soon) this past project, I designed totally in Illustrator (...), and to introduce new features which could be new “doors” for users but also new business opportunities.
Recreating almost all the current components, faithfully or even quite differently, and adding new features, I followed the main keyword CONVERSATIONS, let me show the project designed for iOS:
Recreating almost all the current components, faithfully or even quite differently, and adding new features, I followed the main keyword CONVERSATIONS, let me show the project designed for iOS:
User awareness of new features.
In just 1 week I recreated almost all the WhatsApp views in Sketch format, without changing the product too much. I only made improvements in the UI design, new UX design and added new features. As a first change, the introduction of the Update Area, a page dedicated to new features, so users are aware of the use of the product. This page appears only after updates to quickly show all new features and also to support users to better navigate the communication service. Users can decide whether to disable/enable this option on the Settings page.
WhatsApp X will also show important news, cool illustrations or suggestions on this page.
WhatsApp X will also show important news, cool illustrations or suggestions on this page.
Share your days. Improvings for Status.
Daily stories in a container called Status. Update your status and look at those of your contacts. Here some changes have been made in the interface. Reposition of stories and new content to be published.
Imagine sharing your daily contents in Status as stories. You can publish what you want, really everything: Photos, videos, textual contents, stickers, selfies and audioclips!
Yeah! Publish Audioclips in your status.
Audioclips are an essential content for modern conversations. We are used to talking directly instead of writing to someone, because talking is faster. Audioclips in Status means better accessibility.
I started from the current design for audioclips and developed a version suitable for the Status pages, with better usability. Customize colors, add photos, textual contents or stickers. In reality it seems to work as a sticker, in fact it could be. Contacts can comment on it with emoticons-suggestions, personalized messages, reply with stickers, or reply with an audioclip...so it will be a fluid conversation.
I started from the current design for audioclips and developed a version suitable for the Status pages, with better usability. Customize colors, add photos, textual contents or stickers. In reality it seems to work as a sticker, in fact it could be. Contacts can comment on it with emoticons-suggestions, personalized messages, reply with stickers, or reply with an audioclip...so it will be a fluid conversation.
How an audioclip works in a conversation. Normal audioclip and the version for Status stories (Jump 5 seconds/Stopped/Played)
How it works in stories?
Choose Audio as content to publish in Status page. Long press on audio button in middle or drag right to lock it and talk. What you can see is: Your picture profile, seconds of the record, sound line and when you finish it will appears the player, timing of start and end, play/pause, back 5 seconds and jump 5 seconds (variable based on timing).
You can choose the color of Audioclip, a background, add pictures, add text or other stickers/gifs/emoji.
You can choose the color of Audioclip, a background, add pictures, add text or other stickers/gifs/emoji.
Audioclips creation: Choose a color and record an audio with a long press on circled button in bottom or drag on left to block it.
Audioclips creation: Delete recorded audio, add other contents after record and publish it.
Calls and conversations list.
I also designed the main pages of WhatsApp in Sketch. I have left some components unchanged, others have been redesigned totally, like icons and some cells. Everything have the main color chosen in setting.
Customized colors for your chats.
Users can customize colors for WhatsApp X, so main color will appear everywhere, expecially for bubbles chat. Users can customize colors of UI in setting page. The green is the new default color. Other colors available are blue, pink, black, orange, yellow, gradient purple and gradient green.
I redesigned mains bubbles chat and other component in Sketch format.
I redesigned mains bubbles chat and other component in Sketch format.
I recreated all the components in Sketch. format, coming soon the Figma version.
Contact me to Download WhatsApp X.sketch
Sponsored contents in a conversation. Thinking about the problem.
Currently WhatsApp does not provide advertising in the chats, what I’m showing here is only a thinking concerning sponsored bubble chats based on the topics of conversation. This project is not based on real data nor has an in-depth study been made on users, their habits and in general on the possibility of creating monetization for Whatsapp, but it just wants to be a study in UI design on how advertising content could appear directly in the (private) conversations between people in a fluid and natural sense.
Basically the problem I see now is that sense of chat spying, being sponsored content, but at the same time it could become a convenience for users to ask for advice or suggestions from a WhatsApp-bot as if it were an assistant. Whatsapp could also show advertising based simply on personal tastes (having much more user data available in the future) but in this case the advertising would be more targeted to the single user and would therefore not be part of the conversation (The user / multiple users we are talking to will not see the same ads).
However in the specific case that I show in the following image in the flow of the Whatsapp conversation, recognize keywords on which to base the advertising in phrases that contain words such as "I would like" or "I'm looking for" or even brand names, shared photos or user localization. This path should be explored, always paying attention not to destroy the trust of users who could perceive advertising on Whatsapp as an invasion of private chats.
Basically the problem I see now is that sense of chat spying, being sponsored content, but at the same time it could become a convenience for users to ask for advice or suggestions from a WhatsApp-bot as if it were an assistant. Whatsapp could also show advertising based simply on personal tastes (having much more user data available in the future) but in this case the advertising would be more targeted to the single user and would therefore not be part of the conversation (The user / multiple users we are talking to will not see the same ads).
However in the specific case that I show in the following image in the flow of the Whatsapp conversation, recognize keywords on which to base the advertising in phrases that contain words such as "I would like" or "I'm looking for" or even brand names, shared photos or user localization. This path should be explored, always paying attention not to destroy the trust of users who could perceive advertising on Whatsapp as an invasion of private chats.
Examples of sponsored content on WhatsApp chats entering the conversation flow. Advertisements can be shared or pinned.
Test on sponsored contents on WhatsApp. New possibilities with data sharing.
Where to place Ads? Who can see Ads? Does sponsored content refer to what users are saying in conversations or is it simply based on primary user? And what frequency would they have? Will it be pop-ups or bubbles? If they are in the shape of a bubble then they enter the conversation? How can they integrate into the conversation without being a nuisance? And a thousand other questions.
I identified 4 actors who interact in this specific situation:
• Brands that will invest in advertising on WhatsApp
• The main user
• Secondary users (with whom the main user chats)
• The Whatsapp team (Marketing and Design) that will improve the possibilities for marketers more and more
I carried out some very quick tests as you can see in the following image, I tried to understand what position advertising on Whatsapp might have.and design areas that marketer can mange for their ads contents.
In test #1, the advertisement is in the area of the main user (Green deault bubble), it would be shown only to him and based on his data. It would have no connection with the conversation. The main user would then see content such as photos or videos, a textual content with a link, the ability to share it with other users, pin it and other options. The whole bubble refers to the landing external site if the user taps it (the "INFO" icon is a signal that say the content can be opened). I excluded this possibility because the user would have the feeling of having shared something with the secondary user and it not give the sense of a sponsored content by an external actor.
In test #2 the advertising is totally disconnected from the conversation and is in a central position. Shows the reception time, no visible link but the "See more" button. It could be the best solution for an advertisement that is not based on the conversation and would therefore be visible only to the main user (It is a non-shareable content).
In test #3 I just tested the middle position of the shares and it is very similar to #1.
There is no time but the "Sponsored" text. Not so natural and it will be different considering other shared contents.
There is no time but the "Sponsored" text. Not so natural and it will be different considering other shared contents.
In test #4 I have reversed the position, so it is on the left. In this case the advertising content refers to the conversation and it appears that an outsider is participating in the conversation. It seems like a natural solution to me, much like group chat bubbles. The available actions are Share and Pin it. I have deleted the publication date and left the INFO sign at the bottom right. It is currently the solution I used. The colors of the links and the name follow the chosen colors of the chat, in this case the default green color is enabled.
In test #5, there are two different ads follow one another, one of which is pinned by the user. The enabled color is orange.
In test #6, the advertisement is naturally integrated into the conversation, with two separate bubbles just like in the chat. There is therefore the possibility of showing visual content + text and the link in a separate bubble.
It is a topic to be explored with further tests considering that WhatsApp currently has no monetary revenue from advertising. I am sure that a lot could be created along this path if you consider the high levels of attention and participation that users dedicate to the chats in which they have to participate. So higher levels of interactivity, content that could really involve the user... I will certainly create a project dedicated to advertising on WhatsApp as soon as I have some free time.
Create conversations and Setting.
I also redesigned the UI of the single and group chat creation pages. In addition, the setting pages with the possibility of customizing the colors of the app with a preview display. Users will also be able to enable dedicated chat wallpapers. Currently I have not redesigned in the settings the possibility of improvements concerning users with disabilities.
WhatsApp enabled in Dark mode.
It seems to me now a trend for digital services to have a version in dark mode and for this reason I have converted every single cell, every single bubble chat and every single icon in the dark version colors. The user will see this option enabled when the iphone settings require it, by enabling it in the app settings or by setting a time that will automatically enable dark mode.
Thank you
Soon other cool things. Keep following me and Stay Safe ☺
