Mobile Profile Redesign - It’s all about You!

Authors: Aarthi Jayaram, Anirudh Padmarao, Deepak VP, Vivek Tripathi

This week LinkedIn released a completely redesigned profile experience on our iPhone, Android, iPad and Touch Web applications. The mobile and profile engineering teams put a lot of work into building it to allow our members to build and nurture their relationships.

What’s new?
If you haven’t already seen it, download the latest version of our Android and iPhone apps (in English) and across all languages offerings for our iPad app.

Your profile is your professional identity and we believe it should make you ridiculously good looking! The redesigned profile is built to help our members showcase their professional stories, find opportunities and build relationships. The new top card provides a quick and easy way to access the most relevant information such as location, industry, recent experience and last attended university.

Two additional sections – highlight and in-common provide great conversation starters and contextual ice-breakers. Finally, we have added richer animations to help make the navigation within relevant sections smooth and delightful.

How did we build it?

The new profile view is optimized for performance. We can progressively render the profile - this is super helpful when loading really large profiles or browsing on a slow connection. The clients render content based on structured view based JSON. The clients have a pre-defined set of views for which varying types of data can be populated by the server. This helps us in dynamically changing the order and layout of content without new client releases. The client can also be triggered to fetch more data from the server by sending down a “loadmore resourcepath” and we call it view-based chunked response.

Highlight card
At the top of the redesigned profile, next to the photo, we show a highlight slot that contains a dynamic widget. This slot surfaces relevant and actionable insights based on the unique relationship between the profile viewee and viewer.

The frontend node.js server fetches the content for the highlight from LinkedIn rest.li services. In parallel, it fetches a ranked selection of widgets from the Lego service. Based on the ranking as well as the availability of content, we decide which widget to show. The frontend server then formats the selected content into view based json, and returns it to the mobile client.

Notice that we have decoupled the widget selection logic from the frontend application code. Using the Lego service for widget selection has a number of advantages:

• Precise targeting of widgets to users using LIX. We choose different sets of widgets for a viewer based on network distance to viewee.
• Easy configuration of the widget selection logic from a gui tool.
• Tracking of widget impression and action events, and support for capping and cool-off rules based on those events. We use this to cap the number of times a user sees the guided edit highlight.
• Support for different widget ranking heuristics such as fixed ordering, or model-driven relevance.

Intro Animation (iOS and Android)
We show an interactive intro animation to highlight new features in the profile when the user launches the new profile for the first time.

In the iPhone application, this animation flow is built using UIDynamics, a new physics-based animation engine in iOS7. The core component of this animation is the dynamic animator object which provides a context for the animation and also coordinates between underlying physics engine & profile views involved in the animation. As the user starts interacting with profile intro animation, the animator object is setup to provides subtle hints (such as auto-pulldown) to guide members through the experience.

In the android application, building this animation was quite interesting from both functionality and performance perspective. During the initial part of the animation, the redesigned profile page jumps out from the bottom of the screen. The profile page however is a listview and this animation needed us to scroll the list view past its bounds. We were able to achieve it through some nice tricks. The entire animation was built using a combination of ViewPager and ListView where the ListView allowed you to scroll vertically and interact with its items while the ViewPager allowed you to scroll horizontally. The user could move from the ListView to the ViewPager by doing a hard pull-down. Dispatching touch events correctly to the appropriate view after detecting whether the user is tapping, swiping horizontally or vertically was the biggest challenge during this flow.

On some older Android devices, we also noticed out-of-memory crashes and performance issues related to the horizontal swiping in the ViewPager. Considerable amount of performance optimizations were done to ensure that the animation runs smoothly on variety of Android devices without running out of memory.

Background Animation (iOS and Android)
Another engaging animation in the new profile is the transition from background section to full profile detail. The member selected profile section is anchored in the page as the remaining section slides out of the view and then the entire profile detail which is stacked up behind the selected section slides into its respective position.

On iOS, this unique animation required us to customize the navigation between pages and in iOS7 this is made possible by custom view controller transition feature. One of the main components of custom view controller transition is the animation controller which tracks the animation and also setups the animation duration. The animation controller also provides a configured transition context which has access to all the profile views (background section, full profile detail views) participating in the animation. The view hierarchy of transition context container view is modified to show the background section sliding out except for the tapped section which remains anchored. Finally, the animation controller performs collection view layout-to-layout transition from stack layout to flow layout to land users on the full profile detail.

On Android, transitioning a view from one activity to another during activity switches without any visible glitch was not easy. We realized that the transition looked much smoother if we switched fragments rather than launching new activities. However since the existing app was launching new activities for every new screen opened, we had to do a major overhaul to modify the way we transition between screens. Now with the new profile, we have a single activity and just switch fragments inside it as the user navigates through the app. We are able to have floating views animating from source fragment to destination fragments while the transitions happen. Tapping on any item under the “Background” section on the profile page will result in this type of transition.

What’s next?
At LinkedIn, we love to build products that are members first. We enjoyed building this new profile and are excited to see our members look so good. We are constantly exploring new ways to help our members share their professional stories and can’t wait to share what we learn.

Later blog posts will deep-dive on how to build slick animations on iOS and android and also share specifics on the data insights and relevance infrastructure. Stay tuned!