mobnav-header.png

LinkedIn Mobile Navigation

At LinkedIn, I found my footing working on consumer marketing campaigns and product emails, but I found purpose when I transitioned to work on our global navigation across platforms. This is where I took on more autonomy and responsibility, and where I began to mentor and eventually manage a team of designers focused on systems thinking.

One of the first projects I tackled as the sole nav designer was a redesign of our flagship mobile app. The existing app had long outgrown its original hamburger navigation – it was severely fragmented and unfocused, presenting an enormous opportunity for reinvention.



THE DETAILS

 

Timeframe
2015

Platforms
iOS, Android

Role
Design lead

 

Until we kicked off a larger desktop redesign in late 2015, I was the only designer on global navigation, partnering with a single product manager. We didn't have a dedicated engineering team so we borrowed resources from other teams as needed, creating some unique challenges as implementation was handed from one team to the next.

 


Opportunity

Prior to this project, LinkedIn's flagship mobile app suffered from common problems caused by hamburger navigation – low discoverability, efficiency, and scannability. Beyond that, it had survived so many feature launches that it was severely bloated, making it difficult for users to find or focus on much of anything.

To solve this, we set out to rearchitect the app by focusing on what mattered most to our business and – more importantly – our users.

 

 


Process
 

1. UNDERSTAND

First, we audited other navigation models and gained a deep understanding of existing user pain points and opportunities.

2. MAP

We explored IA models and looked for the best way to organize around and highlight our five key user value props.

 

3. WIREFRAMe

Then, we leveraged what we learned from external analysis, internal metrics, and IA explorations to begin architecting solutions.

4. RESEARCH

We put our best concepts in front of users and validated our main hypothesis – tabbed navigation would resonate most.

 

5. ITERATe

Coming out of research, we iterated on key elements – primarily our modal framework and navigation labels/naming.

6. POLISH

We moved into high-fidelity mocks, working with our patterns team to inform a new visual style for LinkedIn consumer products.

 

7. SUPPORT

No dedicated engineering team meant we had to get scrappy – working with many different partners and facilitating handoffs.

8. UNDERSTAND

Post-launch, we monitored metrics and user sentiment, identifying key areas for further exploration and iteration.

 


Solution
 

Ultimately, we designed a simple tabbed navigation that prioritized and highlighted our 5 core feature sets, greatly improved usability and discovery, and allowed for greater connective tissue amongst our broader suite of products.

With this redesign, we moved away from a centralized notifications hub and instead distributed badges across the main pillars of the app, presenting important information in a more contextual way.

 


Key features
 

APP LAUNCHER

One key feature we introduced aimed to solve pain points related to navigation and discovery of other products in the LinkedIn ecosystem. A grid icon in the upper right of the Home tab reveals a list of apps users already have access to, as well as upsells for other relevant products.

 

MODAL FRAMEWORK

To ensure consistent transitions and set clear expectations for members, we created a clear framework for modal and page interactions, detailing when and why to use one model over the other.

 

SCROLL INTERACTIONS

We also examined scroll interactions throughout the app, identifying when navigation should persist as users engage with a given page, as well as when navigation can gracefully roll away.

 

NAV HIERARCHY

As the user navigates through the app, the root tab is always selected–never changing unless the user explicitly taps on a new tab (or swipes on Android).

CONTEXTUAL DEEP LINKS

When the user enters the app through email and lands on a page with global nav present, the selected tab should be contextual based on the entry point.

 

HOME AS DEFAULT

When entering transactionally, if the destination doesn't align with a primary tab, the selected tab defaults to Home–the most comprehensive view of LinkedIn.

MULTI-APP ECOSYSTEM

Where possible, the user is prompted to download the native app that corresponds to their current use case (Jobs, Pulse, etc.).

 


Iteration

Following the launch of the redesigned mobile app, there were two key insights that informed quick iterations:


SEARCH FIELD > SEARCH ICON

Initial findings and research suggested users were more likely to execute a search from an open search box, rather than a collapsed icon. Moving to an open field allowed us to educate members on what they could search for, eliminated redundancy of page headers and navigation labels, and freed up space to incorporate a new tab, which leads into the second insight:


NOTIFICATIONS + PROFILE = not a GREAT combo

The original redesign combined the profile entry point with analytics and in-app notifications, creating a central space all about "Me" – and simultaneously creating a ton of confusion for members who (1) didn't intuitively understand how to navigate directly to profile, or (2) didn't perceive notifications for what they were. Moving notifications into a dedicated tab allowed for a top-level profile entry point and reduced confusion all around.

 


Future

As we continue to incorporate new features and evolve the LinkedIn brand, there are three substantial changes in the pipeline for mobile navigation:


JOBS PILLAR

Since the launch of our redesigned flagship mobile app in 2015, members have voiced concern over the loss of a central place to discover, save, and apply to jobs. Our original strategy was to push jobseekers into our standalone Jobs app in order to (1) provide a more catered jobs experience, and (2) simplify the flagship feature set for the majority of members.

In order to better meet member needs and support our business goals, we are reintroducing a primary jobs tab in the main app. To support this from an IA perspective, we've moved primary access to self-view profile to the upper left corner of the app, anchoring the rest of the experience and reinforcing identity as the cornerstone of the LinkedIn platform.


SLATE COLORWAY

We recently started ramping a new redesign of our desktop site with a more modern and professional look. Of many colors we tested for navigation, a dark slate colorway resonated most with our members. Because one of our primary goals is navigational parity across all platforms, we're now working to reflect this change on mobile.


BOTTOM NAV

In unfortunate timing, Material Design incorporated a more scalable pattern for bottom navigation just as we were launching the original app redesign, and we weren't able to rearchitect the navigation in time for launch. With the goal of making as few incremental IA changes as possible, we've been waiting for the right opportunity to make this change. Rolling this out in tandem with the jobs tab means our members only need to reorient to a new navigational paradigm once, not twice.

 


Takeaways
 

 

1. Design is iterative.

It's never perfect and never finished. We're always learning from our users and iterating toward the most simple, delightful, and intuitive solution. 

 

2. seek to understand.

The best partners come from a place of understanding. My product manager on this project considered himself a student of design – he valued the unique expertise that design brought to the table, respected different opinions, and always sought to understand before passing judgement or making less-informed decisions.