How Katy Perry Inspired LinkedIn's Global Redesign

LinkedIn's staff has Katy Perry on their minds. But not in the usual I-have-that-Firework-song-stuck-in-my-head way. The pop singer is the namesake, and underlying inspiration, for the company's largest product design undertaking since its launch in 2003.
Image may contain Face Human Person Clothing Shirt Apparel and Hair

LinkedIn has Katy Perry on its mind. But not in the usual I-have-that-Firework-song-stuck-in-my-head way. The pop singer is the namesake, and underlying inspiration, for the company's largest product design undertaking since its launch in 2003.

As a go-to destination for working professionals, LinkedIn has carved out its focused territory in the social networking space. The site goes largely unchallenged, while Facebook, Google+, Twitter and others battle it out for more of our personal time. And LinkedIn has the numbers to prove it, with more than 175 million users and an 89 percent revenue growth in the last year, according to Q2 earnings.

But the company has not been known for having an amazingly designed site -- if anything, it has looked cluttered and always just a bit outdated over the past years. Now, the company aims to change that with Katy.

"We want to make it look like [LinkedIn] is from the year 2012 and not like it's from 1999," Senior Experience Designer Marissa Dulaney says. "You have to keep up with the times."

>'We want to make it look like \[LinkedIn\] is from the year 2012 and not like it's from 1999.'

— Marissa Dulaney

For LinkedIn, Katy is an exercise in simplification.

"If you look at the average user today, she's getting a lot more sophisticated, she's using a lot more tools both for productivity and entertainment," says Deep Nishar, senior VP of products and user experience. "At some level, we are becoming generation ADD, so we don't have that much time to focus and spend on things.... At the end of the day, if we have fewer things across which to make decisions, we end up making choices and taking action."

And LinkedIn's user experience design team is already working at full speed to "Katyfy" the site across all pages. Recently launched products like the revamped Company pages, notification capabilities, the redesigned homepage, the commenting and liking features on LinkedIn Today, the iPad app and the Windows Phone app are all part of the Katy effort.

And why Perry? As an avid pop culture fanatic, Steve Johnson, LinkedIn's director of design and web development, sees pop stars as personifications of the state of the world. And right now, he says, there is no star that resonates more with people than Perry. Most people know and can sing a Katy Perry song off the top of their head and enjoy it, Johnson says.

"Fashion changes, people's perception of value changes, people's ideas of what's useful and what's not changes," Johnson says. "There's normally an icon in there that we can all think about -- when someone says to me 'Madonna,' I remember how significant that was when I was a teenage boy and what the meant -- the sights, the sounds, the fashion. That's why I'm hinging it on Katy."

But don't think of this as the Katy Perry of garish costumes; think of this as the Katy Perry of simple but irresistible pop hooks -- something people keep coming back to.

LinkedIn's offices in Mountain View. Photo: Ariel Zambelich/WiredPhoto by Ariel Zambelich

Waking Up in Silicon Valley

The Katy redesign efforts have already proven successful. Unique visits are up 38 percent, page views have increased more than 60 percent, and the number of days members are visiting the site is at an all-time high. Engagement on the LinkedIn Today page has increased 150 percent since its July refresh, and sharing through LinkedIn status updates are also at an all-time high, in part thanks to a refreshed homepage.

"This has been an initiative for two-and-a-half years, and it's finally coming to light," Johnson says. "We're touching every single page and this is huge.... We just needed to get [the site] up to snuff. This is going to feel like such a major redesign, because LinkedIn has never actually embarked on something like this before."

The company's homepage is, naturally, the most viewed page on the site. And it was one of the first to get a major Katy finish when LinkedIn rolled out the initial phase of its Home Page redesign in July. (LinkedIn is currently in the process of rolling the new homepage out to all users.) For the past year, the LinkedIn team has been working on giving its 8-year-old homepage a significant facelift.

If you track the evolution of the site from just four years ago to the latest home page design, you can see where LinkedIn's UED team is going with Katy. Text-heavy sidebars have been replaced with a cleaner top navigation bar, while sharing and content in the form of images come front and center.

"If you take a look at our old homepage, there are just 50 things for you to look that," Dulaney says. "When users are encountered with something like that they don't know what to do."

>'This is going to feel like such a major redesign, because LinkedIn has never actually embarked on something like this before.'

— Steven Johnson

