iPhone Design Award-Winning Projects phần 6 pps

93 Postage Developer Name: Chris Parrish and Brad Ellis Development Company: Rogue Sheep Tags: OpenGL ES; Art; Memory Management; Team Development This is the story of a band of engi

93

Postage

Developer Name: Chris Parrish and Brad Ellis

Development Company: Rogue Sheep

Tags: OpenGL ES; Art; Memory Management; Team Development

This is the story of a band of engineers from a serious public software firm and

their attempt to go solo and make serious software What they ended up with:

construction paper scraps on the floor, an ADA award, and one of the iPhone’s

most exquisite apps, Postage (shown in Figure 7–1)

Figure 7–1 A postcard created in Postage, ready for in-app mailing

7

In 2002, five Adobe engineers from the Seattle office were culled together to work on a spinoff project, a scaled-down version of InDesign aimed at amateur publishers The five would bond, code, and compile themselves into a working friendship And when their project was killed in 2003, they’d jump ship in frustration, tumble into careers as coders-for-hire, and pop up in 2009 as the winners of an ADA for their picture-perfect postcard app for iPhone This is the story of an unlikely bunch of aesthete engineers that calls itself RogueSheep

There Were Sheep

The name isn’t a purpose-built marketing tool or an age-old inside joke, according to Chris Parrish, one of the founding members of the flock It’s more of an analogy for how the company got started “The name just kinda happened,” says Parrish “We went on a road trip to Oregon together There were sheep, there was the Rogue River, and a microbrewery out there,” he recalls “It fits our character.”

The outlier spirit is what drew the five members of the flock together in the first place, alone together as they were “We never felt like we could ever do anything creative while

we were at Adobe,” says Parrish “We felt removed from San Jose” [where Adobe is headquartered] On a behemoth project like InDesign, Parrish says he and his cohorts would be among dozens of other engineers—up to 50 at one point, he remembers “The creative expression and control you have is minimal; someone else is deciding what things should look like and feel like.” It was only once he and his now-coworkers began the InDesign spinoff that they realized their chemistry “We had similar sensibilities, and

we had a really good time,” he says Another thing they had: new ideas But in the Adobe hierarchy, new software concepts are bought, not incubated, Parrish says They left the company as a group “We thought, ‘What can we do with this team?’”

The answer was they had no answer at all “We kicked around a lot of ideas, and we talked about doing games,” Parrish says But each time the spaghetti hit the wall, nothing really stuck Then one of the founders—the only one who has since left the team

of the original five—came up with a proposal His wife was doing her PhD dissertation at the University of Washington, and she was struggling with the software tools she was stuck using in the university labs The group thought they had found their opportunity to build an elegant software solution “Once someone had an idea that seemed remotely reasonable, we went with it,” says Parrish

The problem had to do with a painstaking research technique known as “gel

electrophoresis,” a process by which life science researchers analyze the nature of DNA and RNA samples “The results of these experiments are these crude negative images,” Parrish says “A lot of the research is doing these experiments, and if you’re going to publish your results, you have to label up these negatives All that labeling was tedious, and they were doing all this diagramming and graphics work in PowerPoint, which was terrible,” he says They saw that the task needed graphical richness, but that it couldn't

be static—it had to be alive with usability, and dynamic enough for revisions “Interface concerns are high on the list of how we approach a problem,” he says

They set to work at RogueSheep’s office in the Fremont district of Seattle There, in the

shadow of Seattle’s unusual statue of V.I Lenin, they began building a cross-platform

solution with all the graphical potency they thought the problem warranted Then they

made a decision: they didn't want outside funding or interference That meant picking

up consulting and contract work to keep money coming in, but it also left almost no time

for their own work When they had time, the team played around with Apple’s growing

suite of apps “We borrowed lots of ideas from iTunes and iPhoto,” says Parrish They

were inspired “Instead of just focusing on the labeling and output of these gel images,

we totally retooled it,” he says They made the app into a kind of image notebook for

researchers, complete with tagging, smart search, metadata, and exporting But despite

positive feedback from lab beta-testers, sales interest was tepid After months of

development, the project was tabled without so much as a name, but it had taught the

team to pay acute attention to Mac UI They ditched Windows and Linux and became

full-time OS X developers

Is This One of Them Internets?

Apple’s 2008 WWDC was the group’s deus ex machina “Day to day, all of us run on

Macs,” says Parrish, “and only occasionally—and begrudgingly—do Windows software

The iPhone was a big thing for us We were all excited.” They showed up to San

Francisco’s Moscone Center in 2008, having heard about developers tinkering with the

