|
Microsoft Teams Redesign
|
RoleSolo UX Designer
|
CategoryAndroid 9.0 (Pie) Google Pixel 3A
|
ApproachLaws of UX & Usability Heuristics
|
Duration1 week
|
Tools
Figma
|
Microsoft Teams
Microsoft Teams is a business communication platform developed by Microsoft offering workspace chat rooms, videoconferencing, file storage and application integration. Teams has about 280 million monthly users and is available for Windows, macOS, iOS, Android, and web browsers.
For my User Interface II class, I proposed an interface redesign for the Teams mobile app for Android 9.0. I chose this display size because my personal phone, the Google Pixel 3A, uses this version of Android and I regularly use Teams to collaborate with my classmates on my phone. The prototype for this UI redesign was created in Figma following the Laws of UX and Usability Heuristics approaches to design.
For my User Interface II class, I proposed an interface redesign for the Teams mobile app for Android 9.0. I chose this display size because my personal phone, the Google Pixel 3A, uses this version of Android and I regularly use Teams to collaborate with my classmates on my phone. The prototype for this UI redesign was created in Figma following the Laws of UX and Usability Heuristics approaches to design.
Design Shortcomings
The following are elements of the Teams app for Android 9.0 which would benefit from a redesign:
Navigation Bar
In the Teams navigation bar, there are six tappable icons. The rightmost icon expands to reveal a menu with sixteen more tappable icons. These sixteen icons have no clear grouping or hierarchy and are listed in a random order.
|
According to Miller’s Law, the average person can only keep seven (plus or minus two) items in their working memory. With the current navigation bar design of sixteen menu options per page, too many choices will overload a new user’s working memory. They could struggle to quickly find what they are looking for and potentially abandon using the app altogether.
In addition to the poor organization of the menu, the icons for each menu item take up a lot of space. As a result, it takes takes more time for users to navigate through each option. This cluttered menu could be a potential pain point for the user. |
Original Navigation Bar
|
Activity Feed
The Activity Feed is a list of cards representing the user’s recent messages or interactions for every Team they belong to in the order in which they were received. For each card, the contributor's name is emphasized in a larger text while the Team channel the message belongs to is shown in a much smaller text. This design choice makes it difficult to immediately recognize which Team channel the update card belongs to, requiring more cognitive effort from the user to understand the context of the message.
|
Users should be able to immediately recognize information in the interface, rather than forcing them to remember it. Following the Von Restorff Effect, an object in a group of similar objects is more likely to be remembered when it differs from the rest of the group. The team channel indicator should differ from the rest of the information on the card so that it is immediately recognizable.
On the Activity Feed, an update for a new message is given the same card size as an update for an emoji reaction to an existing message. This is confusing for the user because it signals that these interactions have the same level of importance. A message reply should be given more visual importance than emojis because there is more content for the user to process. To incorporate this into the design, an update card for emoji reactions should be created for the activity feed. Users need visibility of system status, meaning the design should keep them informed about the emoji reactions they receive. |
Original Activity Feed
|
Redesign Solutions
The design shortcomings should be addressed in the following way:
Navigation Bar
|
The number of options in the navigation bar should be reduced to the most important functions. The extraneous functions currently nestled within the vertical-more icon in the navigation bar should be reorganized into a side menu. The main navigation bar should now only include the five main functions: Activity, Chat, Teams, Assignments and Calendar.
The menu options are chunked into four categories within a hamburger menu: Productivity apps, Communication apps, Education apps, and Administrative apps. Following Miller's Law, each category holds between 4-7 menu items and is organized into an accordion menu, which can expand or collapse on tap. By grouping the functions into smaller chunks, the menu options will become easier for the user to quickly scan and navigate. To accommodate for the addition of the hamburger menu in the top right of the screen, the miscellaneous icons that currently occupy the top right corner of each screen should be relocated to the left of the search bar. Following the industry standard of a top-right hamburger menu aligns with users' expectations for mobile-app functionality and is easy for them to use. Repositioning the previous top-right icons instead of removing them altogether also maintains internal consistency for Teams functionality. |
Navigation Bar Redesign
|
Activity Feed
|
To create visual distinction for the team channel name, each team should be associated with a color. An activity card labeled with its corresponding team color allows the user to instantly recognize which team the alert belongs to. This would reduce the mental effort needed for the user to navigate the interface and let them to do so more quickly and easily.
To establish a visual hierarchy between message activity and emoji reactions, the emoji reaction cards should be reduced in size. The current design includes activity cards with a height of 80pts. For this redesign, standard activity cards should remain at 80pts high, but emoji reaction cards should be reduced to 44pts (44pts is the shortest acceptable height for a tappable area in a mobile interface). In order for the emoji reaction card to fit its new height, extraneous information such as the original message details and Team channel are omitted. In its place, a single string of text signals to the user that they received an emoji reaction. The last item in the string is presented in a contrasting color to signal to the user that it is tappable. Tesler’s Law states all processes have a core of complexity that cannot be ignored and must be assumed by the system or user. With the redesign, the user is encouraged to tap into the emoji reaction card to uncover the details of the interaction. |
Activity Feed Redesign
|