The Final Product
Our Solution
LinkedIn's Solution
The issue we were trying to solve with this project was the disorganization of LinkedIn's chat system. On the left is a video breakdown of what this 2 week long project accumulated to.
Interestingly, LinkedIn seems to have developed a similar feature after I had done this project (shown on the right). Not to say someone at LinkedIn came across this case study and decided to make the project, but I think it further validates the feature idea as well as our final outcome.
Introduction
Team
Tools
Figma
Figjam
Google Forms
Timeline
2 weeks
Dec 17-31, 2022
Overview
LinkedIn's messaging system isn't organized enough.
With 875 million+ users in ~200 countries, LinkedIn is known as the staple professional platform.
However, connecting those millions of users can end up a cluttered mess which is exactly what users run into when using the messaging feature. To combat this, I thought of Chat Folders, an organizational feature for LinkedIn's messaging system that would address common, organization related user pain points.
Research
User Research
Our research participants (11 total) included
-
Students
-
Recruiters
-
Junior-mid level employees
-
Job seekers
General LinkedIn usage was recorded as shown on the left
Note: Terms like "Often" and "Occasionally" were not clearly defined, so results may be skewed due to inconsistent interpretations
We also saw that 80% of these users used the platform for networking. This ranked 2nd among other potential uses.
User Research Findings:
I gained insight to our 2 main pain points: Cluttered chats and inability to filter unwanted messages. 3 responses of 11 which capture this are shown below
Market Analysis
Another factor in our research was market analysis. We looked at 3 other commonly used messaging apps (Discord, Slack, and Instagram) and our findings are as follows:
Method of organization should be
Problem
LinkedIn conversations and connections frequently get lost in the sea of spam, notifications, and other messages.
Finding The Right Problem
Currently, LinkedIn’s messaging feature is a chronological list of all of a user’s chats, leading to a pile of messages which are hard to keep track of. I came into this project with this problem statement: The chat feature needed an upgrade. However it would be refined to the one above with our research.
Solution
I thought of chat folders, a feature that allows users to create categories and sort their chats/messages. In order to keep the folders from getting confused with individual messages, the folders would also be displayed separately from the messages.
When asked, research participants agreed that at least the idea of this feature aligned with their goals when using the app.
Lofi
Flowchart
We started with this flowchart which described how folders would fit into LinkedIn
Wireframes
These pages show my 3 initial sketches based on the flowchart: List, Button, and Horizontal Menu.
-
List: Inspired by Discord and Slack which vertically display all the folders (aka servers) at the top level.
-
Button: Developed off of List to mitigate the visual impact on LinkedIn's current messaging page. This button would replace the new message button in the top right and move it to a fixed position.
-
Horizontal Menu: Based on Instagram DM's which horizontally display a higher level category of folder (Primary, General, Requests).
Vertical vs Horizontal Menus: Secondary research
We decided against List since it cost too much screen space and was too disrupting to what LinkedIn currently has. We then further explored Button and Horizontal Menu.
The Flows
We made 4 more lofi sketches, this time with additional frames of how to add a folder.
Top tier, horizontal was the final lofi that I drew and the one we went with in the end.
Points of emphasis:
-
Uses horizontal menu with same high level folders as Top tier, set amount menu
-
Add new folder is internal (inside high level folder)
-
Rest of flow is identical
Our Other 3 Explorations
Midfi
Mockups
This first set of mockups shows 2 variations I did not end up pursuing. These versions were very similar, the only difference being the menu's position on the page.
I decided on solely using the set number of high level folders (Direct Messages, Groups, Folders, Requests).
Pros:
-
Does not disrupt original flow of LinkedIn messages system
-
Compact, especially with the 4 high level folder layout
-
Easy to customize
Cons:
-
Low discoverability
-
Folders page is very bare
-
Unnecessary extra frames
This final set of midfi mockups were created to explore Top tier, horizontal. This would end up being the design I ran with, though more research would be conducted to determine that.
Pros:
-
Very fluid and natural
-
Utilized 4 top tier folders layout most effectively
-
Less frames needed
-
Not too disrupting to LinkedIn's current messaging system
Cons:
-
Potentially misleading intractability, especially with swiping
-
Create folder function position is not ideal
The set of frames above is the flow in creating a new folder. This would be the basis of the flow I ended up using for the final designs.
More Research
More research was conducted where these 3 designs were pitted against each other in the image below to determine user preference among the 11 participants we had
The Responses
Option 3, Top tier, horizontal, was preferred by 63.6% of participants against option 2’s 36.4% and option 1’s 0%. So I fleshed out option 3 to transition to hifi.
Hifi
Finally, I finished a hifi design of the feature based on the option 3 midfi. A few changes were made like having a search bar instead of just a folder title and adding a frame for the kebab menu, but overall the midfi stayed relatively intact.
Feel free to interact with the live prototype on the left, or view it in Figma here
(Note: the member selection frame can only be continued after selecting "Mikayla Poon")
The Frames
Metrics
Our main 2 metrics for this feature were
Task Completion Rate
Tracked during the post-hifi usability test described below
User Satisfaction
Participants were asked to rate their experience at the end of testing
4 people were interviewed to complete 3 tasks with our hifi prototype:
-
Create a new folder
-
Add “Mikayla Poon” to the folder, then add the 2 other connections that would fit a “LinkedIn connections” folder (Diego Ttito and Gary Wu)
-
Delete the folder you just created
Interview results:
Positives:
-
High task completion rate
-
Users were satisfied
-
Users would use the feature if it were implemented
Negatives:
-
Participants ran into some falsely perceived functions like swiping
If this project were expanded, further research and testing should also be conducted in order to account for these additional metrics:
User Metrics
Business Metrics
Reflection
This was my first feature design and it was definitely different than building something from scratch. Though that presented its own challenges, it was also an advantage. I was familiar with the product, users were easy to find, and the base UI was available.
The biggest lesson for me was in the research. I now have an undoubtedly deeper understanding of how to weave users into the design process and how important it is to do so. Our research participants gave us our primary focus, our metrics, and valuable feedback for our designs.
Next Steps:
As I mentioned a few times in my case study, should this project be expanded I already have ideas on how to do so. Added metrics as well as accommodating for functions users perceived to be available but actually weren’t (such as swiping) are the 2 main things I would like to work on.