guts of the phone version of OS X long before the SDK was released Once Apple

announced their free iPhone developer kit, it opened the idea faucet “We got the idea

for Postage right there, at WWDC,” says Parrish, at a company dinner The first

storyboard, created by the group’s design guru, Brad Ellis, is shown in Figure 7–2 “It

was a simpler time for the Postage project,” he says

Figure 7–2 With a phone that can do rich HTML email, the possibilities for impressing peoples’ moms became

endless

The concept was simple: a rich, purpose-built app that would send electronic postcards

based on photos taken with a user's iPhone At the time of the ADAs in June 2009,

Postage 1.1 did just that, and with aplomb The app boasted 50 beautiful postcard

templates, which users filled with their own photos they could pan, zoom, and rotate

into any preferred orientation To that photo, they could add one of several effects, such

as a monochrome filter or sepia tone; they could also choose the color and font of the

message text, and send the card to several recipients at once, all of which could be culled with a simple search from the iPhone’s address book (the maximum number of recipients depends on how much of the phone’s memory is available) The app is available in three languages—English, Dutch, and Italian It won a fast audience with reviewers, both professional and otherwise MacWorld called it a “perfect iPhone app,” and users raved about the “exemplary” technical execution on the iTunes App Store

As auspicious an app as Postage would be, the idea sat undeveloped for months after the team returned from WWDC 2008 Caught up in their contract work, RogueSheep simply didn’t have enough manpower to do the fun stuff It wasn't until February 2009 that they could peel off a couple of developers from paying gigs and begin in earnest Luckily, Ellis had already begun spec’ing it out Ellis’ second storyboard is show in Figure 7–3

Figure 7–3 A more detailed Postage storyboard, this version drawn without anyone’s mom

Even so, they were behind: the SDK had already been out for the better part of the year

“All our peers had figured [the App Store] out a year ago,” says Ellis “We were late to

the game.” But while the PR blitz around the iPhone had begun to wane, Ellis’

excitement had only begun to ramp up “What I enjoyed was looking at the UI stuff,” he

says “With the iPhone [I] got to totally start over, and put aside all that other knowledge

I had been accumulating You just get to start fresh.”

He started a torrent of downloading—by his own account, “all the free apps” in the

iTunes store “I've checked out all of them,” he repeats The potential for a simple,

beautiful, functional app had a powerful allure, but not a lot of fiscal incentive “The

economics of the App Store had really changed” since the early days of $100,000

overnight sales, recalls Parrish “We didn’t know what was possible We just knew that it

would be worth doing just to get leads for other jobs.”

Coding for Fun

What the iPhone platform lacked in business incentives, it had in entertainment “I

haven’t had that much fun programming since I was a kid,” says Parrish There was

almost no learning curve switching between Mac and iPhone development, he recalls,

making the challenge purely creative and only minimally technical Fueling the innovation

were dozens of other excellent iPhone apps that the RogueSheep guys say inspired

them to keep their expectations for their own work high “Classics is a great example

that makes you reach for a higher bar,” Parrish says of the intricate iPhone book reader

built by Andrew Kazmierski, which had received over 3,000 four- and five-star ratings in

the iTunes store as of WWDC 2009 Another source of inspiration is developer Will

Shipley’s iPhone version of Delicious Library 2, the catalog-everything-you-own software

that recognizes CDs and books by viewing them through your Mac’s iSight camera “We

hung out with him a lot [while developing Postage],” says Ellis The list of plaudits

doesn’t stop there: the RogueSheep guys also say they marvel at the brilliance of

NewsGator’s NetNewsWire client for iPhone, and the Twinkle Twitter client by prolific

game maker Tapulous, creator of the TapTap line of iPhone games

Yet even with so many adroit developers building for the iPhone, Parrish says, his team

found they drew even more inspiration from elsewhere “In a lot of ways, we were more

inspired by Mac apps, thinking we wanted to translate that kind of experience to the

iPhone,” he says And when it came to those, well, there was really one company that

epitomized brilliance “All of us strive to think: what would Apple do? Some of the native

apps on the iPhone are what we’re really trying to match with our own interface, and our

presentation to the user.” But Ellis, ever the paper-and-glue throwback, credits actual

postcards for the beauty he built into Postage “I wanted it to be like a physical

postcard, and I’ve been trying to hammer that idea home from day one,” he says “It’s

what I've picked up from my art background.”

Although they might not share muses, the entire team at RogueSheep seems united

under an umbrella principle that is palpable in Postage: zero learning curve usability

“This was built for our wives,” Parrish says “We wanted them to be able to use the app

without ever having to hesitate or get confused.” Ellis chimes in: “In fact, a wife that

