Denim & Steel

Work

Beardspotter - Launched

Try It

Got a smartphone (ideally an iPhone)? Go to beardspotter.com and give it a try. Add it to your home screen for quick access and get a slick little icon for no extra charge.

No beards in sight? You can take a look at the Sightings page at http://beardspotter.com/sighting. If you visit on a non-touch device, just use your left and right arrow keys to move between reports.

The Idea

The vision was pretty simple: a beard-counting mobile web app. The mockup and the prototype happened at the same time that afternoon, and while we were goofing off at first we started seeing some interesting technical and design challenges to explore. In the following days we worked at it a bit more and eventually made it an ongoing side project.

On the interface design side, we were looking for a way to tally different beards easily and enjoyably, while keeping error rates low. Most mobile tallying apps we looked at only let you count one or two items, with one outlier letting you count up to four. We thought we could do better. After all, there are more than four types of interesting beards.

The early designs tested well so we started to push the responsiveness, wondering how close we could come to the feel of a native app. That theme kept running through the project and became the underlying focus of the experiment.

The Approach

The interaction model we settled on provided for counting up to nine items on one screen. Getting the tap-target areas to the right size and getting the add/reset actions feeling right turned out to be the easy part.

What was difficult was the page that confirmed the submission of a report. That page was easy to make, but it felt like the experience dropped off too quickly, that there was something more needed. We decided to re-frame that page to show recent reports from anywhere on Earth, adding social and geographic dimensions but without overloading the simple UI. Although it sounds easy to pull off, it presented some new challenges.

We realized pretty quickly that plotting each report on a live map would be too slow. Instead, we used a little mathemagic to position the marker onto a static map image rather than looking up a map position each time. A little CSS magic adds the pulse effect to make the individual spots easier to notice at a glance, and gives it a feeling of being more active.

The interface to step through beard reports was harder than expected in both design and building. We tried a vertical scrolling list, but it was choppy and cluttered. A horizontal carousel approach was better but not perfect. We went from talking at length about where to put back and forward controls, but eventually landed on a swipe-based mechanism that moves so naturally and smoothly you’d almost believe it’s a native app.

We also found another use for our lightweight approach to identity in casual social apps, opting to just save names on the client-side and to forego accounts and passwords. We can do those, but we don’t assume we have to everywhere.

What’s the Point?

Fun, practice, and continuing to work in the area we love most: where the web, mobile, social and connections to the physical world all meet. Projects like this are our exercise: we do them because they expand capability.

The quality we chased the most in this project is a key hurdle for mobile web apps: speed. Many web businesses and developers are reporting significant impact from even small improvements in speed. Getting a web app close to the responsiveness of a native app is not only a mark of pride, it helps make web apps a more serious contender for businesses looking to deliver a great mobile experience.

Go For It

Like the interaction pattern or that sweet scrolling on the Worldwide Beards page? Feel like using some of the code for a project you’ve got in mind? We hear you.

That’s why Beardspotter is open source under the MIT license. Fork it. Have fun with it.

Want us to make something cool for you? Just say hello.

Back to Work Back to Home