Published on <a href="http://ift.tt/2mz421C">| Prototyping: From UX to Front End &mdash; Medium</a> Arushi Singh 
I had been travelling over the past few weekends and couldn’t gather enough time to start writing on something that has been lingering in my mind. In fact, the first thing I did was to visit my Linkedin profile and realized it is something you don’t want to do after a nice vacation ;-). What made this more interesting was right when I was on the verge to completing my critique, Linkedin made its redesigned UI public. To my delight, many of the glaring issues I was about to point out have been addressed well.
Back in college, I was advised by seniors to have a Linkedin account because it’s the Facebook of the professional world. Of Course, my profile has changed since then and the constantly increasing work experience makes my Linkedin profile more colourful with each passing year. Every single time I open my account, I often do the following — go through the feed, go through the connection requests, messages and most importantly, follow people who might have inspired me somehow :). I also update my profile every 3–4 months. There are many things that hurt my experience when I used the product but for the sake of brevity, I’ll just stick to the profile page in this blogpost. Nevertheless, it’s the profile page that every Linkedin user is innately passionate about. Further, I’m a free account holder, so these thoughts are confined to that experience. Moreover, the critique is only limited to web experience. Here’s what I think Linkedin finally got it right for the time being:
Cleaner flatter look, (thank god they got rid of the ‘hyperedit experience’)
Earlier, when would I visit my profile on Linkedin, I was greeted with zillions of edit icons on anything I hover. It often felt like I just opened a can of worms. This page always seemed to follow a flawed assumption that each time a user visits their profile only to edit it. What if I make an unintended edit? What if the brief I sat for long hours just gets deleted by mistake? Or what if I am mainly concerned about how others see me?
It was also annoying that so many edit icons just hindered and cluttered the view of other UI elements. Yes, affordances are necessary, but too much of anything is bad.
<img alt="" src="http://ift.tt/2m8DXuW">1. Older Profile Page for Linkedin 2. Profile Page post the design refresh
The current UI looks much cleaner, with enough white space and flat iconography. The edit icon placed neatly in the corner of each section which opens up a new pop up window. This subtle affordance is enough to suggest that an edit icon in that block is edit to anything that is contained in that block. Even in the edit mode, it preserves the default look, thus feels less frustrating.
Information Architecture &amp; Visual Hierarchy
Just within the profile page of the earlier version, Linkedin flushed so much information that even a seasoned user of this application used to get overwhelmed. Further, the variations in layout and interactions in this page only hurt the experience instead of helping it.
The right panel on the profile page looked like an Indian, Chinese, and Italian chef trying to mix their recipes in one pan. It had ads, settings, who looked at your profile all waging a war to get the user’s attention.
However, in the new design, one can very well notice the effort in creating a meaningful hierarchy and reduce clutter from the screen.
The ‘add new profile section’ button particularly caught my attention, which now has has a modular ‘accordion like’ menu to address the sections within the profile page. Collapsing all these under one umbrella certainly makes the page look minimal with just essential elements desired by the users.
Another improvement that is clearly evident is the attempt to create a visual hierarchy for a better summarisation and consumption of profile information, e.g., the accomplishments section. You see a summary of the data, along with an option to ‘see more’ right below this. Even from a recruiter’s point of view, this is helpful in scanning the profile quickly. In case the recruiters are interested, they can dig deeper to find out more about the candidate.
<img alt="" src="http://ift.tt/2mz4SeT">1. Profile Sections in the older design 2.In the current design it appears on the right side in a neatly design collapsible dropdown 3,4. Examples of how the use of type and colour highlights the important data points reduce clutter and draw focus on only the important data.
While the earlier design didn’t make efficient use of space to highlight key actions. I see that the current design does try to add subtle highlights by the use of colour, icons or type. In fact that there is enough breathing space around the elements. For instance, the top bar, which now focuses on some key features of the product like the people graph, jobs and notifications.
<img alt="" src="http://ift.tt/2m8MY7i">1. The top bar in the older design 2.Top bar in the newer design making better use of space to highlight features &amp; functionalities.
Rankings and statistics
Have you ever played games where you never know when the game ends. That’s the strategy used to engage players to make them play for long hours. I assume Linkedin had a similar idea, when they added the profile completion feedback. Just that it has been almost three years and it is still not complete. Linkedin used to tell me I have an ‘all star’ profile, but just forgot to add the little detail about what it exactly meant? When would my blue bubble be full? Sometimes I wonder if a profile by its very nature has limited attributes, was it doomed to stay incomplete for the rest of its existence? Perhaps this little gamified add on should have been more personalized to an individual’s background. There are professions where a lot happens at once, and then there are professions where progress takes years. It was not fair to keep both of them in the same level playing field.
Well, it feels great that the stats have been reduced to these digestible data points for now. Sometimes, numbers are the best forms of data visualizations.
<img alt="" src="http://ift.tt/2myYIv7">1.Right pane as it was in the older design, containing some vague statistics about the profile 2.Toned down version of the same stats which take the user to a detailed view only if the user seeks more information.
Consistency and Redundancy
Interestingly, when I used to visit the older profile page I encountered a plethora of different ways to edit a piece of information. With experiences ranging from inline editing, edit mode and pop ups, it feels like a page designed by multiple people who never attempted to share notes or were lost in translations. For instance, each sections in profile page is essentially designed to look like a clickable tile with sublinks at the bottom. A simple hover highlights and adds a zoom icon which leads to pop-up window while the endorsement buttons have a similar action of opening a window on click but with an entirely different interaction pattern.
I will be surprised if this kind of interface did not increase the workload among both the design and development teams. A complex interface is always prone to inconsistencies purely because of the sheer number elements one has to manage. Edit is perhaps the most common feature on any online account, so it doesn’t warrant this level of complexity and is perhaps well off just by staying in a corner.
They seem to have worked this problem out by doing just that, keeping it simple, singular in the overlay edit view which appears as a pop up window each time one wants to update their profile.
<img alt="" src="http://ift.tt/2m8EsFb">1,2,3. Examples of editing in a pop-up, editing mode and inline in the older design 4. Consistent experience of editing in a single pop-up window.
Another glaring example in the older design was the ‘send a message button’ right below the user information card. The same button had different labels in different views moreover, it contained a dropdown of a set of entirely unrelated actions. The same button behaved &amp; looked very different when on is in the edit view. Infact, this particular feature was also very difficult to discover as it was highly unintuitive to expect these bunch of disparate actions in the drop down.
<img alt="" src="http://ift.tt/2myZhoL">1,2. In the older designs, ‘View profile as’ button would change to send a message if one changed the viewing mode to ‘as others see my profile’
In the new design, we are not bothered with these obscure functions as they have stripped down these functionalities to the bare essentials and placed them in the overflow menu in the top right corner.
<img alt="" src="http://ift.tt/2m8DWam">Only the essentials actions have made it to the overflow menu
Affordances
If I were not evaluating this product, I would have never attempted to click on the contact card in the older design. When I clicked on it, it opened in the form of an inline drawer. I had no anticipation of what it would lead to because no other button had a similar behaviour. Further, once this was open, there was no affordance that clicking on the same button will close the drawer. Like I mentioned before, affordances are good but too little and too much of that is bad and frustrates the user. Unknowingly, Linkedin has either no affordances where required, or just too many when one is enough to trigger an action. It is important to strike this balance to make it a pleasurable experience.
<img alt="" src="http://ift.tt/2mz4T2r">
Well, the current design uses colour, icons and type to get the user’s attention as well as to offer subtle feedback to the user of the results of their actions.
<img alt="" src="http://ift.tt/2m8OiXR">1. Use of coloured band in the tile to grab the user’s attention 2. The edit buttons in the new designs have subtle feedback on hover
Loss of context
In the earlier version of the product, clicking on an action item takes the user to another section of the page. An apt example of this would be editing sections, where clicking on the tiles, scrolls me down to that particular section and I often have no idea about where I started from.
It’s satisfying to see how the popup edit windows are addressing this issue in the new design without distracting the user from their core intention.
<img alt="" src="http://ift.tt/2mz8VaP">The newer designer maintain this interesting singular edit view which appears in an overlay pop up window
Customizing my profile
In the older design, profile attribute was like a movable tile which could be moved around by the user to edit their profile. For instance, you could move your educational qualifications above your work experience. However, when I tried to move my education above my achievements for instance, I had no idea about where it will land. Could we have thought of a design that gives a preview of what to expect when I move a section, something like powerpoint that lets you see a preview tile of your slides on the left?
In the current design I see that the user can’t make these upfront customizations anymore. It’ll be interesting to explore how users actually customize their profiles or do they prefer the product to do the heavy lifting for them altogether. This offers an interesting opportunity to examine the extent of customization an interface should offer without compromising on the overall user experience.
I understand that the recent design release is in its beta phase and there are more surprises to encounter in future. Nevertheless, the redesigned UI indeed feels fresh and addresses some of the most apparent issues that frustrated majority of linkedin users. Linkedin profile page is almost as critical as one’s resume, and making it cleaner has certainly made it more usable, useful as well engaging compared to its ancestors. Even from a recruiter’s point of view (which was often ignored in the previous design), the new design projects linkedin as a credible platform to identify potential candidates. At least for the moment, I do feel like visiting my new profile once in a while :-).
<img src="http://ift.tt/2m8GzJf" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2mz71qR">How does Linkedin’s redesign address many design faux pas?</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How does Linkedin’s redesign address many design faux pas?

Top Stories