LinkedIn: Reimagining the iOS App (Game of Thrones Mash-Up)

Unsolicited redesign of LinkedIn’s iOS app by Jeff Shibasaki

Unsolicited redesign of LinkedIn’s iOS app by Jeff Shibasaki

Part 1: The Challenge

Background

LinkedIn is a social network and job search board for professionals, companies and recruiters with 740 million registered members from 150 countries.

Problems

Users need a way to quickly check in with their network on iOS. Currently, they have to scroll through posts, recommendations, reactions, comments and more –– all without any indication if there are any new posts from the people, pages, groups and hashtags they care most about. If the Home tab doesn't provide a solution to easily sort and filter posts, it could lead to reduced user engagement.

Users also need a way to quickly access bookmarks, insights (e.g. profile views, post views, search appearances) and notifications on iOS. Currently, they have to navigate to their profile to view bookmarks, check insights and navigate around the app to clear notification badges from the My Network tab, Notifications tab and Messaging icon. If the bookmarks, insights and notifications can't be managed easier, it could cause friction with new users and lead to reduce engagement with current users.

Solutions

  1. Provide multiple ways to sort and filter posts, so users can quickly check in with their network or jump into a filtered feed to interact with the posts that interest them

  2. Combine expert curation on the check in screen to give users more personalization and LinkedIn a better way to promote their free services (e.g. Jobs, Events, Articles) and paid services (e.g. LinkedIn Learning, LinkedIn Premium). That helps both users and the business  –– shared value.

  3. Replace My Network with a Collections tab, so it’s easier to access bookmarks and filter recommendations to connect/follow

  4. Combine notifications, messages and insights into a single screen with a segmented control to improve the app’s navigation and make clearing notifications, checking insights and messaging others easier and more fun

If this were a real project, I'd know my hypotheses and solutions to be true if the number of active devices, sessions and retention rates significantly increased.

Scope

Since I didn’t have access to user research, I relied on my own frustrations with the LinkedIn app to lead my decisions. While I could've designed several more LinkedIn Today sections (e.g. documents), plus an Account and Post Screen, I limited myself to the story I wanted to tell in the video prototype. I designed all of the screens for iPhone 12 Pro Max.

Roles

  • Information architecture

  • Interaction design

  • Content writing

  • UX writing

  • Visual design

Tools

  • Sketch

  • Pixelmator Pro

  • Keynote

Copyright

People in my designs are based on the characters from the book series, A Song of Ice and Fire by George R.R. Martin. Icons are from SF Symbols and the Noun Project. The LinkedIn logo is a copyright of LinkedIn. The Tower of Joy photo is from Wikipedia. All other photos (except the Wildfire app) are copyrights of HBO and WarnerMedia.

 

Part 2: The Process

Screen 1: Home → LinkedIn Today

linkedin-today-before.png
linkedin-today-after.png

What I did

  • Designed and wrote 21 horizontal scrolling sections to help users sort and filter posts by update, post type or recommendation. To interact with posts (i.e. react, comment, share, save, etc.), users tap See All to enter the filtered feed.

  • Used characters from A Song of Ice and Fire (book series) and images from Game of Thrones (adapted TV series) to populate the content in my designs. I chose this fictional universe because there’s a large cast, nearly everyone has a title and most people are familiar with the books or TV series which makes the designs more fun than stock photos.

  • Followed LinkedIn’s brand colors to differentiate each section

  • Added icons from SF Symbols and the Noun Project on this screen and throughout the app to provide supplemental information and inform users what will/has happened

  • Used title case instead of sentence case on this screen and throughout the app to better differentiate interface elements

  • Created a style guide for terms found in the app –– LinkedIn Today, Collections, Inbox, Insights, Post Button, Post Card, Promoted Card, Comment Card, Connect Card, Follow Card, Notification Card, Bookmarks, Professional Profile, Company Profile, Group Profile, etc.

  • Renamed Pages to Company Profile to standardize the naming convention of LinkedIn landing pages

  • Made all profile photos round to unify the interface

  • Added controls to sort posts by All Posts, Connections, Following, Groups, Companies, Hashtags, Contacts, Teammates and Newsletters

  • Added a search button. When users tap the button, the search page slides in from the right. When scrolling the page, the search button transforms into a search bar. You can see this in the LinkedIn Today sections below.

  • Wrote microcopy to inform users how post types and recommendations are selected

  • Limited post previews to 2 lines and used an ellipsis to indicate when there’s more text

  • Redesigned the tab bar to be more useful and encourage sharing with the Post Button. While this raised center button is more complicated to develop, it helps to further distinguish LinkedIn from other apps.

  • Renamed the Home tab to LinkedIn Today since Home isn’t specific (I know lots of apps do this, but that doesn’t make it right) and since LinkedIn confusingly calls this Home, Homepage and Feed in their knowledge base and other places. I also removed Jobs since they’re curated on LinkedIn Today in my designs, can be searched and filtered in the Search Bar, plus saved jobs appear on the Collections tab. See Screen 5 for why I changed My Network and Screen 7 for why I changed Notifications.

