LinkedIn Redesign for Enhanced Accessibility

Reimagining LinkedIn's user experience for improved accessibility and user interaction

Role
Product designer
Team
Self-initiated
Timeline
Nov 2024 (2 weeks)
Instructor
Elyse Voegeli

Redesign Overview:

This redesign introduces ideas to further enhance the overall user experience while acknowledging LinkedIn’s commitment to accessibility. By improving navigation, readability, and content interaction, this project aims to empower professionals of all abilities to engage fully with the platform.

Streamlined Navigation
for a Seamless LinkedIn Experience

The top and left navigation bars have been combined into a unified, simplified left navigation module. This streamlined design organizes LinkedIn’s existing pages into three essential key activities: Networking, Job Search, and Resources (Content Discovery). This integration enhances user accessibility and helps users efficiently navigate their professional activities.

Enhanced Readability
for an Inclusive LinkedIn Feed

The home feed experience has been redesigned to improve readability and legibility. A topic filter tab is now available above posts, allowing users to quickly find content relevant to their interests. Longer posts feature titles and AI-generated summaries, making the feed more accessible for screen reader users and individuals with mental disabilities or dyslexia.

Smart Posting Features
for Enhanced Engagement and Accessibility

When posting, users are required to add a title for posts exceeding 180 words. To streamline this process, users can choose an AI-suggested title generated from their content, or they can delete it and create a custom title. They also have the option to disable the AI summary feature if they find it unnecessary. This approach ensures greater post clarity, accessibility, and flexibility, empowering users to share their content in the way that suits them best.

Design Audit: Positive Observations

Design Audit: Positive Observations

Effective Semantic Structure

LinkedIn uses semantic HTML elements effectively, ensuring navigation, buttons, and headers match their roles. This helps screen reader users navigate easily. The platform also provides keyboard shortcuts for faster, more accessible interaction.

Accessible Carousel Posts and Chart Navigation

LinkedIn allows PDF attachments in carousel posts that VoiceOver can read without downloading. Users can navigate chart data points with detailed explanations.

Adequate Color Contrast

LinkedIn meets WCAG AA guidelines for color contrast, as verified with a color contrast checker and colorblindness simulator, ensuring good visibility for users with visual impairments.

Design Audit: Areas for Improvement

Design Audit: Areas for Improvement

Complex and Overwhelming Navigation

LinkedIn offers a wealth of features, but they are difficult to find and use due to poor navigation design. This creates a challenge, particularly for first-time users, and even regular users may remain unaware of certain features because the platform feels too complicated to explore.

Design Inconsistency

The platform’s constantly changing layouts and patterns among pages make it difficult for users to predict interactions and navigate effectively. The inconsistent use of buttons, links, and tabs for different functions adds to the confusion, highlighting the need for a simplified and cohesive design system.

Limited Mobile Screen Reader Experience

While LinkedIn excels in web-based screen reader accessibility, the mobile experience falls short. Users cannot easily drag their finger across the feed to hear content, as posts are segmented into separate frames. This forces users to tap repeatedly within each frame to understand a post, making the experience cumbersome and inefficient.

Mapping Clarity Through Information Architecture

Mapping Clarity Through Information Architecture

To redesign the navigation experience and simplify patterns, I mapped out the information architecture to precisely understand how pages are organized and connected. This exercise helped identify high-priority areas that cause the most user confusion.

Structuring Features to Match User Expectations

Structuring Features to Match User Expectations

After mapping out how information is distributed across LinkedIn, I contemplated how to reorganize the features and pages to enable more intuitive user navigation. It became clear that some features were misplaced within the platform. To address this, I identified three primary user activities on LinkedIn: networking, job search, and content discovery. I then asked myself and consulted with friends to determine which features best aligned with each key activity.

Design Iteration: Crafting the Most User-Friendly Navigation Bar

Design Iteration: Crafting the Most User-Friendly Navigation Bar

Based on previous research and a quick UI design audit of other complex platforms like Instagram, Reddit, X (Twitter), Threads, and Medium, I began redesigning LinkedIn’s unified, fixed navigation bar. After numerous iterations, the final design emerged as a clean and user-friendly solution.

Design Iteration: Balancing Intuition and Innovation in Post Titles

Design Iteration: Balancing Intuition and Innovation in Post Titles

I redesigned the posting experience to require a title for posts over 180 words, with an AI-suggested title that users can accept, delete, or replace. The challenge was ensuring this felt intuitive and unpressured for users. Initially, I considered placing the title input below the paragraph, but it felt unconventional and cluttered the lower section, which already includes various buttons. To resolve this, I positioned the title input below the profile section, allowing it to drop down when needed. The AI-suggested title was designed as a tag for clarity, inspired by Gmail’s familiar format.

Ensuring Accessibility Through a Consistent Design System

Ensuring Accessibility Through a Consistent Design System

A design system is essential for accessibility as it ensures consistent design and proper semantic structure, enabling screen readers to interpret content accurately. This consistency helps screen reader users navigate and understand interfaces seamlessly, enhancing their overall experience. This style guide was applied throughout the project to maintain accessibility best practices.

Areas for Further Improvement

#1. Optimizing Mobile Feed for Screen Reader Users

Enhancing the mobile screen reader experience involves enabling continuous reading so users can seamlessly hear posts without repeated taps. Developers should optimize touch navigation and structure posts as cohesive, accessible units for smoother interaction. 

#2. Encouraging Users to Add Alt Text for Improved Accessibility

To enhance image accessibility, LinkedIn can guide users to add alt text when uploading images. This could be achieved through subtle prompts or reminders during the upload process, educating users on the importance of alt text for visually impaired individuals. Implementing a simple, user-friendly interface for adding alt text ensures more inclusive content creation across the platform.

ⓒ Sammie Lee 2024

ⓒ Sammie Lee 2024

ⓒ Sammie Lee 2024

ⓒ Sammie Lee 2024