Case Study: Interaction Redesign of WhatsApp on IOS
Disclaimer: I do not work for WhatsApp. The views from this case study are strictly my own and are not reflective of Whatsapp. And I know that as a new designer, I’m acknowledging that my vision might be overly ambitious. I have no access to the data WhatsApp possesses to influence their current design. This case study was done to enhance my skills as a Designer.
The challenge: to work on the interaction design of an app I and millions of others use regularly and see how far I could push myself as a designer.
I chose to work on the WhatsApp app because I’ve been using this app on every smartphone I’ve owned dating back to 2013 and it has been the go-to app for daily communication with friends, family, and work colleagues. hardly a day goes by where I don’t use WhatsApp to text my siblings, send memes to my friends, post on my status, and now even for daily calls. I decided to work on the IOS design because WhatsApp has two different designs for Androids and iPhones and because I use an iPhone myself, I’m very familiar with the IOS design style.
I maintained the current minimalist design as I think it is intuitive and very straightforward. Like the Ramsian Doctrine states
good design is “as little design as possible.
Goals of the Redesign
- To design a more intuitive and effortless user interface
- To build a more accessible app by implementing assistive technology (AT)
- For personal growth as a designer and researcher
- To further improve my skills in UI/UX software
User Research and Data
The first step in my redesign journey was to do some research on what the typical Whatsapp user is like, how often they use specific features of the app, and any potential issues they have with it. It was pretty fun as I got some funny and unexpected answers lol. I conducted interviews and surveys with 20 WhatsApp users using an iPhone. The interviews were conducted through calls/texts and the survey through google forms. My data from the interviews and survey can be accessed here.
Interviewee Demographic
60 percent of the people I interviewed were female and the remaining 40 percent are male, More than half of them were entrepreneurs (63.2 percent). Not surprising given the current state of things hehe. WhatsApp is currently the most used social media app in Nigeria across all age groups but I interviewed users between the ages of 20 — 25 years. This is because the redesign is for the IOS platform and 44 percent of iPhone users are within the ages of 16 – 24.
To back the high usage rate of WhatsApp, 100 percent of the users I interviewed ranked WhatsApp among their top 5 most-used apps.
The Last Thing I asked of my interviewees was to describe WhatsApp in 2 adjectives and while I got some funny answers like free and annoying, the most popular adjectives were Easy, Efficient, and Functional.
User Personas
From the interviews I did, I was able to get a great understanding of who I was designing for. So are you like Tolu? the entrepreneur! or are you more like Daniel?, maybe you just use WhatsApp to communicate and have fun. Either way, this redesign is done with you in mind.
Now let’s get to the good stuff he-he.
First, The Chat Page
I highlighted the various pain points on the chat page which included overload of content, Forgotten chats, and inability to view profile pictures without entering the chats.
Problem 1: The Tab Bar
According to my research, 100 percent of the users use WhatsApp every day but 40 percent of them claim to never use the camera feature, 55 percent claim to use it sometimes, and only one user uses it regularly. It goes to show that WhatsApp is mainly used as a chatting application and not for taking pictures or videos regularly.
The Solution: Placing the Chat icon front and center and replacing the Camera feature.
Seeing as WhatsApp is primarily used as a messaging platform, I placed the chat icon in the middle of the tab bar and replacing the camera feature with a “Groups” feature (we will talk more about that in the next problem).
Problem 2: Cluttered Chat Page
There aren't any visual cues to separate personal and group chats and so the chat page can get all muddled and confusing. From the survey, 65 percent of the users were in 11 groups or more. The human short-term memory can only hold so much info, so users will constantly forget some group names and would have to scroll continuously to find group chats they can’t search for.
The Solution: Creating a Groups/Lists Page
I created a separate dedicated page for Groups and Broadcast lists. This was done to declutter the Chat page and get rid of the repetitive functions. The group's page is very similar to the chat page except, in this case, it has a toggle button to switch between groups and lists.
Problem 3: Viewing Profile Picture and Blocking contacts
Users want to perform tasks effortlessly and without worry, and that is why profile pictures should be able to be viewed without having to go into the chat. If users can view a message without going into DMs directly, they should be able to also view profile pictures. This is a problem exclusive to only iPhone users making it even more intriguing. The same applies to blocking a contact. For example, a user receives a message from an unknown number, the user should be able to view the profile picture of the person sending the message and decide to block such person without having to read the chat.
The Solution
I redesigned the interactions of the chat and groups page to enable users to be able to view profile pictures just by tapping on the pictures. The feature that allows users to view messages without entering the chat is a genius move by WhatsApp and I used that feature to my advantage by adding a “block contact” button to the already present options. I also implemented the “Block contact” feature into the More options button.
Problem 4: Chat Sorting
So many times I have failed to respond to chats because new messages pop up and push the older ones down the list. Doesn’t seem like a big deal at first but over time, it accumulates and I am left with a lot of unread messages. This is a very common issue as a lot of friends complain about the same thing and according to them scrolling down the chat page to look for unread messages is a hassle.
The Solution: Sort Chat by read/Unread
To solve this issue I include a chat sorting feature on the chat settings page. This feature allows users to sort chats either by time(default and present setting) or by “read and Unread” messages. This new feature prioritizes unread messages and makes it easier for the user to respond to all chats.
Part 2: Deleting Messages
A question I asked the users during my research was “ what do you think about the delete message feature” and I got some intriguing answers. About half of the responses I got lamented on the fact that it leaves a note behind saying the message has been deleted, but another section of users said it was needed to avoid manipulation of information.
Users make mistakes and would like to rectify them without having to explain them to other people but the app has no way of knowing if it is a genuine mistake or information manipulation
The Solution: Message Editing
I took a page out of telegram’s book here by implementing an edit feature that allows users to rectify very recent errors. The feature though would only be available for messages sent less than 10 minutes ago. I left the delete feature alone as I think it is important and well thought through.
Part 3: Status Page Redesign
We’re nearly done, stay with me now lol. The current status page design is beautiful and almost completely effortless. Almost!
Problem 1: Lots and lots of scrolling
Posting and Viewing Whatsapp statuses has sorta become a norm now and basically, everyone uses this feature. From entrepreneurs posting their goods to students posting memes and funny videos. There is this problem of viewing a previously viewed status and this problem is a user having to scroll all the way past unviewed statuses just to get there and this can be especially annoying for users with lots and lots of contacts.
The Solution: Toggle between recent and viewed status
I added a toggle button that gives the user the power to move between recent and viewed status with a single tap instead of long seconds of scrolling
Problem 2: Reposting
Scenario: You are looking through various statuses and you see a funny meme or important piece of information you also want to share on your status. So you have to take a screenshot or screen record and start cropping. A hassle eh?
The Solution: The Repost Feature
I added a feature to repost content from your contact status directly to yours by clicking on the three dots button at the top right corner of your phone and click repost.
Of course, users still retain the right to decide if they want their contacts to be able to repost their content. This is done by toggling the “Allow Repost” feature on or off in privacy settings.
And last, But definitely not least.
Accessibility
Creating Equity Focused Designs is a primary goal for me as a Designer and I always design with the Next Billion Users in mind. In this redesign, I decided to equip the app with a couple of assistive technology (AT) to make the over product more accessible.
Colour Contrast was one of the ATs implemented to assist those with visual impairment in navigating through the application. A language translator is the other AT implemented as WhatsApp is a Universal app and there is a possibility of contact with individuals who speak a different language from the user.
WIREFRAME SKETCHES
In Conclusion,
This was my first case study as a young UX designer and I understood that going into this project was going to test my creativity and skill. There were times where I had mental blocks and times where I just felt tired. But I am glad I have been able to put everything I have learned so far to practice and even learned a lot more during the project. But UX doesn't end and I know I have to keep learning and improving always.
Thank you so much for your time. You can find me also on Dribble, Behance, and LinkedIn
