{"id":1803,"date":"2018-09-13T16:43:10","date_gmt":"2018-09-13T13:43:10","guid":{"rendered":"https:\/\/subsign.co\/stories\/?p=1803"},"modified":"2018-10-11T10:42:41","modified_gmt":"2018-10-11T07:42:41","slug":"linkedin-ui-case-study","status":"publish","type":"post","link":"https:\/\/subsign.co\/stories\/linkedin-ui-case-study\/","title":{"rendered":"LinkedIn UI Case Study."},"content":{"rendered":"<h2 class=\"article__heading\"><b>Basics.<\/b><\/h2>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Let\u2019s start with the beginning, websites and apps have the main purpose of delivering a message from which the user can act upon, either submitting to a platform, making a transaction, reading or viewing something, etc.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">The average time that the user spends for the \ufb01rst time on a website is about 10 seconds before deciding if they want to \ufb01nd out more or leave the website. That was 3 years ago, now it\u2019s down to 6 seconds. Once you\u2019ve got his attention you have about 59 more seconds to convince him that your services\/products are what he\u2019s looking for.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">In order to convince him to take an action or come back to your website, you would need a mix of fresh content, simple user experience, and a great design. I\u2019ve speci\ufb01cally put them in that order because you can\u2019t have a great conversion rate with a great looking and working website without great content. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">But you could easily have it the other way around, just look at Amazon or Reddit, they have a ton of useful content but their design or user experience isn\u2019t wow. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">On the other hand, there are amazing websites that you can control them with your mobile device on the desktop, have cutting-edge technologies, even VR browsing experiences that are really fun for the \ufb01rst 2 or 3 times you visit them, share them to a friend, and then forget about them.<\/span><\/p>\n<h2 class=\"article__heading\"><b>The Content.<\/b><\/h2>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">This means that the content plays a really signi\ufb01cant part on the way you interact with the user, and we all know how fast nowadays the content is being created, each day you get to scroll through hundreds of articles, posts, videos, etc. Having weekly or monthly updated content on your website creates a fresh and dynamic look of your business and brings the Bounce Rates down. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Even though your business isn\u2019t a publication platform, show the users what you\u2019ve done lately, give them small insights into your business, if it\u2019s Instagram photos from your local burger joint or a huge multinational company.<\/span><\/p>\n<h2 class=\"article__heading\"><b>The User Experience.<\/b><\/h2>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Once you have content you start thinking about the people that you are addressing and start to create personas for which you are making the website or the app. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">This can easily be a two cutting-edge sword, either the audience is too broad and you don\u2019t really outline any identity, or you go in to speci\ufb01c and lose out to the major audience. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">For example, a great shot on Dribbble can have about 300 likes in 24 hours and a similar post on Instagram can have upwards to 1000 likes in a couple of hours. Now, before you say anything, they&#8217;re both publishing platforms, and mainly both of them use the same layout (one shot\/photo, hashtags, small descriptions, and a comment section). <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Instagram is aimed at the general public, wheres Dribbble is aimed at a very speci\ufb01c niche of designers. It\u2019s all up to you who are you targeting.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">After you de\ufb01ne the personas you start making scenarios of how will they navigate the platform, their style preferences behavior patterns and so on. Ideally, you would want to have access to a test group of people that are within your audience groups and see how they interact with your product. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">This creates a loop between testing and creating and that result is valuable real-world feedback before even hitting the market.<\/span><\/p>\n<blockquote class=\"article-quote\"><p>\u201cIf you want a great site, you\u2019ve got to test. After you\u2019ve worked on a site for even a few weeks, you can\u2019t see it freshly anymore. You know too much. The only way to \ufb01nd out if it really works is to test it.\u201d Steve Krug, Don&#8217;t Make Me Think: A Common Sense Approach to Web Usability<\/p><\/blockquote>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">A lot of designers try to educate the user using highlights, subtle cues, even tutorials for apps, all of this will just make the experience more di\ufb03cult. Don\u2019t educate the user, understand him.<\/span><\/p>\n<h2 class=\"article__heading\"><b>The Design.<\/b><\/h2>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">This is where we shine, \ufb01nally, we have all that amazing content, all the \ufb02owcharts, wireframes, case studies and we try to combine them with the brand book in order to deliver wow. A good User Interface designer will make an amazing looking product, whereas a great designer will create an extension of your brand, keeping and using all that the brand is known for, colors, fonts, icons, etc.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">The design phase is like that magic stew witches cook with all sorts of weird ingredients, and like any cook, or respectable witch, there should be only one in charge of that speci\ufb01c project. Nowadays designers are more niche-oriented, some of them are great at UI and some of them at UX, but I strongly believe that you can\u2019t have a great experience of the product if either of those elements doesn\u2019t live up to the task. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">A great looking interface without a well-thought experience behind it is totally useless, where a well-thought experience without an interface is just a bunch of boxes, spreadsheets, and placeholders, so there needs to be a coherence between both of them.<\/span><\/p>\n<p><img decoding=\"async\" class=\"article__img \" src=\"https:\/\/subsign.co\/public\/stories\/wp-content\/uploads\/2018\/09\/Compare-1.jpg\" \/><\/p>\n<h2 class=\"article__heading\"><b>LinkedIn Case Study.<\/b><\/h2>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">LinkedIn, as many articles and blog posts suggest, has a bit of an identity crisis, they\u2019re not really sure if they want to be a publishing platform or a social media one. Both of them have one common goal, to keep the user focused on the content, this is their biggest Call to Action, scroll. The main di\ufb00erence between them is the quality and the quantity of the content.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Let&#8217;s look at that into more detail, Medium is a great publishing platform, they have curated articles, editor picks, reading history, etc. its really easy to \ufb01nd a speci\ufb01c company or publisher, read their articles and start following them. In most of the cases, chances are you will be following them because of the content and not because you know them or are related to them.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">On the other hand, you have social media, which has tons of content, but not really quality content. Here you follow friends, relatives, acquaintances, people you like, look up to, but the content you expect to see it\u2019s not really speci\ufb01c, it\u2019s more like a mix of videos of cats, random things, fashion posts, angry people and so on. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">You don\u2019t really know what is going to see in the next post. But this is actually good because here is where the majority of users are, and just like in the Dribbble\/Instagram example from above you get a lot of views and engagement (if you target the right people).<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Let\u2019s go even deeper, and analyze the user experience patterns for both of them. Publishing platforms (Youtube, Reddit, Medium, etc.) show you the content \ufb01rst and then secondary, you will see a Botton or an option that would allow you to add content, and depending on the platforms there are several small steps you need to go through before publishing it. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">A social media platform is more focused on actually adding content, Facebook has a big \u201cWhat\u2019s on your mind\u201d section above all the other content, and you don\u2019t need to go through any steps, you just upload a photo, or write anything that\u2019s on your mind and hit enter.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\"> Same applies to Instagram, you open the app and you have the option of adding a photo to your timeline or a story, not to mention Snapchat which just opens up your camera when you access the app.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">The problem with LinkedIn is that if they go with the social media platform approach they will get a lot of cat videos and random content, whereas if they go into the publishing platform users won\u2019t connect as easily with companies and vice-versa.<\/span><\/p>\n<p><img decoding=\"async\" class=\"article__img \" src=\"https:\/\/subsign.co\/public\/stories\/wp-content\/uploads\/2018\/09\/Redesign.jpg\" \/><\/p>\n<p class=\"article__para\"><span class=\"text-bold\">The Redesign.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Keeping in mind everything we\u2019ve discussed earlier I\u2019ve decided to put together all the knowledge beforehand and come up with a more coherent experience and a more uni\ufb01ed interface between the desktop version, the brand guidelines, and the mobile app. In order to do this, we\u2019ve made target personas that would use the app and showed them the actual app. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Their feedback was really useful, having a lot of questions about the existing layout i.e.: \u201cwhat are all those buttons on the header?\u201d, \u201cwhy is there the bookmark icon not aligned with the rest of the action buttons in the posts?\u201d, \u201cwhat exactly are those buttons in the footer, especially the briefcase?\u201d and many more.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Having in mind these questions as well as our own ideas and suggestions we\u2019ve come up with a more coherent and cleaner app that would make the users&#8217; journey really simple.<\/span><\/p>\n<p class=\"article__para \"><img decoding=\"async\" class=\"article__img \" src=\"https:\/\/subsign.co\/public\/stories\/wp-content\/uploads\/2018\/09\/Header.jpg\" \/><\/p>\n<p class=\"article__para\"><span class=\"text-bold\">Header.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">I understand that the background color is really important to the brand values, but I think that works great with really easy to recognize colors, like Facebook or Youtube. In our redesign, we\u2019ve decided to go with a simple, white background and use the actual logo to showcase the brand.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Another direction everyone\u2019s taking is making the avatar round, at \ufb01rst Instagram, and then Facebook, now LinkedIn. Think Di\ufb00erent, is everyone zigs, let\u2019s zag, especially that we have the rounded edge square from the \u201cin\u201d, let\u2019s use that on all the avatars (even if their companies or users).<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">One of the most debated features we\u2019ve needed to redesign was the search section from the header, do we make it a button and keep the rest of the design simple and clean, or do we make it an input \ufb01eld on that would take up almost the entire header but it would remove another tap from the users journey. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">The \ufb01nal decision (the search button) was based on the users&#8217; behavior and could be put to an A\/B Testing period later on when the app would go live. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">If the users come to this platform just to search for speci\ufb01c people or companies, then yes, let\u2019s go with the input \ufb01eld, but his means that the users will miss the most important Call-to-Action, scrolling down to see more posts. If the users just come to the app for new content, articles, and updates, then let\u2019s keep it as it is, mainly because this promotes the content.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Promoting the content is really important, but in order to promote it, you would need users to post it. Keeping this in mind, and answering the users&#8217; questions, we\u2019ve decided to make it dead simple and using the LinkedIn color codes added 4 new buttons that boost conversion. Just with a glance, users understand the type of content they can add, and who simple it is.<\/span><\/p>\n<p><img decoding=\"async\" class=\"article__img \" src=\"https:\/\/subsign.co\/public\/stories\/wp-content\/uploads\/2018\/09\/Content.jpg\" \/><\/p>\n<p class=\"article__para\"><span class=\"text-bold\">Content.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">We\u2019ve kept the overall layout, however, we\u2019ve made them more coherent, same round shapes from the avatar are now found in the post image, and in the referral feature as well. The post interactions are now simpli\ufb01ed, we don\u2019t need to have a link button, and read above the number of likes. <\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">The same applies to the rest of the options, and now we\u2019ve brought the bookmark option bellow, with the rest of them.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">If there is now, bookmark option, then we would should a di\ufb00erent option or remove it all together.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">When someone is interacting with a post (a friend of yours liked or commented on something) we will highlight that even more, by using the full icon of that speci\ufb01c action. Also, that speci\ufb01c post that they have interacted with will be shown on with a di\ufb00erent color.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">We\u2019ve also decided to go with a more spaced font, that would be easier to read but at the same time would have the same overall type shape as the logo. For this, we\u2019ve decided to go with the Gotham Font Family, especially the Book and the Bold styles.<\/span><\/p>\n<p><img decoding=\"async\" class=\"article__img \" src=\"https:\/\/subsign.co\/public\/stories\/wp-content\/uploads\/2018\/09\/Footer.jpg\" \/><\/p>\n<p class=\"article__para\"><span class=\"text-bold\">Footer.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">The existing LinkedIn App footer has 5 buttons without a description, and like our persona tests, most of them don\u2019t understand their functions. The current one has a very similar icon used for the message icons as the one used for the post comment.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">Here we\u2019ve decided to simplify it even more, removing the jobs icon, and moving it into the search option from the header. It\u2019s the same search behavior as searching for a job or a company so it only makes sense to use it in the same section.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">The message icon is now di\ufb00erent from the comments, and all of the icons are now full (for a greater visibility) and have descriptions. Also, we\u2019ve decided to replace the home icon with the more recognizable \u201cin\u201d icon.<\/span><\/p>\n<h2 class=\"article__heading\"><b>Final Notes.<\/b><\/h2>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">We really appreciate the work LinkedIn has put into their Desktop and overall image in the last years, and certainly don\u2019t want to say that their mobile app does not live up to their standards, however, we do think that it needs a redesign and it needs to be taken to our time and age.<\/span><\/p>\n<p class=\"article__para\"><span style=\"font-weight: 400;\">It\u2019s simple, just listen to your audience and try to be di\ufb00erent, stand out from the crowd.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Basics. Let\u2019s start with the beginning, websites and apps have the main purpose of delivering a message from which the user can act upon, either submitting to a platform, making a transaction, reading or viewing something, etc. The average time that the user spends for the \ufb01rst time on a website is about 10 seconds [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1815,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/posts\/1803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/comments?post=1803"}],"version-history":[{"count":13,"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/posts\/1803\/revisions"}],"predecessor-version":[{"id":1920,"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/posts\/1803\/revisions\/1920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/media\/1815"}],"wp:attachment":[{"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/media?parent=1803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/categories?post=1803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/subsign.co\/stories\/wp-json\/wp\/v2\/tags?post=1803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}