Chat Feature Redesign
Mobile, iOS
Non-disclosure Disclaimer:
To comply with my non-disclosure agreement, I have recreated all wireframes and omitted confidential information in this case study.
Mobile, iOS
To comply with my non-disclosure agreement, I have recreated all wireframes and omitted confidential information in this case study.
Product Designer
3 Weeks
Figma
Maze
Jira
Due to the pandemic and the rising amount of people working from home, online communication tools became more and more essential to collaborate and connect with others. The chat experience on web for a social collaboration app was recently redesigned. I was tasked with redesigning the chat experience on the mobile app to match the web experience.
Prior to the update of the chat experience on web, most users on the platform were not utilizing the chat feature. Users shared that it was not easy to view other users in a chat group and the mobile experience did not match the experience on web.
The primary users for the collaboration platform were users located in the United States, living in primarily suburban and urban areas. They are between the ages of 16 to 65.
After evaluating the current chat experience and addressing areas that needed to be reworked, I was able to redesign the chat feature on iOS. I conducted unmoderated usability tests, collected feedback from users, and made new iterations to produce a friendlier experience.
Please note that these wireframes are a recreation of the original project in order to comply with my non-disclosure agreement.
For this project, I was responsible for designing wireframes and the prototype on Figma. I created the usability test on Maze and worked on additional questions for the unmoderated usability test. I worked closely with frontend developers while the feature was being developed. I also assisted with testing the chat feature on the testing environment.
Slack was used for the majority of communications. The Product Design team had all sprints organized on Jira. Product requirement documentation and user research documents were stored on Confluence. Synchronous meetings were held on Zoom.
Initial user research was already completed when the chat experience was redesigned for web. Metabase was used to collect user feedback on the previous experience. Below are a few examples of common feedback from users on the previous chat experience.
After analyzing user feedback and reviewing the current user flow for the experience on web, I began sketching potential mobile solutions. Please note information has been omitted from the sketches to comply with my NDA.
While designing the mobile screens, I closely matched the elements from the web experience. I used similar icons and referenced elements from the design system. Below is a screen of the chat experience on web that I referenced for the new mobile screens.
This screen is a recreation of the original design to comply with my NDA.
Direct Messages Panel - Empty
Direct Messages Panel - Ideal
Group Chat Feed - Ideal
Before handing off designs to the developers, I needed to test the mobile screens with users to see if the new chat experience on mobile was user-friendly. I created a prototype and uploaded it to Maze where I would be able to conduct unmoderated usability tests. I opted for unmoderated testing because this environment would mimic a realistic environment with users and hopefully yield more accurate results.
The usability test consisted of 7 tasks. There was a total of 26 participants. I asked users if they had used the Chat feature before, gauged how much they liked the current experience, and gathered responses regarding what they didn't like about the current experience.
In the usability test, I asked participants who have used the Chat feature before what their thoughts were on the current experience. "Collab Forward" is a fictitious app name used to comply with my NDA.
"It's hard to see who is in the [group chat] and I don't really know who I am talking to."
- "Collab Forward" User
Participants were asked to start a new chat on the Direct Messages Panel screen displaying the empty state.
of participants completed task via the expected path.
of participants left or gave up on completing the task.
Please note that the heatmap below has been altered to comply with my NDA. From this heatmap, we can see that testers were clicking on numerous icons that they believed would start a new chat.
Testers didn't know this icon indicates that they are viewing direct messages
Testers thought this button would start a new chat rather than creating a new community server
Testers had a hard time finding this button because it was small and didn't stand out with a bright color.
Participants were also asked to add a new member to their group chat from the Group Chat Feed screen.
of participants completed task via the expected path.
of participants left or gave up on completing the task.
Please note that the heatmap below has been altered to comply with my NDA. From this heatmap, we can see that testers clicked in more than one area in order to add a new member to this group chat.
For some testers, the "Add Member" button on the navigation bar was not easy to spot and they tapped on the back button.
Testers thought they would be able to add a new member in the previous screen and tapped on the back button.
After completing the usability test, I asked participants to rate the new Chat experience. Although there was an overall increase in positive sentiments for this new experience, there were still improvements that could be made. Especially because there was an increase in 1 ratings! This could have been a result of multiple factors, the major one being that the Maze usability test was laggy for some testers.
"I find it really easy to use and it looks better than a lot of chat apps I've seen."
- "Collab Forward" User
Reorganized hierarchy and moved "Direct Messages" heading to the top of the screen
Moved button next to the "Direct Messages" heading and used a bright color and more familiar icon for creating a new chat
Added new UI element to help convey that this button is in the selected state
Updated heading so that it would display members' name and a group image to personalize each group chat
Included only frequently used actions on the navigation bar: Video Chat and View Members
Moved button to the Members Panel because this action is used less frequently and is relevant to viewing the list of members in a group chat
Some major lessons I've learned throughout the course of this project is that not all web elements can translate exactly to mobile screens. During the development of the new feature, it was crucial to communicate with the developers often to ensure all interactions and UX intentions were clear. After meetings, it was very helpful to write out a summary of the meeting and any changes made to the design. I logged all of this information on the Jira ticket where all team members involved can see.
The next steps for this project is to track metrics and see how successful this new chat experience performs with users. Ultimately, I'm glad I was able to have the resources to reach users and test with them. It has been a rewarding experience to ship a product that helps users collaborate with others.
If you like what you see and are interested in working together, let's get in touch!
Let's Connect!