If you were starting a Mobile App Design Hall of Fame, how would you decide which apps to nominate? Personally, I think I’d vote for the apps that keep me engaged through creative, elegant use of touchscreen-specific design principles. I’d point to a handful of mobile apps that are so delightful to play with that I want to keep tapping around even after I’ve finished doing what I set out to do.
I’m talking about apps like Any.do, Band of the Day, Clear, Cloze, Circle, Evernote Food, Flipboard, Houzz, Letterpress, Mailbox, Paper, Path, Pinterest, Pocket, and Snapseed. It’s hard to describe exactly what it is about the design of these apps that makes them succeed so well; as U.S. Supreme Court Justice Potter Stewart once said about pornography, you know it when you see it. But it has something to do with beauty, utility, attention to detail, and above all, simplicity.
The paradox of a truly great app is that the design becomes invisible. An effective interface puts every function you need at your fingertips and gives you feedback when necessary—but it doesn’t get in your way.
There’s a just-released app for the iPhone, Mokriya Craigslist, that embodies all of these qualities, and I had the opportunity to talk this week with one of its creators, Sunil Kanderi of the Cupertino, CA-based mobile design studio Mokriya. Kanderi walked me through the design thinking that went into the project, and he even shared some of the firm’s early drawings and wireframes (see the slide show above). It adds up to a rare glimpse into the process that most great designers tend to follow—that is, alternately brainstorming creative ideas and paring them down to their essential core.
As the name suggests, Mokriya Craigslist is an app for browsing Craigslist, the global classified ads and discussion site born in San Francisco in 1996.
If you’ve been to Craigslist on the Web lately, you know that it follows an uber-minimalist design ethic—it’s just column after column of blue links. The site’s basic look hasn’t changed much since the ’90s. There’s a slightly more mobile-friendly version of the website for smartphones, but the company has never built native iOS or Android apps that would make it truly convenient to browse the site’s hundreds of millions of listings on today’s smartphones.
Instead, dozens of independent developers have tried—often without permission from Craigslist itself—to build their own apps that scrape and reformat the site’s data. Nearly all of them suck.
“With such an important property, not having a decent mobile experience just didn’t feel right, so we wanted to devote some effort to trying to solve that,” says Kanderi, who is Mokriya’s co-founder and CEO. The firm has built apps for notable Silicon Valley companies like Hipster, Mixpanel, Threadflip, Sidecar, and SimpleGeo; it sees the Craigslist app, its first solo product, as an opportunity to stretch its design and business muscles. Capturing even a small percentage of Craiglist’s 50 billion page views per month, after all, would be a huge coup for any startup.
To get off on the right foot, Kanderi negotiated an agreement with Craigslist’s lawyers that allows Mokriya to hit Craigslist’s servers with data requests, in return for a licensing fee and a share of Mokriya’s revenue. (The app is free, but there’s a $0.99 upgrade fee if you want to post listings, set up alerts for items you’re following, or favorite a listing for later viewing. The conversion rate since the app’s February 20 release has been very high so far—Kanderi says about 10 percent of the app’s users have paid for the upgrade, which is at least twice the usual conversion rate for a freemium app.)
When it came time to design the app, the first task was to size up Craigslist itself. The catalog is multi-layered, organized first by geography, then by topic (community, personals, housing, for sale, services, jobs, gigs, resumes etc), then by sub-topic (there 36 categories of for-sale items alone). That adds up to a big design challenge. “If you look at other Craigslist apps, they make browsing/searching possible, but with at least seven to eight taps” required to get to individual listings, Kanderi says. “We wanted to make it super easy.”
In their earliest sketches, Mokriya’s designers played around with a circular top-level topic menu, playing off the peace symbol that is the Craigslist emblem. They eventually gravitated to something less slick but more functional. “If you try to be too clever you can get in the way of the user’s experience,” Kanderi says. “We came up with a vertical tab menu that allows you to quickly select a category and sub-category with just two taps.” Kanderi says he considers this two-tap system the biggest user interface innovation in the app.
The sub-category list view is probably where users spend the most time in the app—it’s where you scroll through the actual listings for, say, Apartments/Housing in the Potrero Hill neighborhood of San Francisco, where I live. Here, again, the interface tries to stay out of the way.
“If you look at most of iPhone apps, there is a tabbed menu at the bottom, and a title bar at the top,” says Kanderi. “That’s almost 100 pixels of real estate gone. Not much space left to show content. So we tried to keep our footprint really, really small, with just one title bar with two buttons on top, and a bottom wheel that takes about 30 percent of the space at the bottom.”
The category and location menus are squeezed into the title bar, which means they’re always at hand, reducing the number of taps needed to surf around the catalog. The wheel, meanwhile, lets users choose between a standard list view, a tiled view, or a map view.
But even the wheel is unobtrusive. “We paid close attention to browsing habits and optimized around it,” Kanderi says. “As you scroll down, you really don’t need to see the bottom wheel or the Alert bar, so they disappear. As you scroll up, they appear again. So we automatically conserve real estate for browsing to give you the best experience and reduced clutter.”
Once you open an individual listing, the user interface almost entirely disappears, and all of the screen real estate is devoted to the item itself. If you’re looking at an apartment listing, for example, there’s a big area for a photo, which you swipe left or right to see additional photos; a big text area; icons for calling or e-mailing the landlord or favoriting the listing; an “X” for returning to the list view. That’s it.
Surrounding all this simplicity are a multitude of tiny design touches that do little to enhance the basic Craigslist data, but make the process of finding it more enjoyable. There’s the color scheme, for example—a classy, modern combination of white, gray, and the signature Craigslist purple. “On the iPhone, the choice of colors matters a lot,” says Kanderi. “We think it’s core to the overall user experience.”
The app also makes extensive—but discreet—use of animation. When you open the category list, there’s a slow reveal, as if a door is opening on the information. When you switch subcategories, a highlight marker slides up and down the column. When you’re scrolling up in a list view, new items settle in lazily from the lower left, as if the items were pieces of paper being fanned onto a desk.
“With a resource like Craigslist, a lot of the decisions have already been made, in terms of what data is going to be there. We wanted to add some elements that would make it a fun experience, and those little gestures and animations help,” says Kanderi. “You can actually overdo it, and we took out a lot of elements that we initially had. But we wanted to make it playful. When people use it, they should feel happy.”
After we’d finished going through the whole Craigslist app, I asked Kanderi if he could boil Mokriya’s design process down into just a few points.
“The number one thing is that we spend a ton of time just using pen and paper,” he says. “That is the easiest way to iterate on a design. Then we wireframe every single iteration, and spend a lot of time on each individual interaction within the app. I think, at the end of the day, when the app comes out, if you haven’t put enough thought into every single item, it’s easy to pick out the pieces you missed. It’s really crucial to pay attention to every single app, every single button.”
Just as important: counting taps. “In every screen, every interaction, we counted the number of taps and swipes it takes for the user to get the job done,” says Kanderi. “These are really small design decisions, but cumulatively they actually make or break the experience.”
The bottom line: making an app simple is hard work. Says Kanderi, “You go through five or six iterations before you get to the one experience that makes people say ‘Wow, it’s so simple to use.’”
Check out Mokriya’s app yourself and leave us a comment with your impressions. If you tell us which apps you’d put into your own Design Hall of Fame, we might just write about them down the road.
As Path founder and CEO Dave Morin put it to me a few months ago, “We are just barely getting going in technology’s ability to make our interactions with other humans more interesting.” Design principles will keep evolving, and there’s no doubt that the apps of 2016 or 2020 will make Mokriya’s apps—and everything else we use today—look just as quaint as Craigslist.
