Experience design for comparing LinkedIn's Talent Solutions products

LinkedIn Cover Image

Project Info

Client
LinkedIn
Timeline
2021-2022, 5 months, fully remote
My Role
Sr UX Designer
Team
Close collaboration with UX Research & content designer
Deliverables
Product Strategy
Wireframes
Prototype
LinkedIn is the world's largest professional network. I focused on the Talent Solutions website, which offers a range of products for hiring professionals to find, attract and recruit talent. The mission of LinkedIn is simple: connect the world’s professionals to make them more productive and successful.

The Problem

Hiring managers have a hard time deciphering between products and determining which are right for their needs. 

After customer and product management conversations, the “why” of people having trouble became clear—products weren’t listed clearly, there was no true comparison tool, and there was no comprehensive resource for all the products within the Talent Solutions site.

Internally, customer service was spending a lot of time on the phone helping customers determine which products were right for them.

The Solution

I needed to revisit the structure of the website, including the information architecture of how products were organized, and determine how new features could clearly outline Talent Solution offerings.

View final solution ↴

↴

The Process

I was the sole UX Designer for this project while the UX Researcher was responsible for determining the problem and leading testing. I was brought on to the project after the problem area was identified via phone calls with customers via sales representatives and internal stakeholder interviews.
LinkedIn Process
Discover & Define

To bring myself up to speed, I reviewed a large amount of documentation, including the interviews themselves and user personas. I familiarized myself with the current experience and other LinkedIn marketing websites to determine problem areas and commonly used interaction patterns. I also worked closely with the content designer to ensure I understood the product offerings, as well as previous explorations and business decisions. I completed a site audit to determine user problems.

Site audit

The problem areas were organization, clarity and consistency.
01

Inconsistent product naming and categorization.

02

Didn't show all available products in one area, or include clear product descriptions—even on the all products page!

03

Header and footer navigation product listings differed from each other.

04

Inconsistent styling and information architecture, unclear copy.

I participated in a design jam to prioritize features
Simultaneously, research led a brainstorming session with key stakeholders to help narrow design options, which were combined from previous management interviews from across the organization. We needed to determine what changes solved user problems while paying attention to business needs. We factored in engineering, cross-functional implementation and impact, as well as different options for development.

We decided to explore four options; I was given free range to explore any and all options.
01

Visual Decision tree: help the user determine needs via questions

02

Additive build: core products + add ons of additional value until all products are included

03

Talent Lifecycle/Journey: how the product portfolio holistically solves for business needs across entire talent journey

04

Category buckets: business challenges with filtering

I did a comparative analysis to understand common patterns for learning about products and comparing them to each other
What are current best practices? What architecture is easily understood?
I looked at the SaaS sites Adobe, Atlassian, Microsoft, Quickbooks, consumer sites like Apple, Best Buy, Amazon.  For the visual decision tree, I looked at Bustle, Branch and Sephora.

Because we were also considering developing the site outside of the current CMS, I looked at custom sites LinkedIn had developed for conference events and marketing training.

Comparative analysis

Category Buckets/Grouping by product type was by far the most common pattern. Checklists were used for comparing two or more products. Visual Decision trees were hard to find – most took a quiz form and seemed like an engineering challenge or a lot of clicks.
Ideate
After defining themes, opportunities, and features that LInkedIn could focus and improve upon, I started sketching and dreaming. I also completed a site map to figure out user flow.
How might we visualize how our products connect to each other (and how they don’t), so users can understand which ones are right for them, learn more about them, and consider buying?

Site map

I determined the following changes:
01

The best change for users was to restructure the entire site.

02

The visual decision tree was best placed as the main CTA on the home page. Related products would be shown as an add-on once the quiz was finished. This could also solve the talent lifecycle story.

03

The all products page needed to show all products, with a clear short descriptor of each to help user's determine what was right for them.

04

The comparison pages needed to show products that were a true apples to apples comparison, instead of comparing against products that served a different need.

05

The top navigation had already been researched with new product categories for site-wide consistency.

06

Typographic hierarchy for the entire site needed updated.

What if we implemented an e-commerce structure for product discovery and eventual purchase experience?
With these changes, users would be more likely understand Talent Solution's product offering, compare products, and choose which ones were right for them. Converting the site to an e-commerce experience would streamline internal time helping customers, reduce customer frustration and sales conversions would likely increase.

I moved on to sketching to quickly iterate on ideas
01

Visual Tree, all products, and shopping experience

02

Comparison and shopping experience

03

