Updating to iOS 7: It's not over 'til the flat lady sings
November 13, 2013
The September 23rd release of the LinkedIn flagship iPhone app was a huge change in how we do build and release things at LinkedIn. We delivered an update to the flagship app the same day the iOS 7 update was available to all iPhone users. In this blog post, we highlight the process and some engineering changes made by the team to deliver the LinkedIn 6.2 iPhone app update.
WWDC 2013 was different
At the 2013 WWDC, Apple introduced a full refresh to its iOS offering. Although most of the core OS frameworks remained the same, the UIKit framework was given a major shakeup. This framework provides the visual components used to build iOS applications.
The LinkedIn mobile team took it upon itself the challenge to release an updated version of the LinkedIn flagship app as soon as iOS 7 was available to our users.
Since the whole OS had undergone a major visual refresh, the design team was also required to rethink updates tp the application, while ensuring that features to be released were not affected.
The QA team would have to certify builds based on manual, unit and automation testing. Our automation tests would mostly be ok, but the test image baselines would need to be updated.
What to fix?
Despite backward compatibility support, when switching iOS SDK, there are always unexpected issues. The upgrade to iOS 7, brought many more than we expected. QA was requested to run full regression tests on a test build using iOS 7 beta SDK and create a comprehensive list of issues and then categorize them and resolve them.
The design team put together a list of updates that they felt were most important. As part of the visual refresh, the team identified changes to:
- Status bar
- Navigation bar: icons and labels
- Search bar
- Remove rounded corners
- Remove shadows and gradients
- Flatter buttons
- Utilize blur
On the engineering side we identified and prioritized our goals as:
- Fix regression issues that result from moving to iOS 7 SDK
- Refresh design to fit iOS 7
- Implement iOS 7 specific features
Now that we had a list of bugs and an updated design and engineering goals the product, design and engineering teams got together and came up with a plan of action.
Plan of action
The goal for the Mobile team was to ensure that the app is iOS 7 ready for the September monthly release. That would be close enough to Apple's iOS 7 General Availability (GA) release. To get the release done on time, a team of 7 people was assembled:
- 1 Product Manager
- 1 Designer
- 2 Engineers
- 1 Web Developer
- 1 Intern and
- 1 QA Engineer
At LinkedIn, when a team is on a critical path to deliver a major update or functionality, everyone involved gets together in a War Room to get the work done. 7 people involved got together in the 'Flat-i-fication' War Room.
Migrating to iOS 7
The migration involved many parts including build systems, design, manual QA, automation and of course code changes. Here I highlight some of these code changes.
Navigation Bar padding issues
Since the LinkedIn flagship app has a customized look, including the navigation bar buttons. From the very first beta, we noticed that the UIBarButton items had extra padding. The UINavigationItem.leftBarButtonItem had padding on the left and the UINavigationItem.rightBarButtonItem on the right.
Fixing the Search Bar
The LinkedIn application embeds a UISearchBar within a UINavigationBar to allow animation of the search field and cancel button. When the Search view controller is presented, the [UISearchBar setShowsCancelButton:YES animated:YES] is called present the search bar Cancel button. Tapping the Cancel button dismisses the Search view controller. Without the Cancel button, the user would be unable to return to the application to continue using it. In iOS 7, calling [UISearchBar setShowsCancelButton:animated:] has no effect change when the UISearchBar is embedded in a UINavigationBar.
In order to work around this, we updated the implementation and decided not to call [UISearchBar setShowsCancelButton:animated:]. The new implementation shows the Cancel Button at all times.
Profile picture blur
A little-known fact about profile pictures: 'People with a picture get viewed on average more than 11 times as much as people without'. On your profile page, the photo is presented as a visual 'card' with a blue background.
To highlight this card, the design team adopted iOS 7's blur philosophy and applied the blur to the user's profile photo and use that as the background for the card. A CoreImage Gaussian Blur filter is applied to the profile image with a radius of 10 points to get the desired effect. This effect makes the card really pop.
Both LinkedIn for iPhone and Android allow you to update your profile picture, straight from the app. Make your profile card pop.
Code complete
Finally on Friday September 13th, we were code complete. The team had worked very hard to get to this date. We would not miss the September 15th release cycle. On Monday 16th, we uploaded the build to Apple for approval for posting on the iTunes App Store.
On September 17th, a critical bug was found in the application which meant that this had to be resolved before our users could see the updated iOS 7 experience. As soon as the fixes were put in and verified, a new build was uploaded to the App Store on September 20th for approval.
Let the flat lady sing
On September 23rd, after the app was approved by Apple, we released the updated 'flatter' LinkedIn flagship app to our users. We were done!
It takes a team
To get a major update released, it takes a team. A team that is dedicated to delivering a great experience for users. A team that believes and drives towards a single goal of awesome. And that is the team we have here at LinkedIn.
Duncan, Adrien, Jayant, Kamilah, Andrew, Brian and Kranthi
Path to iOS 7 presentation slides