doesn’t even have an iPhone should be able to pick up someone’s iPhone and be able

to use it.” The key to usability, the RogueSheep engineers believe, is concise, narrow focus, something that they believe Apple has mastered “It’s not necessarily having every option, but having the right options, so people don’t have to put in a lot of effort to generate something that’s beautiful,” Parrish says “That’s one of the great things about the Apple applications for the desktop,” he says “Look at Numbers; you can create beautiful spreadsheets with very minimal effort You don’t have every option that Excel has, but it has most of what most people need, and the end result is just beautiful That’s a big motivating factor.”

While the challenge of building Postage wasn’t in the method—the RogueSheep

engineers were all Mac-happy Objective C developers to begin with—it presented the bright, obsessive team with dozens of new ways to streamline the way it worked While their workspace is in flux due to an office overhaul, the company’s first since its

founding, the stockpile of tools in its arsenal is ever-growing There are plenty of the trademark silver Apple towers, they say, but not the ones you expect; only Ellis has a Mac Pro “All our desktops are G5s that we’ve had forever,” says Parrish “We really haven’t had the need for the brand new eight-core Mac Pro’s I’m a developer—I’m supposed to need the biggest, baddest machine,” he says quizzically, “but the G5s are

at a sweet spot where they’re still quite usable I spend more time thinking about what I’m going to do than waiting for it to do something.” With Snow Leopard on the verge of release, he concedes, the team might have to make a capital investment “We may have

to replace them,” he says a little glumly

The G5s have help: an array of 15-inch MacBook Pros and a few dual-monitor setups “I can’t get enough screen space,” says Parrish “I have two monitors, and Spaces, plus the laptop.” Ellis, as the resident creative, has a tablet-centric setup and “matching pen cups for different color pens.” Unlike the other developers, Ellis has spent much of his Postage project time working on video and still mockups “All the animation for Postage has been done in Motion beforehand,” he says, and iterations he created in Photoshop were often dozens of layers deep, containing smart objects that themselves contained dozens of layers “Before we started coding it at all, I had made what each screen looked like in a big Photoshop document,” says Ellis “This document ended up housing every asset, so I could look at the whole screen while I was tweaking my pixels.” (See Figure 7–4, a psd mockup.)

Figure 7–4 A Photoshop mockup featuring Ellis’ two roommates “Little differences here and there,” Ellis says,

“but generally we knew exactly what the application was going to look like before we even started.”

To allow the team to keep tabs on his progress, Ellis used a tool called LiveView Written

by an industrial design firm in Palo Alto called Ideo, it’s a screen-casting app for both

desktop and iPhone The desktop iteration, ScreenCaster, presents a small,

iPhone-shaped bezel on the screen of your Mac Drag the bezel around your screen, and

whatever’s inside will appear magically on any iPhone within your LAN that is running

LiveView for iPhone “Everyone could pipe in and see my progress,” says Ellis “It was

kinda fun.”

Longtime Mac developers, the RogueSheep crew remembers the days when Apple’s

own dev kit wasn’t so hot “Xcode has really matured a lot,” Parrish says, describing the

way it caught up to—then overtook—Microsoft’s tools for Windows developers with its

killer feature set “It’s so awesome to see Apple having money coming in, and on this

growth path,” he says, “because its teams are chartering new territory now Ten was

always a superior platform, but Project Builder was a little dated,” he says of Xcode’s

predecessor “The features are there I’d be lost without Xcode now.” Even when they

have to develop for Windows, Parrish says, some members of the team often write the

rough draft of a program in Apple’s IDE, putting it into Visual Studio only when they

must

The Circling Shark

While many iPhone developers run light apps that never come close to exceeding the iPhone’s 64MB allotted memory for apps—which is effectively only 20-30MB in practice, say the RogueSheep engineers—the development of Postage relied unusually on

Apple’s tools to optimize and reign in memory management “Without Shark and

Instruments, we couldn’t have gotten Postage working It would have been so hard to figure out why it was crashing [in early versions],” says Parrish The problem, he adds, is that all of Ellis’ intricate images and textures hog memory “We were running into

problems at the ‘sent’ screen The app would be hitting the memory max, and then in the background the phone goes to check for mail, blowing us over the limit,” he says While he concedes that the task of keeping Postage within Apple’s memory guidelines is easier now, thanks to improvements in iPhone OS 3.0 and OpenGL 2.0 ES, the original development process meant keeping a squeaky-clean leak profile And it wasn’t just memory leaks that almost killed the app, says Parrish, but restrictions of the iPhone’s framework itself “We had to make tradeoffs between performance and memory,” Parrish admits One example: at first the team wanted to keep lots of elements at the ready to ensure quick load times, but memory economy dictated they resort to lazy loading Then Ellis wanted to use a torn-edge look for the perimeter of the templates, but it ballooned the file sizes of some assets “That’s one of our strong suits,” says Ellis,

