X
Tech

Airbnb offers behind-the-scenes glimpse at how its tablet app came together

Developers for the famed online accommodations locator service describe the hectic three months it took to add tablet apps to its repertoire.
Written by Joe McKendrick, Contributing Writer
This may come as a surprise, but Airbnb, the online facilitator of overnight accommodations, only released its first native tablet app a couple of months ago. Not surprising, however, is the fact that the app would be closely related to its well-known smartphone app, incorporating as much of the same features and code as possible.
ipad-photo-by-joe-mckendrick-5-2013.jpg
Photo: Joe McKendrick

"We knew we couldn't rewrite the entire phone app, and that if we ever wanted to ship, we'd have to reuse some of the views already existing on the phone," says Airbnb's Brandon Withrow, describing the process his company undertook to build its first native tablet app.

The Airbnb team sought to roll out the new app in several iterations in Agile fashion, with work being conducted by a relatively small team of designers and three engineers (two iOS, one Android). "A big part of the culture at Airbnb is to move quickly and run experiments along the way, rather than waiting until the end," Withrow explains. The team started by building and shipping a key navigational feature which was quietly incorporated within a pending smartphone release. "We launched the new nav in November 2014, which gave us several months to collect data and iterate on the high-level information architecture while we built out the tablet app," Withrow says.

A challenge for the team was to avoid having two separate apps (smartphone and tablet) going forward that would require differing displays and code-splitting. "We realized that almost every model object in our data layer (listings, users, wish lists, etc.) have three UI representations: a table view cell, a collection view cell, and a view controller," Withrow says. "Each of these representations would differ from tablet to phone, so instead of having branching logic in place everywhere these objects were used, we decided to ask the model how it preferred to be displayed." Ultimately, the team only had to "change a single line of code for the tablet view controllers to be displayed app-wide."

The tablet app ultimately took about three months to build, debug, polish, and release. One major issue the team encountered in its user testing was the scrolling feature -- "lightweight scroll snapping" -- which worked well in smartphone displays, but proved onerous for tablet users. "One user described it as being like 'trying to kick a soccer ball up a hill,'" Withrow relates. Upon deeper investigation, the team determined that scroll snapping on the tablet "doesn't take into account the intent of the user. If a user scrolls a view and slides their finger off the screen in a tossing manner, the system works great. If a user purposefully stops scrolling and then releases touch the scroll view snaps to the nearest point, creating the 'uphill soccer ball' effect."

The team did not want to entirely rob users of the scroll-snapping experience, instead opting to disable the feature only when "the velocity of the scroll dropped below a certain point, giving the user control of the scrolling experience."

The Airbnb tablet app was launched at the end of April, winning praise for its visual displays that take advantage of the wider screen.

Editorial standards