LinkedIn Today: Sections 1–3

What I did

  • Designed and wrote a Top Posts section, so users can quickly browse the most popular posts from their network or tap See All to enter the filtered feed

  • Designed and wrote an Updates section, so users can quickly browse updates or tap See All to enter the filtered feed

  • Designed and wrote a Videos section, so users can quickly browse posts with videos or tap See All to enter the filtered feed

LinkedIn Today: Sections 4–6

What I did

  • Designed and wrote Promoted sections with a CTA button to differentiate promoted buttons (black) from primary buttons (blue) and secondary buttons (white). There are four promoted sections on LinkedIn Today and five in my solution.

  • Designed and wrote a Collections section, so users can quickly browse saved bookmarks or connect and follow people, companies, hashtags and groups. Tapping one of these cards opens their corresponding section and tapping See All opens all of them.

  • Designed and wrote a Photos section, so users can quickly browse posts with photos or tap See All to enter the filtered feed

LinkedIn Today: Sections 7–9

What I did

  • Designed and wrote a Text section, so users can quickly browse text-only posts or tap See All to enter the filtered feed

  • Designed and wrote a Links section, so users can quickly browse posts with links or tap See All to enter the filtered feed

  • Designed and wrote a Polls section, so users can quickly browse posts with polls or tap See All to enter the filtered feed. Also, I imagined LinkedIn adding Unsplash support to make polls more engaging with free images instead of just buttons.

LinkedIn Today: Sections 10–12

What I did

  • Designed and wrote a News section, so users can quickly browse recommended news and conversations from LinkedIn News or tap See All to view in a list.

  • Designed and wrote a Connect vs. Follow section to support new users and remind current users of the difference between connecting and following on LinkedIn since people are often confused. Tapping any of these cards brings users to a short explainer video.

  • Designed and wrote a Courses section, so users can quickly browse recommended LinkedIn Learning courses or tap See All to view in a list

LinkedIn Today: Sections 13–15

What I did

  • Designed and wrote an Events section, so users can quickly browse recommended events or tap See All to view in a list

  • Designed and wrote a Jobs section, so users can quickly browse recommended jobs or tap See All to view in a list

  • Designed and wrote a Profile section to support new users and remind current users how to complete their profile and reach All-Star status. Tapping any of these cards brings users to a short explainer video.

LinkedIn Today: Sections 16–18

What I did

  • Designed and wrote an #IronThrone section, so users can quickly browse posts with this hashtag or tap See All to enter the filtered feed

  • Designed and wrote a Featured section, so users can easily discover new people, companies and courses, plus try to get featured by improving their Profile with an All-Star status

  • Designed and wrote a Reactions section (e.g. like, celebrate, support, love, insightful, curious), so users can quickly browse posts with reactions or tap See All to enter the filtered feed

LinkedIn Today: Sections 19–21

What I did

  • Designed and wrote a Comments section, so users can quickly browse posts with comments or tap See All to enter the filtered feed

  • Designed and wrote an Activity section, so users can quickly find or review their LinkedIn activity or tap See All to view in a list

  • Designed and wrote a LinkedIn Premium section, so users can easily understand the benefits of LinkedIn’s paid services. Tapping each of these cards brings users to their respective in-app landing page.

Screen 2: Home → All Posts

linkedin-all-posts-before.png
linkedin-all-posts-after.png

What I did

  • Added a back button and label since this screen’s been accessed from LinkedIn Today

  • Designed and wrote Post Cards that use standard iOS iconography. Also, instead of the three-dot menu, users can left-swipe the cards for additional options just like the Promoted Post on LinkedIn Today above.

  • Designed and wrote a Promoted section that’s consistent with other promoted sections on LinkedIn Today

Screen 3: Post Details

linkedin-post-details-before.png
linkedin-post-details-after.png

What I did

  • Added a back button and label since this screen’s been accessed from Tyrion’s Posts

  • Made the profile photo and details larger and centered them to differentiate this page from a list of posts in a feed

  • Added a sort button and label to sort by time or relevancy

  • Designed and wrote Comment Cards. To indicate a thread of comments, I stacked the cards. Tapping the top card expands the thread.

Screen 4: Profile (Viewing a Connection)

What I did

  • Added a back button and label since this screen’s been accessed from Tyrion’s Post Details

  • Expanded the photo to create a more visually appealing Profile with a better hierarchy to improve readability. I also added color from the profile photo’s background to further personalize the page.

  • Added a three-dot menu for additional options since the Profile isn’t a card that can be swiped like Post Cards

  • Added a button to message the connection

  • Added a shared list of connections and a Summary section with text boxes