To address the problem, Dulaney and the Home Page team reduced all of those features down to two attention targets: the left rail, which is all about your LinkedIn network, and the right rail, which is all about your insights and recommendations.

The homepage is also more graphical and features subtle yet useful improvements like putting your most important updates at the top of the feed, having an auto-loading feed, and implementing a right-rail lock at "People You May Know" when you're scrolling down the page.

"I think about it kind of like a concierge or a waiter," Dulaney says. "Who doesn't like being waited on? If you have to get up every time you want to eat a little bit more at a restaurant and go seek the food out, it's not going to be as nice of a experience as just sitting there and having those things delivered to you. All you have to do is start using the site and we bring what you want to you. We actually bring you the most relevant content."

The goal is to drive more engagement and sharing without hindering the overall experience. In fact, despite the more graphical look, LinkedIn's developers were able to make the homepage faster than the old one.

This is just the first of many Katy homepage roll-outs. Plans call for more visual elements and data that provides detailed insights into your professional network. The page will also surface more of what you specifically need -- jobs you might be interested in, for example, or people in your industry who you should (not 'might') know.

"I want to see a huge increase in anything we recommend in the recommendation engine in general," Johnson says. "In the new Katy design we're going to make that a lot more discoverable and you can be like, 'Wow, that seems like an area I want to participate in and communicate in more.'"

A Unified Experience

Katy actually grew out of LinkedIn's successful redesign of its iPhone app.

"When we started with this project [the iPhone app] we needed to simplify it and make a more focused and beautiful experience," says Micah Alpern, principle designer of LinkedIn's mobile experiences. "You can see that when you launch the [old] app it's not clear what to do. There's 12 things and it's all disorganized."

In August 2011, the team launched a completely overhauled iPhone app that featured a totally new design built around a focused, four-tile interface. People responded positively to the app, calling it beautiful and polished, not necessarily words that would have described the previous versions of the app or any other part of LinkedIn, for that matter.

Given the success of the app, the design team felt that the visual language it had created in the mobile experience should be applied to other areas of LinkedIn, starting with the homepage but eventually expanding out to all products.

"We sort of pulled the alarm bell and we got every visual designer to come together for an intense few days of ideation, exploration, innovation," Alpern says. "We came up with all kinds of different of ideas. And from that genesis is where the early ideas of Katy came from."

One of the main goals in Project Katy is to create a cohesive experience across all platforms, no matter the device or operating system.

"The biggest challenge we face as an organization is to keep the spirit of this design and this family alive as we move to other platforms," says Jakob Heuser, principal web developer and UED lead.

>Though mobile was the spark for Katy, LinkedIn’s UI Pattern Library is what enabled it all to work.

In May, LinkedIn came out with a Windows Phone app that makes complete sense for that platform — utilizing live tiles and the Windows Phone scrolling interface. The team did the same for the iPad, recognizing that someone who visits LinkedIn on a tablet has different goals than someone who accesses the site through an iPhone. The tablet is targeted more toward what Alpern calls "coffee and couch users," who tend to spend more time on the app and thus want more features that on-the-go iPhone users. But all of the apps clearly show the simplified, modern design language of the Katy experience.

The results: Mobile accounts for 23 percent of unique visits to LinkedIn, double the figure from last year. Users view 41 LinkedIn profiles and perform 19 people searches every second from mobile devices.

Though mobile was the spark for Katy, LinkedIn's UI Pattern Library is what enabled it all to work. The company spent the past year creating a library complete with all of the elements that are crucial to front-facing changes, including standard typography across all products as well as specific buttons, interactions, grid patterns and design elements that should be used on all of the site pages and mobile products.

Prior to Katy and the pattern library, product teams at LinkedIn worked independently, each establishing the look of its particular product, whether it was the homepage, profile page, or an app. They shared some similar features, but there was nothing like the cohesiveness the company now offers across all of its products.

"The nice thing about Katy is that developers and designers can talk in language rather than pixel sizes and CSS elements," says David Delo, a web development team lead.

LinkedIn's offices in Mountain View. Photo: Ariel Zambelich/WiredPhoto by Ariel Zambelich

LinkedIn will continue to roll out Katy through the end of the year and make small tweaks as necessary, but this will be LinkedIn's look for a while. Johnson says that he absolutely plans on revamping the site every time there's a big enough cultural shift or phenomenon but that that doesn't happen very often.

"This should last us some time," he says.