LinkedIn

View Prototype

LinkedIn

Contents

Context

Problem

Challanges

Wireframe / Notes

Outcome

Thoughts

Role

Product Designer

User Testing

Prototyping

User Researcher

View Prototype

Context

NOTE: I did not work at LinkedIn, this is just a personal redesign.
LinkedIn is the World's Largest social platform for professional use. They have many different kinds of followers, including job recruiters, small/big business owners, CEOs, students, etc.‍ As a UX/UI designer, my main focus was to create a marvelous yet easy navigation web page. I only target the user's homepage because this was my first project, and LinkedIn is a vast website to redesign.

Problem

Although LinkedIn is a very dynamic webpage, its readability is very poor. It had unnecessary pop-ups that added additional clicks, were too crowded because of their outdated layouts, and things that were twice on the page. Such as Connections CTA, Messaging bar, Home icon, and "Try premium-free." An example of poor readability would be, messaging bar was overlapping the "News" card.

Goal

My primary goal was to remove unnecessary items and make them look simpler with fewer clicks as possible. I also wanted to create an eye-catching User Experience that flows with the layout and gives better readability while keeping it professional.

Initial Wireframe / Notes

Notes

Research / Functionality

I started by researching the sizes of icons, images, posts, search bar, and functionality. Based on my research, I started writing down my ideas.

Navigation Bar

Work Navigation

Main Page

After researching and writing down my ideas, My next step was to create Hi-Fi wireframes and layouts.

Challenges

As I was starting, I thought this project would be easier to work on, and that did not go as well. One of my challenges was developing the layout that demonstrates all the functionality while keeping it simple for professional use. Guiding users to their designated pages was another obstacle that kept me stuck, such as figuring out how to group similar functionality like creating a "company page" and "event page." These were the few challenges that I came across while designing this webpage. Although this was my first project, I tried my best to solve the problem while keeping it simple.

Style Guide

I choose to keep the same color that representing it's branding; however, I changed the fonts for better modern readability.

#0077BF

#F8F3EC

#283E4A

#000000

#FFFFFF

Heading - Myraid Pro BOLD, Size 20

Heading 2 - Source Pan Pro REGULAR, Size 20

Body - Source Pan Pro REGULAR, Size 15

Heading - Myraid Pro BOLD, Size 20

Heading 2 - Source Pan Pro REGULAR, Size 20

Body - Source Pan Pro REGULAR, Size 15

Final Outcome

Click for XD prototype

Homepage

To solve the clutter and improve the readability on the homepage, I started by cleaning up navigation. Based on F Pattern reading, I put the profile section on the right and the news feed on the left.

Navigation

I removed navigation menus and put them under the hamburger menu, followed by connections. The idea behind this was to make the navigation bar more organized and easy to create connections simultaneously.

Navigation

I removed navigation menus and put them under the hamburger menu, followed by connections. The idea behind this was to make the navigation bar more organized and easy to create connections simultaneously.

Work Navigation

One of my challenges was to combine “create event page” and “create a company page.” To do this, I combined the functionality of creating pages in one place. In addition to, LinkedIn’s other products and their other services.

Work Navigation

one of my challenges was to combine “create event page” and “create a company page.” To do this, I wanted to combine the functionality of creating pages in one place while a user can look at LinkedIn’s other products and their other services.

Messaging Bar

To solve the overlapping problem, I create a message bar under the profile section that functions as a pop-up menu. For more comfortable and faster access to messages, I put the search bar on the bottom.

Messaging Bar

To solve the overlapping problem, I create a message bar under the profile section that functions as a pop-up menu. For more comfortable and faster access to messages, I put the search bar on the bottom.

Thoughts

Lastly, I thought it would be easier to work on this project since many things needed to change. But while working on it, I realized that changing the whole layout while keeping the users in mind is hard. However, working on this project was a gratifying experience and a lesson to learn. From my experience, this website has so much potential to grow that it can help people build connections, which made me more passionate. After lots of failures and errors, I did complete the goal that I set, which was to make clear readability, easy to navigate, and removing repeated things. In the future, I will be adding hashtags navigation that will ease the user experience even better.

Checkout Other Projects

Coffee Break

Business App

Darbe

A Philanthropy Platform

Spirit

Productivity App

About

Contact

Resume

Designed By Jeet

JP.

JP.

Projects

About

Contact

Resume