2013-09-11

Co.Labs

How Three Non-Designers Made The Most Beautiful Weather App We've Ever Seen

Having to please Kickstarter backers, and themselves, gave a small, young app team just the kind of focus it needed to ship a better weather tool.



How do three young guys, none of them designers, turn out a webapp described at launch as "beautiful," having an "elegant look and silky smooth performance," feeling "exactly like a native application," and having "web app developers drooling"? And can they repeat that success with new ventures in adjacent fields?

The way two of the guys behind Forecast tell it, they started by "cheating until it worked," and by "it," they mean everything: design, function, usability. The three guys, in their 20s at the time, knew exactly what they wanted, but didn't have anyone around to convince them theirs was the wrong way, or too much work, or not modern enough.

In Troy, NY, you can achieve that kind of isolated focus. Troy is where the three met up, after attending Rensselaer Polytechnic Institute, working jobs in game and web development, and deciding to team up on a project to solve the founder's inspirational problem: having no idea when it would start or stop raining, exactly.

None of them had backgrounds in meteorology, and none intended to plant a flag for the web as platform, HTML5 and JavaScript over Flash, or other benchmarks. They wanted to smooth out the "clunky, jerky and hard to follow" radar maps, unleash modern data-mining tools on the standard weather prediction models, and make it all look nice.

The first version of that was a Kickstarter-backed iOS app, Dark Sky, that told you what was going to happen in the next hour: light rain in 16 minutes, heavy snow in 28 minutes, or just overcast. How did they deliver what so many weather apps could not? Smart use of neural networks and computer vision, along with a smart way of jamming data sources together (detailed in a team blog post).

Feature requests poured in: humidity, wind speed, seven-day forecasts, and, most notably, international coverage. The team decided to expand Dark Sky into Forecast, a free webapp that scaled nicely on desktops, tablets, phones, or nearly anything else with a screen. They make money with a tiny bit of advertising, but also through a robust API that can power other apps and sites. And they keep on pointing new data technologies at far-reaching questions.

Their newest venture, launched this past week, is Quicksilver. The web app provides a "hyperlocal real-time map of global temperature," with "the highest resolution map of its kind anywhere." As with Forecast, the Dark Sky team is quite open about how they achieve rich results with the same data available to everyone, writing up their process in a detailed blog post and encouraging developers to download their data and do "something fun with it."

Relevant Design Through "The Newspaper Model"

But back to Forecast, and its mostly text-based design and function: That text was anything but easy to generate. "As we looked at the data, we realized that it's really hard to describe what the next hour of water in the air is going to be," said Adam Grossman, a partner and cofounder in The Dark Sky Company. "There could be piddly sprinkling for 10 minutes, then ramping up into a hard rain. There are sudden downpours... There was more work to the weather in the next hour than we had originally hoped."

Cofounder Jay LaPorte said what really mattered, in both the next hour and the description of a day, was the delta--the difference between what people expect (hot and humid in Washington, D.C. in the summer, rain in Seattle) and what is brewing in the sky. "Tell me something I don't know, really, is how it works," LaPorte said. "We've always tried to focus on what's relevant to you, to filter out all the unnecessarily extensive data."

If you want to know why something looks, acts, or feels the way it does in Forecast, that's your answer: The team is trying to pack away the details that overwhelm many weather dashboards, letting you dig in with taps or clicks to get to it. "We sort of took the newspaper model," LaPorte said. "The first (paragraph) is a summary of what's going on. If you want the nitty-gritty, turn to A-12."

Making The Web Look More Like A Native App

There were a few firm guidelines for Forecast's interactions. Chief among them were avoiding the hints and feeling of looking at a webpage. No underlined links, and no data dumps that would require scrolling down the page. Get as much native app feel into the thing as possible. Again, not because they were flexing their design and HTML5 muscles, but for 3-guys-in-Troy pragmatism: "We were making a free app, and we wanted it on as many platforms as possible," LaPorte said.

Forecast's look was similarly simple but considered at length. The site was almost entirely hand-coded in JavaScript. "Jay and I have a distrust of big frameworks," Grossman said. "You can make something really quick, but then you want to do something fun and useful, you hit a wall, and you find out you're stuck."

The site's monochromatic, very gently moving icons were also made by hand by LaPorte, with procedural animations (which Grossman thought would never work). The team wanted the icons to look like a printed page, and stuck to what they knew as non-designers.

"For the basic design of the site, we looked at a few different color schemes, but all of them clashed, or became too busy," LaPorte said. Similarly, it was hard to pick colors for animations that would mesh with other animations' colors, all while keeping the palette together."

"The way we ended up solving the problems was to cheat. We ended up using mono, and using color only for the really salient points, and a little blue for emphasis. ... Cheat until it works, really."

The Pain Of Extreme Optimization

As for the justly admired smoothed-out radar animations, those are HTML5 Canvas, with every pixel redrawn once a frame. On some devices, like the iPhone 5 and decent laptops, you might get away with that kind of brute-force computation. But to get the site looking smooth on all kinds of devices, LaPorte wrote his code in such a (painful, machine-minded) way that a device's JavaScript interpreter does the absolute minimum to act out the code, and its graphical processor handles more of the work that usually slows down the main processor. Writing code by hand with explicit performance targets is possible, Grossman said--"just not advisable."

Not everything shipped under the keep-it-simple banner worked out. For the icon that smartphone and tablet users see when they add Forecast to their home screens, the first version was, in Grossman's words, "a complete failure."

"The thinking was, 'Let's not have an icon at all! Let's just have a wet piece of metal!' It was going to be this clever thing: no logo, just some water drops. I tried to convince myself it was good, but it failed. We fixed it, and it's much better now."