Image for post
Image for post

LinkedIn Case Study: Page suggestions drawer on mobile

I’m a designer on the Pages team at LinkedIn. Pages are the LinkedIn profiles of organizations such as companies and schools.

Problem & opportunity

How might we increase discoverability of relevant pages for LinkedIn members?

There are 2 sides to this problem:

  1. Page admins want to find more ways to engage new followers. We have observed that members typically only follow well known brands. While smaller businesses account for 80% of LinkedIn pages, they find it exceedingly difficult to stand out.

Project goal

Scope

  • Phase 2: If proven successful from test, desktop designs will be built

Target audience

Success metrics

  1. Increase in page visits

Initial Research

  • Choice of metadata displayed in the profile cards
  • Flow — whether it’s permanently on the page or only appears through relevant action
  • Relevance algorithm — how accurate are the suggestions, and how many should be shown at once?
Image for post
Image for post

Currently the only place members can discover new pages is on the My Network tab. Not only is it hidden under a tab, one must scroll very far down the page to reach the page suggestions (most of the page is focused on profile suggestions in your network).

Image for post
Image for post

I also posted a question on LinkedIn to ask my connections why they would follow a page. Although this is not a conclusive research method, it at least provided some leads on what information would be most important to members.

Image for post
Image for post

Based on comments, I gathered the following points:

May follow for:

  • job seeking
  • interesting or employee/culture/industry-related content
  • reputation of the company
  • company to show up in their Interest section of profile

Will not follow:

  • pages they don’t support

Design principles

Clear and informative: It should be clear why this is shown to the user. How can we surface the right information to pique user interest?

Contextual, not intrusive: The experience should be timely, relevant, and not disrupt from the user’s intent. Height and space should also be considered.

Design explorations: Initial brainstorming

Image for post
Image for post
Home tab of a page (Medium company as an example)

I sketched out many different formats for how the feature could appear — here are just a few of many models I explored:

Image for post
Image for post

The content in the card will influence users’ decisions to visit or follow a page, so I sorted metadata based on initial assumption of importance, and looked at how the cards could be formatted:

Image for post
Image for post

After weighing the pros and cons of each design, we honed in on patterns we felt strongest about:

  • Carousels: It can surface a lot of suggestions without taking up more space, and is a familiar pattern
  • A full page modal: An immersive experience in the mind set of discovering
  • Reusable component: Can this feature be applied with any LinkedIn entity such as profiles, groups and events? (at LinkedIn, we can’t all be making our own version of everything!)
  • Cover image: It’s actually quite nice seeing the cover image paired with the logo! This may also encourage more admins to upload one on their page to attract new followers

Design explorations: High fidelity

Image for post
Image for post

My thinking on a flexible card that can house different amounts of information. I wanted to ensure this component could be leveraged by other teams as well:

Image for post
Image for post

To touch on some of the reasons I gathered at the beginning on why members might follow pages: I explored personalized metadata we could show (such as hashtags, new updates and relevant jobs to the member):

Image for post
Image for post

After rounds of design iterations and design reviews, we narrowed down to the following two concepts:

Image for post
Image for post

Quick research: Intercepts

Image for post
Image for post
Photo cred: Invisionapp.com

I asked 4 participants (mix of students and professionals) to play with each prototype. Besides first impressions, the two main questions I wanted to know were:

  • What metadata is most important in the entity cards describing a Page?
  • Which design did they prefer, if they had a preference?

Finding summary

Participants who preferred Concept B liked the experience of browsing the content in a larger space. However, they would only click into the banner if they had intent to, and they suggested to have more sorting options to know what to focus on since they’re shown a lot more pages at once.

Overall…

  • The right metadata intrigues members to engage with new pages they are not familiar with. One example brought up was network connections, that matters when looking for new pages to check out.
  • People want the flexibility of being able to weave in and out of discovery experiences

Final designs

Image for post
Image for post
Image for post
Image for post

Design notes

Full page browse: With this hybrid design, it allows for a lighter weight experience, while allowing those with further intent to immerse into a bigger browsing area.

Entity cards: The cards you see in the full page experience is an existing component we have at LinkedIn. We always try to align and use the same patterns as much as possible with other teams. However in this case, the cards are too tall and wouldn’t completely be above the fold on some smaller mobile devices. This is why we deviated and created a card shorter in height. Unfortunately this meant sacrificing the cover image, but that is something we can incorporate and test when building the desktop web version, which will have a lot more room.

Relevance: Another project was underway to improving our relevance, but in the meanwhile with our limitations, we wanted to make it clear how these suggestions were being generated. It’s why we titled it “Pages people also viewed”

Metadata: We decided to try A/B testing two variants to see which would perform better. Our hypothesis was that connections get more engagement, since we heard it from intercept. If this proved true, then it would also benefit smaller businesses to not have their number of followers be the defining factor of why someone should visit their page.

Image for post
Image for post

Accessibility & localization: At LinkedIn, we care a lot about inclusive design — our specs always consider colour-blind and screen reader users. And because our platform is used internationally, we always have to consider how text grows in long languages, right to left languages and any potential offensive icons.

Image for post
Image for post

Outcomes

Later in the year, we designed and built the desktop version, which drove +2.6% SWI page follows and +2.14% SWI productive follows. Based on result of the A/B test we did on mobile, we stuck with connections as the metadata line.

Image for post
Image for post
Snapshot of desktop version

The pattern is in progress of expanding to all entities to use on LinkedIn (profiles, groups, events, etc) as a way of surfacing relevant suggestions for members. This initiative is being carried on by another team

Overall, this project which thought to be small, ended up driving exciting impact for our admins, as well as creating simple way for members to discover new pages and content.

Hope you enjoyed this case study 😺 Follow me for more in the future. Would also love to hear from you in the comments!

Written by

UX Designer at LinkedIn — tracycai.com 🎈

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store