Charts and quiz

04

Visual Decision Tree

Wireframes

I presented my ideas to stakeholders via low fidelity wireframes
01

Visual Decision Tree: results. This solution would use transitions where the next question would appear after the current question was answered.

02

Product Buckets by need, using architecture from the updated top navigation

03

Product Buckets by company size & type, using architecture used on the current site

04

All product page, using filters

As the talent lifecycle journey had been previously explored and tested, I showed a different concept with product bundles. This solution would more clearly and easily display which products work well together, and what a user might consider as an add-on product. Determining a better way to convey the lifecycle journey had previously proven to be a large cross-functional project between Talent Solutions, marketing and the core product teams.
I successfully made the case for moving ahead with a holistic approach and started high fidelity designs
However, Talent Solutions didn't want to move forward with the bundles options and requested we revisit the lifecycle journey. They also approved exploring custom development, outside of the current CMS, which meant I could make the site much more interactive and update the visual design.
01

Hi-Fi iterations V1-4

After a few rounds of home page iterations to address the lifecycle journey, making changes based upon business and user research feedback, it was determined that the holistic approach was too intensive to finish within our timeframe. This was due to the time it would take to get cross-organizational alignment, as well as design and development of the animated story. It was also decided to stick to the current CMS tools.
02

Hi-Fi iterations V5-9

I proceeded with a scaled down approach that used the current home page (which has been previously tested and performed well). I focused on the all products page as well as the comparison experience.
After a final presentation to the business units, the design was approved
01

The final all products page put like products together. For similar products, the more advanced version was placed on the right. Filters were included to help users determine their needs. Product names take you directly to information about that single product.

I stuck two CTAs, a button or tertiary text link, to simplify user comprehension. Products that could be bought online used a primary button, while products that need to be bought via a sales representative used a secondary button. The tertiary text link was used as progressive disclosure to take users to the compare page for that product, where they could find more information.

02

The final compare products pages used left hand vertical tabs, to navigate between product functions. It included a link to the all products page so users could get a complete overview.

The page header included language about the comparison experience to set context, while the first section under the product title was used to give more information about the product function.

Cards were used for each product, with consistent button styling , title links, and product version placement as the all products page. Icons were included on the top right, next to the title, to help users determine which product was best for their company size. This consistency helps reduce user's mental load.

Beneath this section was the true comparison experience: a checklist for each product version, with like functions grouped together in accordions for progressive disclosure. This provided a true apples to apples overview.

Prototype
I brought the design to life with an interactive prototype
One of my favorite parts of the UX process is prototyping: adding interactions feels like magic. I completed this prototype to assist UX Research with their user testing and used Figma as it paired well with the online testing tool.
Products Page
Comparison Pages
View Prototype
download icon

The Takeaway

It's Important that the entire team is always listening to users. For example, the whole feature came to life because the customer service team let us know about the high volume of calls around finding the right product. Some decisions were made based on internal preferences versus what was best for users.

Many people can’t make decisions on how to best move forward without seeing high-fidelity prototypes. This comes as a trade off to faster iterations with sketching or low-fidelity prototypes. When design is brought to the head of the table in the beginning, user needs will be valued as much as business impact.

I learned the importance of balancing user and business needs within constraints. LinkedIn is taking a phased approach to implementation to balance internal capacities. Opportunity for greater user impact was lost with the decision to not take a holistic approach and update the entire experience, versus the few key pages. Overall, the new updates will benefit the user and increase internal KPIs.

Heather Jansen ©2023. Made with 🖤  and 🎵.

RésuméLinkedIn
Comparitive Analysis
I wanted to clearly understand common patterns for learning about products and comparing them to each other. I started gathering inspiration from indirect competitors. Because we were also considering developing the site outside of the current content management software, I looked at custom sites LinkedIn had developed for conference events and marketing training.
What are current best practices? What architecture is easily understood?
I wanted to clearly understand common patterns for learning about products and comparing them to each other. I started gathering inspiration from indirect competitors. Because we were also considering developing the site outside of the current content management software, I looked at custom sites LinkedIn had developed for conference events and marketing training.
01
02
03
04
‍

Project Overview

Designing a multi-functional platform

I was brought on to help redesign SimpleStage's product interface and develop a design system that would be adaptable, expandable and flexible as the platform grows and evolves.

Challenge

Combine 3 project touch points (design presentation, feedback and design iterations, and bug tracking) into one, easy-to-use product.

My Role/Responsibilities

UI Designer
Design system management
UX design. support