of memory management “Originally [Postage] was crashing after sending four

postcards, and Chris said, ‘No, dammit, we’re going to be able to send as many

postcards in a row as we need to.’”

“You have to go past the regular usage scenarios to get to what you expect to be stable,” Parrish adds Cutting down the graphical quality of the app’s assets was never

an option, the team agrees “If your app has 200 frames and is under 10MB, then I think you’re doing it wrong,” says Ellis

The engineers still feared their app might get into a cycle of crashing on launch because

of bad persistent data “We had seen this happen to a number of developers, and the end result was not pretty,” says Parrish Because of Apple’s long wait times for app update approval, users could be left for weeks with non-functioning apps whose only remedy was deletion and a fresh install—a pretty “violent” solution, as Parrish says The team decided to write a little flag into the app’s NSUserDefaults when the

application starts If the app crashed on startup more than once, the flag would activate and blow away that persistent data after the next crash “Ultimately you’d like to just never have a bug with your saved data,” Parrish says “The reality is, it’s going to

happen to you at some point This technique can at least manage the user experience to something more reasonable on a platform like the iPhone, where the data storage is opaque to the user and it’s not trivial for them to take an action to fix the problem themselves.”

Describing the flag, he says: “We clear it when the application quits normally In the event of an abnormal quit, the flag is not cleared We note the state of this flag at

startup; if it’s the second time the flag is not cleared, we take action to remove all the saved data and start with a clean slate.”

If your app pushes the limits of the iPhone, it may pay to implement boolean

expressions like those in Postage The following are some of the relevant API calls

RSCrashDetector class :

- (void) appStarting

{

NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults];

BOOL crashedOnce = [defaults boolForKey: kCrashDetectorAppLaunchedKey];

BOOL crashedTwice = [defaults boolForKey: kCrashDetectorAppLaunchedAfterCrashKey];

[defaults setBool: YES forKey: kCrashDetectorAppLaunchedKey];

[defaults setBool: crashedOnce forKey: kCrashDetectorAppLaunchedAfterCrashKey];

NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults];

[defaults setBool: NO forKey: kCrashDetectorAppLaunchedKey];

[defaults setBool: NO forKey: kCrashDetectorAppLaunchedAfterCrashKey];

As fickle as the iPhone platform can feel, Parrish says that its tight-fitting restrictions

belie the creativity it inspires “Everyone wants garbage collection [for iPhone], but we all

know that would make the phone terribly slow,” he says “But to those of us who would

be called old school, it’s like going back to the Apple II It’s this restricted environment

We’re used to 10 gigs of RAM and unlimited power,” he says, “but if you’re trying to develop an app that’s sophisticated like Postage, the memory management is nostalgic Sometimes limitations make you produce your best stuff.” Ellis says he likes that it puts new developers and old alike on equal footing in the race for new ideas “We’re given a clean slate as user interface and experience designers,” he says, “and it’s time to go back to the core ideas that computers were founded upon and redefine everything so it makes sense in our new world I don’t have a tremendous amount of experience

designing for the iPhone, but nobody does, which actually makes me right with the rest

of the crowd out of the gate.”

mementos “A photo of a flower I brought in, or a paper I made when I was nine in class that I’ve been holding onto because I'm a pack-rat,” Ellis says Others contributed, too

“Chris’ wife Liz took their kids down to the beach and got shells; Chris’ son Aiden has one of his shells in a template in the travel category,” he adds “Everything in the

Cutouts category was all cut from large sheets of construction paper by Liz and

scanned into the computer.” One of the creative challenges the templates presented was how to give users a lot of options, but still maintain a common visual language throughout “The templates are already a scattershot of different styles and flavors I constantly fought an internal battle over how different each template looked from one another,” says Ellis “There are so many different styles all packaged together.” (Figure 7–5 shows the construction paper elements of the dinosaur theme Figure 7–6 shows the finished product.)

The team was careful to organize all the app's graphical elements in a way that would be conducive to easy, fluid user interaction “We made the decision early on to have the templates and backgrounds be different assets,” Ellis explains “It makes it easier to put your photo into fun shapes, like this dinosaur mouth It also lets us animate the card without moving the background on the iPhone.” The distinction is part of what Ellis says

is “underlying concept” of Postage: “You’re working on a card, and the card should be separate from the background.”