Screen 5: My Network → Collections

What I did

  • Designed and wrote a horizontal scrolling header to recommend people, companies and groups to follow. Not only does this help users discover more recommendations, but it’s also a new location to add promoted and non-promoted recommendations.

  • Designed and wrote 3 sections (Bookmarks, Who to Connect with, Who to Follow). There could be more collections, but I limited myself to these essentials.

  • Added a search button. When users tap the button, the search page slides in from the right. When scrolling the page, the search button transforms into a search bar. You can see this in the Collections below.

  • Renamed My Network in the tab bar to Collections since a user’s network is made up of their 1st-degree, 2nd-degree and 3rd-degree connections, plus members of groups –– not pages, hashtags, events and recommendations.

Collections: Sections 1–3

linkedIn-collections-sections-1-3.png

What I did

  • Designed and wrote a Bookmarks section, so users can easily access saved bookmarks. I also renamed My Items to Bookmarks because it’s more specific and doesn’t sound like things in an online shopping cart.

  • Designed and wrote a Who to Connect with section, so users can easily browse recommendations

  • Designed and wrote a Who to Follow section, so users can easily browse recommendations

Screen 6: My Network (Section) → People from Your Area

linkedin-connect-recommendations-before.png
linkedin-connect-recommendations-after.png

What I did

  • Added a back button and label since this screen’s been accessed from Collections

  • Added an orange header that corresponds to the People from Your Area collection to remind users what they tapped and who they’re connecting with

  • Added a search button. When users tap the button, the search page slides in from the right. When scrolling the page, the search button transforms into a search bar.

  • Designed Connect Cards with profile photos and buttons

  • Wrote a confirmation message to inform users when a Connection Request has been sent and where they can find accepted requests (see part 3 to view this in action)

Screen 7: Notifications → Inbox

linkedin-inbox-before.png
linkedin-inbox-after.png

What I did

  • Renamed Notifications in the tab bar to Inbox

  • Renamed Messaging to Messages

  • Renamed Your Dashboard to Insights

  • Added a segmented control for Notifications, Messages and Insights to create a unified inbox where all incoming information can be easily accessed.

  • Designed Notification Cards to be similar to Post Cards except they all have buttons that inform users what to do next

  • Added buttons under Notification Cards for additional options. Notification Cards can also be quickly left-swiped to delete.

Screen 8: Profile (Viewing a Connection Request)

linkedin-profile-after.png
linkedin-profile-before.png

What I did

  • Added a back button and label since this screen’s been accessed from the Inbox

  • Expanded the photo to create a more visually appealing Profile with a better hierarchy to improve readability. I also added color from the profile photo’s background to further personalize the page.

  • Added a three-dot menu for additional options since the Profile isn’t a card that can be swiped like Post Cards

  • Added buttons to Connect or Ignore. I put connect on the right since most people are right-handed which makes it easier to accept a connection request. Also, I changed the button text from Accept to Connect because it clearly informs users what they’re accepting –– a new connection.

Screen 9: Messaging → Messages

linkedin-messages-before.png
linkedin-messages-after.png

What I did

  • Added a back button and label since this screen’s been accessed from the Inbox

  • Added a three-dot menu for additional options

  • Enlarged the profile photo of the person the user is messaging at the top of the screen. When the user scrolls or begins to write a message, the size is reduced

  • Added the message that Tyrion sends to Jon Snow via a raven on Game of Thrones (season 7, episode 2) with a timestamp

  • Added a large field to compose messages and wrote hint text

  • Added a pencil icon to show LinkedIn’s Smart Replies. If the user doesn’t select a Smart Reply and starts writing a message, the pencil icon transforms into a blue send button

  • Added icons to quickly start meetings, select photos, open the camera, attach a document or mention someone. All of these icons inform users how they can start a message. Once the user begins typing, these options are then tucked behind a chevron (see Part 3 to view this in action).

 

Part 3: The Solution

I combined all of the LinkedIn Today sections and subsequent screens into a video prototype to illustrate how users can quickly check in to see what's happening in their network, get more personalized recommendations, easily access bookmarks, clear notifications and respond to messages.

 

Final Thoughts

By giving users multiple ways to sort and filter posts, plus making the app more helpful with expert curation, more intuitive with a navigation overhaul and more attractive with a modern visual design all improves the app’s look, feel and usability. It's time to redesign the LinkedIn app.

Jeff Shibasaki

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque nisl massa, et vestibulum mauris ultricies vitae. Nulla a quam et magna tristique luctus eu ac eros.

https://jeffshibasaki.com
Next
Next

Frontera: Creating a More Effective Content Strategy