LinkedIn has updated their mobile profile page to distinguish content that only the user sees from content that is publicly available.
Redesign a feature of a product you use often.
Pen, markers, and paper (wireframing, ideation)
Sketch (high fidelity mockups)
Design Council Double-Diamond methodology inspired process
More info about Double-Diamond methodology can be found here.
LinkedIn is a great product, no doubt. I've always appreciated how convenient it was to find industry professionals and potential mentors. However, despite their recent product redesign and app launch, LinkedIn's product still has many confusing interactions and user flows. Being a frequent user of their app myself, I saw room for improvement on their profile page. When I was navigating my own profile, I had a hard time forming a mental model on what was being presented to others. This study looks further into this confusion to find what makes the profile off-putting.
I dissected the profile page section by section to find out what particular issues existed, and where the product could be improved. Among these notes were varying observations on different aspects of the profile page. I found various issues with some aspects of the card UI, as well as with the information hierarchy that the card suggested. The layout brought up questions like, "Why is my LinkedIn activity placed higher than my experience?", which then led to the questions, "Can others even see my activity? Why is there no way to easily identify what others can see?" With these inquiries in mind, I could work on identifying the exact problem impacting this experience.
In order to identify the problem, I chose to set up a common use case of the product, as well as a persona surrounding the use case, to find what part of the user interaction was lacking. A LinkedIn user that would likely be utilizing the profile often could be a recently graduated unemployed college student. Let's call this user persona, "Felix". As stated earlier, Felix has recently graduated and, because he didn't receive any job opportunities prior to graduating, Felix is also unemployed. He often goes to networking events in hopes of finding a potential connection that could get him hired. As a result, he's very self concsious about how others look at him and his LinkedIn profile. I took notes on Felix's pain points and concerns to understand the exact problem with the profile.
I noticed that there was a lack of transparency when it came to showing what Felix saw, versus what visitors to his LinkedIn page saw. For a user like Felix, elements like "Your Activity" are worrying, especially when placed above "Experience". Felix wants to demonstrate his experience to the people he meets, but not necessarily the articles he reads and engages with.
Felix might not want his activity shown on his profile unless the most recent activity is relevant to his profile visitors. A user friendly profile design should be able to accommodate for all types of preferences—LinkedIn has demonstrated that this functionality is on their web app (albeit, not executed quite well). Yet, this feature does not exist on the mobile app. This gave me the opportunity to define the exact problem with the profile page.
Problem: How can LinkedIn users easily determine what aspects of their profile are visible to others, and change whether these aspects are visible or hidden?
Once I defined my question, I started breaking down the cards in LinkedIn's UI. This helped me identify what I could improve without damaging the profile flow. I then brainstormed ways to indicate what is visible to users visiting your own profile.
I wound up at two main concepts and noted their pros and cons. The first idea dealt with indicating which specific cards were visible to the user. This could be done through layout, color, or some other information content division. The second idea deals with toggling what's visible. A solution should incorporate both these concepts with the card UI.
The solution I designed comes in the form of a feature, as well as a styling addition. The first panel displays the styling addition—elements only visible to the user are given a blue background. This adds to the card UI, and very clearly establishes a mental model of what is visible and what isn't. The feature addition comes in form of a secondary button. It allows the user to toggle what card elements are visible, right next to the elements themselves. They can access this feature by long-pressing the "Add" button in the bottom right, which reveals a secondary button above. This button allows the user to go into a mode that allows them to toggle what's visible and what isn't. The cards slide to the left, showing indicators and buttons of what card content is visible, and what is toggle-able between visible and hidden. Tapping on a toggle-able button puts a blue highlight over the element on it's left, indicating that it is now hidden. They can then hide or reveal other profile items, or return back to the default mode if they wish. The elements that are able to be hidden correspond to those in the website version of LinkedIn. Below is an interactive prototype demonstrating this concept on my LinkedIn profile summary.
This concludes my feature redesign. Let me know if you have any questions or feedback by emailing me at [email protected] Thanks!